[Menu button]: Add submenu example and guidance to the menu button 🌳

[dianasanborn]

The problem

This is part of the effort to consolidate the Sustainability Software PAL buttons guidance with Carbon's menu button guidance.

Figma file: Menu button comparison

Currently there are two very similar components available in both Sustainability PAL and Carbon: the menu button and combo button. Carbon's menu button was created based on Sustainability's button extension and other use cases.

Functionally, they both work the same. There are some slight stylistic differences but the Sustainability org will inherit Carbon's menu button styling.

One scenario that is not included in Carbon's guidance is the use of a submenu from the menu. This uses Carbon's menu component.

The solution

Based on conversations with the Carbon team:

• This is likely already possible to do since the menu button uses the menu component, but it's not available OOTB
• Consider putting an image example and guidance in the docs to let teams know that this capability is available
• Consider putting a prop or example of this in the storybook in code
• Diana had a discussion with Michael Gower on the accessibility considerations and there are no concerns with the use of a submenu in the menu button.

Examples

(Ignore button styling for these screenshots — we will inherit Carbon's button styling)

Menu button

Combo button

Application/PAL

Sustainability Software PAL

Business priority

None

Available extra resources

https://carbon-design-system.github.io/carbon-addons-iot-react/?path=/story/2-watson-iot-experimental-%E2%98%A2%EF%B8%8F-menubutton--single-menu-button

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.