Added SplitButton teams component #411
Conversation
| SplitButtonPropsBase, | ||
| 'size' | 'disabled' | 'disabledFocusable' | ||
| > { | ||
| appearance?: 'transparent' | 'primary'; |
There was a problem hiding this comment.
You could extend from ButtonProps
| * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary | ||
| * action, while interacting with the second one opens a menu with secondary actions. | ||
| */ | ||
| export const SplitButton = React.forwardRef< |
There was a problem hiding this comment.
SplitButton in Fluent is a bit of a weird component since it really doesn't like JSX children. Wondering if we want to consider an children based API for the teams version of this
<SplitButton>
<SplitButtonMain />
<SplitButtonMenu />
</SplitButton>
| return ( | ||
| <div className={styles.sampleContainer}> | ||
| <Menu positioning="below-end"> | ||
| <SplitButton>Split</SplitButton> |
There was a problem hiding this comment.
Is it accessible to create a split button without a title/aria-label for the menu button part?
|
|
||
| it('should throw error if menuTitle is provided without main title', () => { | ||
| expect(() => | ||
| render(<SplitButton menuTitle="Menu">Test</SplitButton>) |
There was a problem hiding this comment.
I don't understand this requirement, why would menu title make the title required?
There was a problem hiding this comment.
If title is provided without menu title, tooltip will be applied to the full SplitButton
If both are given, there will be separate tooltip for action button and menu button - so I think it makes no sense to be able to provide only menu title
packages/teams-components/src/components/SplitButton/renderSplitButton.tsx
Outdated
Show resolved
Hide resolved
2 participants
This PR adds the SplitButton component to the Teams component library: