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

Component: Split button

Open gfellerph opened this issue 2 years ago • 1 comments

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
  • Two variants are available: primary and secondary
  • <post-menu> can be used for automatic slot assignment, dropdown and trigger should be handled internally
  • default slot could be button content, can also include an icon
### 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 avatar Oct 25 '23 06:10 gfellerph

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

gfellerph avatar Nov 08 '23 08:11 gfellerph

Closing in favor of v2 split button

gfellerph avatar Sep 23 '24 13:09 gfellerph