design-system
design-system copied to clipboard
Component: Split button
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
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 create tickets for the components needed to compose the split button.
Closing in favor of v2 split button