Create new Dropdown-Button component

Feature Request

Description

Create a new dropdown-style button component with two features:

• one for a split-button (2 targets: regular button plus a dropdown icon-button that reveals the menu)
• one for a dropdown-button (1 target: clicking button reveals the menu)

Button should also contain a prop for isBlock to stretch to fill 100% of container’s width.

Additional details posted here: https://zpl.io/a3gPoXy

Tech design link

Additional Context / Screenshots

screenshots:

---

• Split-Button example:

• Dropdown-Button example:

[jenniferwurth]

@StephenEsser @nickpith - I can assist when it comes to the use cases of when to choose one component vs. the other. I would also refer you to our Cerner Design Standards: Buttons and Drop-down for additional information.

Dropdown Buttons:

• Provide the user with a list of items they must choose from once they’ve selected an initial action.
• When to use: Dropdown buttons are best used when users need to choose from more specific options to the button action they are interacting with.
• An example of this would be if you have a dropdown button that says ‘Export’ further options would be Export as PDF, Export as XML, etc.

Split Buttons:

• Provide the user with the ability to choose the primary action or an action from a listing of alternative actions.
• When to use: Split buttons are best used when there are many possible actions users can take, but only one primary action.
• An example of this would be google’s old gmail design that had ‘Reply’ as the primary action, but you could also hit the dropdown from this split button to reveal different options such as: Reply All, Forward, etc.

Drop-downs:

• Present a list of options to a user when interacted with. It provides an easy and accessible way to group a large number of selectable options.
• Drop-downs are typically used in forms or filter workflows, where dropdown buttons and split buttons would not be appropriate.
• When interacted with, drop-downs provide a select menu with a list of options for the user to select from. If there is not an option selected by default, then provide a ‘Select’ placeholder value. If the field is not required, the user should be allowed to unselect or remove a previous selection.

[amberwilks]

I will also add to @neilpfeiffer 's comment above. Using a Select control to create the drop-down button would violate accessibility guidelines. The control must announce itself as a button for screenreaders. The use of semantic code is very important for all assistive technologies.