feat(design-system): add DsSplitButton component [AR-54024]#347
feat(design-system): add DsSplitButton component [AR-54024]#347iromanchuk-dn wants to merge 9 commits intodrivenets:mainfrom
DsSplitButton component [AR-54024]#347Conversation
packages/design-system/src/components/ds-split-button/ds-split-button.module.scss
Show resolved
Hide resolved
packages/design-system/src/components/ds-split-button/ds-split-button.types.ts
Show resolved
Hide resolved
|
missing browser test fro the button |
…24-design-system-split-button
…24-design-system-split-button
| export type SplitButtonSize = (typeof splitButtonSizes)[number]; | ||
|
|
||
| export interface DsSplitButtonSlotProps { | ||
| button: Partial<DsButtonV3Props>; |
There was a problem hiding this comment.
type SplitButtonButtonProps = Pick<DsButtonV3Props, 'icon' | 'loading' | 'onClick' | 'aria-label' | 'className' | 'disabled'>;
| $divider-z-index: $highlighted-z-index + 1; | ||
| $divider-width: 1px; | ||
| $border-width: 1px; | ||
| $button-transition-duration: 0.15s; |
There was a problem hiding this comment.
transition standard is .2s
There was a problem hiding this comment.
I made it aligned with DsButtonV3, it's important to have the same duration, because $button-transition-duration affects button right border.
There was a problem hiding this comment.
So maybe add a comment about this?
Or even better, let's try to find a way to share it and have a single source of truth
I'll just note that I'm afraid that importing it as a SCSS variable will import & bundle the whole button SCSS file, so need to be careful with that
…24-design-system-split-button
…24-design-system-split-button
| 'aria-label': 'Refresh', | ||
| onClick, | ||
| }, | ||
| select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps, |
There was a problem hiding this comment.
I think you don't need any of the as DsSelectProps
| value: '30', | ||
| onValueChange: vi.fn(), | ||
| multiple: false, | ||
| } as const satisfies Partial<DsSelectProps>; |
There was a problem hiding this comment.
this could be simplified to:
| } as const satisfies Partial<DsSelectProps>; | |
| } satisfies DsSelectProps; |
| 'aria-label': 'Refresh', | ||
| onClick, | ||
| }, | ||
| select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps, |
There was a problem hiding this comment.
you're overriding an existing prop in all tests for no reason. This can be simplified in all cases:
| select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps, | |
| select: defaultSelect, |
| $divider-z-index: $highlighted-z-index + 1; | ||
| $divider-width: 1px; | ||
| $border-width: 1px; | ||
| $button-transition-duration: 0.15s; |
There was a problem hiding this comment.
So maybe add a comment about this?
Or even better, let's try to find a way to share it and have a single source of truth
I'll just note that I'm afraid that importing it as a SCSS variable will import & bundle the whole button SCSS file, so need to be careful with that
There was a problem hiding this comment.
Seems like there are some padding-top issues with the small size (maybe bug in the select component itself?):
| const { className: buttonClassName, disabled: buttonDisabled, ...buttonRest } = slotProps.button; | ||
|
|
||
| const { className: selectClassName, disabled: selectDisabled, ...selectRest } = slotProps.select; |
There was a problem hiding this comment.
nitpick, non-blocker
maybe this is nicer? 😅
| const { className: buttonClassName, disabled: buttonDisabled, ...buttonRest } = slotProps.button; | |
| const { className: selectClassName, disabled: selectDisabled, ...selectRest } = slotProps.select; | |
| const { className: buttonClassName, disabled: buttonDisabled, ...buttonProps } = slotProps.button; | |
| const { className: selectClassName, disabled: selectDisabled, ...selectProps } = slotProps.select; |
| type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never; | ||
| type SelectSlotProps = DistributiveOmit<DsSelectProps, 'size'>; |
There was a problem hiding this comment.
🔥
maybe at some point we'll have a type-utils.ts file
I guess we should keep this in mind once we'll add more utils like this
| export const getSelectSize = (size: SplitButtonSize): SelectSize => { | ||
| return size === 'medium' ? 'default' : 'small'; | ||
| }; |
There was a problem hiding this comment.
IMO having a whole file for this is overkill
I would put this in the component itself as a variable 🤷
3 participants
Jira | Figma
Depends on:
DsButtonV3[AR-52648] #350DsButtonV3[AR-52648] #353Showcase
Screen.Recording.2026-04-09.at.17.41.38.mov