1880557 - [meta] Implement menu / dropdown icon-label list to be used in Spotlight

Status: NEW

(Firefox :: Messaging System, task, P1)

Description

[Michael Hughes]

The Desktop Integrations team is working on a feature to message users about setting Firefox as the default mailto handler. One of the ways this will be messaged is through a Spotlight panel that will allow the user to select the mailto handler from a list of websites registered with Firefox via registerProtocolHandler(). See the figma here for visuals: https://www.figma.com/file/MTox8iIdh1xxJ5SfnpsczZ/MailTo-Handling?type=design&node-id=828-14559&mode=design&t=gylgZCoMvvjN4BgD-0

In order for this to work, we need a component for the menu / dropdown list. It will be populated via a call to a custom function that the Desktop Integrations team will write. It will take the form:

function populateMailtoProtocolHandlers();

And will return an object of the form:

{
currentSelection: string, // value
items: array of objects with {iconPath, fluentLabel, rawText, value} // fluentLabel will be used if present, rawText otherwise
}

The above names/format can change.

We will also require that the user selected item from this list be sent to the Save/submit action/handler, since that will need to know what to do with the user selection.

Comment 1

[Shane Hughes [:aminomancer]]

eng notes:

we'd benefit from extending the existing SubmenuButton component rather than creating a new component from scratch. we implemented something very similar for the split dismiss button submenu in feature callout, and it also works in spotlight. so we actually have a working dropdown submenu system already, it's just not yet capable of fetching the list of items dynamically, and it's not a menulist (i.e. the button is static rather than showing the currently selected item).

so we could add type: "menulist" to submenu_button to make the bundle render a <menulist> rather than a <button>. that should also change the flow so that each item's action is not invoked when it's clicked, but rather when the "Save" button is clicked. so this is similar to the collectSelect feature for MultiSelect, only we're using submenu instead of checkboxes/radios.

and as for fetching the list of items dynamically, rather than a static list of menuitems in the submenu property: we just need to add some JSON property/value that will cause the component to use the aforementioned hook to get the list of items.

note: we should make a tech plan ASAP.