feat: add menu-button component to FAST

[michaeldbrandt]

FAST currently contains a button component and menu component. One common use case is a button that opens an associated menu, say, for a toolbar. To avoid repeating code, it would be helpful to have a single component that manages the menu opened state, and handles the keyboard navigation and a11y concerns involved in this type of menu.

I've put together a sort of prospective and bare-bones spec for this component below. Is something to fill this niche planned for FAST in the future?

Menu Button

Overview

FAST currently contains a button component and menu component. One common use case is a button that opens an associated menu, say, for a toolbar. To avoid repeating code, it would be helpful to have a single component that manages the menu opened state, and handles the keyboard navigation and a11y concerns involved in this type of menu.

The menu-button represents a logical connection between a button and an openable menu. This allows for stronger ARIA semantics than using a normal button to open a menu.

Use Cases

• Creating an optional or hidden menu for application interaction which is activated by a button

Features

• Sets appropriate ARIA properties on the associated button and menu, such as aria-haspopup and aria-expanded
• Manages focus and keyboard navigation between the button and menu
• Manages menu visibility state and dismiss behavior

Risks and Challenges

Some of these features might be more appropriately implemented in other places.

For example, one major driver for requesting this component is the dismiss behavior, closing a menu when the user clicks elsewhere in the page. This could potentially be in its own component, i.e. MUI ClickAwayListener. It could also reasonably be included in the menu component itself.

This component also potentially duplicates a lot of the work done on the select component.

Prior Art/Examples

• Fluent - contextual menu button
• Angular Material - menu
• Material Design - dropdown menu
• ReachUI - menu button
• Atlassian - dropdown menu
• Ant Design - dropdown
• Inclusive Components - menu buttons
• MUI - ClickAwayListener

---

Design

API

Potential ideas:

<menu-button menu="id">Button Content</menu-button>

<menu id="id">…</menu>

This option would essentially just introduce a new attribute on a button to associate it with a menu.

---

<menu-button>

    <div>Button Content</div>

    <menu slot="menu">…</menu>

</menu-button>

This option would add a new slot to a button to contain a menu to display when the button is clicked. Default slot content would be displayed on the button.

---

<menu-button>

    <button>Button Content</button>

    <menu>…</menu>

</menu-button>

This option would simply create a container that would group the button and menu together.

Accessibility

The menu-button should align to the interaction model provided by the W3C

[chrisdholt]

Thanks for submitting this @michaeldbrandt - I think we've considered this before, let me digest this and provide some thoughts back!

[jattasNI]

@chrisdholt this issue was filed over the end-of-year break so may have fallen off your radar. Do you have thoughts on whether a menu-button is something FAST would provide (and if so, what the priority/timeline might be)?

[chrisdholt]

@chrisdholt this issue was filed over the end-of-year break so may have fallen off your radar. Do you have thoughts on whether a menu-button is something FAST would provide (and if so, what the priority/timeline might be)?

I think we can look at providing this - I'm not sure what the shape and API would be quite yet though. I do know that we're likely looking at next quarter at the earliest right now.

[hawkticehurst]

I'll chime in to say this (i.e. menu button/split button) is something that we would love to see in Webview UI Toolkit for VS Code land!

We've had an open issue for a while that was tracking the progress of the FAST split button spec, but now that it's been closed I thought I'd chime in here as well.

[hawkticehurst]

I also realized that in that toolkit issue we said we would be happy to give feedback on this sort of component and seemingly forgot to, so if there's a place where myself and/or @daviddossett can give input let us know (@chrisdholt)!

[chrisdholt]

Hey all, sorry for the delay in getting back here - I think this is something we'll definitely look to add. I want to revise the spec and will look to do so quickly!

[daviddossett]

Hi all! Just checking in here. We're still looking to add a split button to the webview UI toolkit as soon as possible. Basically to have a component that mirrors VS Code's.

..which is similar to Fluent's:

However it looks like this proposal, as the name implies, is closer to something like the contextual button in Fluent where this isn't a primary actions with secondary actions as a separate button:

Are there any plans to also implement a split button?

[chrisdholt]

Hi all! Just checking in here. We're still looking to add a split button to the webview UI toolkit as soon as possible. Basically to have a component that mirrors VS Code's.

..which is similar to Fluent's:

However it looks like this proposal, as the name implies, is closer to something like the contextual button in Fluent where this isn't a primary actions with secondary actions as a separate button:

Are there any plans to also implement a split button?

I've done some prototyping here and I think the most difficult consideration is that ideally neither of these controls are in the Shadow DOM. @daviddossett do you have ideas on how split button might manifest as a foundation component? I'd be happy to share how I approached this in my prototype and how I think it could be setup for VSCode toolkit. Technically I guess I could contribute a proposal to you all :). Thoughts?