feat(design-system): add DsSlider component [AR-77548] - #629
feat(design-system): add DsSlider component [AR-77548]#629vpolessky-dn wants to merge 5 commits into
Conversation
✅ Deploy Preview for drivenets-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| * Drives thumb and track sizing together (S/M/L → 16/20/24px thumb, 2/4/8px track). | ||
| * @default 'medium' | ||
| */ | ||
| size?: DsSliderSize; |
There was a problem hiding this comment.
Let's make this prop responsive
| * Granularity that the value snaps to. Must be greater than 0. | ||
| * @default 1 | ||
| */ | ||
| step?: number; |
There was a problem hiding this comment.
Let's make this prop responsive
| /** | ||
| * Accessible name per thumb. Required for `type="range"` (e.g. `['Minimum', 'Maximum']`). | ||
| */ | ||
| thumbLabels?: string[]; |
There was a problem hiding this comment.
Let's make this prop responsive
| const toArray = (value: DsSliderValue | undefined): number[] | undefined => { | ||
| if (value === undefined) { | ||
| return undefined; | ||
| } | ||
|
|
||
| return Array.isArray(value) ? value : [value]; | ||
| }; |
There was a problem hiding this comment.
Let's extract it into ds-slider.utils.ts
| flex: 1; | ||
| height: var(--ds-slider-track-height); | ||
| background: var(--background-secondary-hover); | ||
| border-radius: 9999px; |
There was a problem hiding this comment.
Let's make scss var for this value
| outline: none; | ||
| cursor: pointer; | ||
| transition: | ||
| width 0.2s, |
There was a problem hiding this comment.
Let's make scss var for 0.2s
There was a problem hiding this comment.
Include this component into "packages/design-system/tests/storybook/docs-snippets.docs.test.ts" and make sure code snippets look good.
iromanchuk-dn
left a comment
There was a problem hiding this comment.
Looks great!
I've left several comments
…to feat/AR-77548-add-slider_v01
No description provided.