design-system icon indicating copy to clipboard operation
design-system copied to clipboard

[component]: Custom select

Open gfellerph opened this issue 1 year ago • 0 comments

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

gfellerph avatar Jul 25 '24 09:07 gfellerph