Use of "Submenu" and "MenuTrigger" components, in ComboBox?

[ninavizz]

Hello! Is it possible to use the Submenu or MenuTrigger components, with a ComboBox? See sketch in screenshot, below.

I'm a designer working in Figma, Storybook, and also referencing the React Spectrum documentation. I see lots of menu options for button components, but not in use with the ComboBox. The developers I'm working with also do not see it mentioned in the documentation, so are currently running with the assumption that it's not possible.

The selected component above, I pulled from a Figma community components kit—but I don't see any of the attributes of this menu component spoken to in the ReactSpectrum documentation. Is it possible in React Spectrum, to add what this Figma component calls a "Description," to the same selectable menu item as the text marked "Label"?

TIA!!

[snowystinger]

In a combobox, SubMenu is unlikely, but we're working on a Searchable Menu, which will probably do the thing you want #7181

As for description, we don't currently support that in S1 or S2, but it may be added in the future.

[ninavizz]

@snowystinger Huh. Do you have any idea where the "Description" concept in the Menu component came from? Is it an artifact of Spectrum Web? I saw it in a Storybook component (screenie, below)—see "Shut the door" on the menu item "Floor." Do you know what prop that is, or how it got there?

Thx for sharing the Searchable Menu! Is it for S1 or for S2? Any idea when it might be available to use by the general public?

[snowystinger]

Correct, description is purely a Spectrum concept, you can add it if you like to your own design system. If you want it to behave like ours, feel free to peek at the source code.

As for the prop, it's just a child, you can check out the API in our docs, probably a little easier than looking at the stories. https://react-spectrum.adobe.com/react-spectrum/Menu.html#complex-menu-items
I'm not actually sure where you got the storybook link, that's only used for testing, not documentation.

Searchable Menu looks like it will have hooks and a RAC, which means likely only S2. Though we may back port it if there's strong need within Adobe.

[ninavizz]

@snowystinger I got the link from GitHub commit comments. I also just found this component, the ListBox, which effectively accomplishes what I'd like to see done in Menu Items. Is it possible to use ListBox to display results from a ComboBox?

I'm a freelance designer doing work for a team that wants to 100% use Spectrum, for a complex enterprise app—so am doing everything I can to stretch how it can be used, within its own parameters.

I apologize for all the vagueness, but really appreciate your thoughts and time!

[snowystinger]

In react aria components, yes https://react-spectrum.adobe.com/react-aria/ComboBox.html#example

In react spectrum, it's built in with styles already unfortunately.

[ninavizz]

@snowystinger It's a Sunday, TY for taking the time to send me the response! Aria is still helpful, I appreciate the tip!