swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.
https://design-system.post.ch
Apache License 2.0
119 stars 14 forks source link

Component: Split button #2126

Open gfellerph opened 10 months ago

gfellerph commented 10 months ago

Implement the split button web component: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=16826%3A34345&mode=design&t=bP9Hi2dc9M5IUf4v-1

image

Composition This component can be composed based on other components as proposed here: https://www.figma.com/file/Mfy46tN4q3KbDAIbRzfSTj/Popovers-and-dialogs?type=design&node-id=0-1&mode=design&t=PtufcPTL9UIyN9CS-0

In general, it should be easy to use this component, so most of the complexity should be internal.

External API suggestion

<post-splitbutton variant="primary" onclick="primaryAction()">
  Primary action text
  <post-menu>
    <post-option onclick="copy()">Copy</post-option>
    <post-option onclick="paste()">Paste</post-option>
  </post-menu>
</post-splitbutton
### Tasks
- [ ] Add a web component named `post-splitbutton`
- [ ] Add a documentation story
- [ ] Add cypress tests
- [ ] Add visual regression tests
- [ ] Test in high contrast mode
- [ ] Design Review
gfellerph commented 10 months ago

@gfellerph create tickets for the components needed to compose the split button.