spectrum-web-components
spectrum-web-components copied to clipboard
adobe
Add Spectrum Combobox Pattern
Expected Behaviour
https://opensource.adobe.com/spectrum-css/combobox.html should be available in the library.
Actual Behaviour
Missing
The future
The styles package to support this is https://www.npmjs.com/package/@spectrum-css/inputgroup The hope would be that this could be an extension of the sp-dropdown pattern in some way.
We could definitely use this component, specifically the "quiet" variant and ability to enter value that differs from the stock values (e.g. XD's zoom level combo for example).
Thanks for the info @CoreyDotCom! Would you be able to share any screenshots of what that looks like? As a "contribution" even the newest version of this pattern has only the smallest amount of direction in the Spectrum documentation, so this information would be invaluable.
Accessibility of combo boxes is really hard to get right and hard to retrofit if not considered upfront. Please ping me when this component starts to move along.
Basically just the quiet combo as found here https://opensource.adobe.com/spectrum-css/components/combobox/
Revisit this comment https://github.com/adobe/spectrum-web-components/pull/1661#discussion_r679336866 while shipping this pattern.
FYI: Currently, the work on this in blocked by the work going into the Overlay v2 release. Any team that was interested in leveraging a Combobox from SWC soon could smooth the process by beginning to test the RC release of that code in their application.
After that, it would be great if we could collect your specific use cases in the issue tracking this addition. Specifically, it would be useful to know which of the various Combobox type you are looking to leverage to support scoping an initial release:
- Select-Only Combobox: A single-select combobox with no text input that is functionally similar to an HTML select element.
- Editable Combobox with Both List and Inline Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as list with inline autocomplete.
- Editable Combobox with List Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as list with manual selection.
- Editable Combobox Without Autocomplete: An editable combobox that demonstrates the behavior associated with aria-autocomplete=none.
- Editable Combobox with Grid Popup: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
With that information, and the code review for the new Overlay API wrapping up this week, we should be in a place where we could review the outstanding work required by that branch in order to possibly break it into sharable pieces later this week into next.
Oh I would love the "Editable Combobox with List Autocomplete:" version. I'm trying to use sp-menu for just the mutli-select portion of this and really struggling. Even if I get it working, the list is long enough that the user experience will be poor searching through for the entry you wish to toggle.
