1812070 - Create menu and menu item components based off of panel-list/panel-item

Status: NEW

(Toolkit :: UI Widgets, task)

Description

[Mark Striemer [:mstriemer]]

The panel-list/panel-item components are now available in toolkit widgets, but they aren't following our reusable components conventions. They should be updated to ensure they follow our conventions and are documented properly in storybook. They should likely have new names that reflect that they are intended to be used as menus.

It could be helpful to use the button-group element (although its name should likely be focus-group or something else) to handle the focus capturing, or extract some new non-custom element mixin/helper function.

Comment 1

[Mark Striemer [:mstriemer]]

I have an initial patch with some ideas on how to structure this on hg [1]. This creates 3 elements, moz-panel, moz-menu, and moz-menuitem (maybe that should be moz-menu-item...). This results in moz-panel having most of the show/hide logic which likely makes it easier to mount the moz-menu inside of a XUL panel, but it also means that the semantic nature of having the menu itself be open or closed is starting to get obfuscated a little. There may be some way to work with that, it seems handy since we will sometimes need to put menus inside of XUL panels. This also means we have the moz-panel component for anything else that needs to be positioned relative to something else, like a tooltip.

Styling wise in that patch we'll want to confirm the padding around the menu items, and decide if we want them to be the same amount in content and in the chrome. It also only implements the checkable menu item, not the icon or badged variants.

The menu can be previewed on a Storybook on Glitch [2].

[1] https://hg.mozilla.org/try/rev/1eeb9bbc3d3d1b7d2b133a4c0f8308656166d712
[2] https://bumpy-smoggy-racer.glitch.me/?path=/story/design-system-experiments-mozmenu--default