Contribution: combo button

[kaylarakower]

Name: Contextual menu Combo button

Research: We have three actions a user can take to complete their tasks from our local navigation. If we displayed all three by default, the buttons take up the majority of the navigation.
The contextual menu was designed for our specific use case and tested positively in usability testing.

• Neilsen Norman article: https://www.nngroup.com/articles/contextual-menus/

Sketch file: https://ibm.box.com/s/hxoc500nk0i5l57evl308kf93c3jbt37

Contributing team: DrupalOne

Contributing designer: Kayla Rakower, [email protected]

Contributing developer: Chris Wilson, [email protected]

[aagonzales]

@kaylarakower is the button beside the menu also a part of the component? What the relationship of the button and menu? How is this different than an overflow menu or a dropdown?

Or is the component the whole piece? What do the pieces on the far left do?

[kaylarakower]

Sketch file: https://ibm.box.com/s/txyppivhxkx1cptc2lhfyr8afysujimy

[aagonzales]

✅ Experimental status approved

Moving forward this component will go into experimental to start with. I have approved @kaylarakower latest designs. Her developers will be building and contributing this component.

[kaylarakower]

Update: My team will not be able to contribute the development of this feature, @aagonzales please add to dev backlog

[carmacleod]

Our team has something similar to your menu button. Ours is a hacked up combination of overflow menu and primary button. It works "ok", but it does not have focus styling consistent with other Carbon primary buttons. Yours looks good so far! Our team could definitely use something like your menu button! (Of course, we would want to keep our plus sign icon. :) )

[carmacleod]

Also I'd like to make sure that you consider the ARIA markup needed to make a menu button accessible to screen reader users. Here's the "Menu Button" pattern in the APG. Please read through the "Keyboard Interaction" section and the "WAI-ARIA Roles, States, and Properties" section in the Pattern description. There are 3 examples - I think your menu button would be closest to the 2nd example (although I am not a fan of opening the menu on hover!). Note that the Pattern description is more important than the examples, because each example just shows one way to implement the pattern, but there are certainly other valid ways to do it.

[pirupius]

@carmacleod is there a chance your work around is documented online? We have a similar need and wanted a work around as we wait for this to be added to carbon. Can u please kindly respond to this discussion #9905

[laurenmrice]

• This is the updated design and specs for Combo button and Menu button using v11 tokens.

Combo button

• Only implemented using the Primary button.
• Offered in Large, Medium, and Small sizes.

Menu button

• Implemented with the Primary, Secondary, Ghost, and Tertiary buttons.
• Offered in Large, Medium, and Small sizes.