design-system
design-system copied to clipboard
[component]: Custom select
Description
Create a custom select web component.
For disambiguation with similar patterns (menu, split button), head over to https://github.com/swisspost/design-system/discussions/1888.
Design
https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-183
Accessibility requirements & behavior
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
Tokens
- [X] Tokens for this component are ready
Proposed API
<post-select multiple>
<post-select-button>[Value]</post-select-button>
<post-select-options>
<post-option>
<post-icon name="3000" />
Option 1
</post-option>
<post-option>Option 2</post-option>
</post-select>
Variants
- Single select
- Multiselect
Tasks
### 💻 Tasks
- [ ] Review Design (All states present? Possible to implement?)
- [ ] Web component implementation
- [ ] Documentation in Storybook
- [ ] Unit tests
- [ ] End to end tests
- [ ] Visual regression tests
- [ ] Design review