feat(design-system)!: add DsButton v1.3 [AR-52648] by mmurawski-dn · Pull Request #308 · drivenets/design-system

mmurawski-dn · 2026-03-25T12:12:02Z

https://drivenets.atlassian.net/browse/AR-52647

bttn.webm

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.types.ts

iromanchuk-dn · 2026-03-26T10:49:39Z

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.types.ts

+	/**
+	 * If true the 'pressed' styles are applied
+	 */
+	selected?: boolean;


If it better to call this prop selected or pressed?

I was not sure 🤔 I chose selected, because in the future we might have button group component (and selected prop would fit much better). Maybe I could change comment?

Ok, let's keep the name, but change the comment.

missing @default false annotation

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx

…venets#314) <img width="468" height="76" alt="image" src="https://github.com/user-attachments/assets/3761251e-b757-49fa-a456-90f357104fe2" /> <img width="480" height="81" alt="image" src="https://github.com/user-attachments/assets/02f6239e-ed04-4092-af8f-e08c99343bd0" /> --------------------------- <img width="489" height="85" alt="image" src="https://github.com/user-attachments/assets/cfc29e9f-9c5b-41a2-86e1-a252bf006f55" /> <img width="485" height="82" alt="image" src="https://github.com/user-attachments/assets/95e0a86c-2ceb-4b76-a149-0da3a1d813b3" /> Co-authored-by: Evyatar Daud <32631382+StyleShit@users.noreply.github.com>

…e` [AR-53523] (drivenets#289) <img width="378" height="140" alt="image" src="https://github.com/user-attachments/assets/3ed90c2d-47e8-433b-bc57-c0ba0c16a195" /> <img width="388" height="141" alt="image" src="https://github.com/user-attachments/assets/50c0d779-5040-4cad-9da7-7a23225f69e7" />

…enets#302) [Jira](https://github.com/drivenets/design-system/pull/AR-48187-dap-design-system-date-and-time-picker) | [Figma](https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=30063-134151&m=dev) ## Context This PR 3rd of 4 main PRs to create a Date Time Range picker components: 1. ✅ `Time Picker` component - standalone Time Picker component. [PR](drivenets#255) 2. ✅ `Date Picker component` - standalone Date Picker component with option to select time. It will use `Time Picker` component inside. [PR](drivenets#283) 3. 🫵 **`Date Range Picker` component - combines 2 `Date Picker` component** 4. ✅ Deprecate `DateInput` component ## Showcase https://github.com/user-attachments/assets/64849310-2a79-42f6-9e02-be00400377db

drivenets#275) Co-authored-by: Evyatar Daud <32631382+StyleShit@users.noreply.github.com>

…enets#288) [Jira](https://github.com/drivenets/design-system/pull/AR-48187-dap-design-system-date-and-time-picker) | [Figma](https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=30063-134151&m=dev) ## Context This PR is last of 4 main PRs to create a Date Time Range picker components: 1. ✅ `Time Picker` component - standalone Time Picker component. [PR](drivenets#255) 2. ✅ `Date Picker component` - standalone Date Picker component with option to select time. It will use `Time Picker` component inside. [PR](drivenets#283) 3. ✅ `Date Range Picker` component - combines 2 `Date Picker` component 4. 👇 **Deprecate `DateInput` component** ❗❗❗ It has to be merged last ❗❗❗ ## Showcase <img width="1897" height="839" alt="image" src="https://github.com/user-attachments/assets/10c33c00-4d04-460e-8daa-efbdb9e95a69" />

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @drivenets/design-system@0.8.0 ### Minor Changes - 73e3010: Add `DsDatePicker` component - 1fa6a48: Deprecated `DsDateInput` component - 27151fc: Add `DsKeyValuePair` component - 5cd65b4: Add `DsTimePicker` component - ad3aad4: Add `DsDateRangePicker` component ### Patch Changes - 0335e72: Capitalize only the first word in `DsStatusBadge` - 6dc2bbe: Fix font size in `DsDropdownMenu` item - 8aaa33b: Update dependencies - 56d993b: Fix table issues related to React Compiler - 8c56a53: Add `hideActionRequired` prop to `DsCommentBubble` - 7752e64: Add aria role to `DsLoader` - 5a59014: Remove ellipsis from `DsTooltip` Add `slotProps` to `DsTooltip` - e6da4c4: Fix `DsAutocomplete` onValueChange trigger, fix clear button - 16f7361: Fix styles in `DsCommentBubble` - eef2a74: Use semantic HTML structure in `DsTable` empty view - ba7fb97: Fix File prototype loss in `DsFileUpload` ## @drivenets/eslint-plugin-design-system@0.0.12 ### Patch Changes - 1fa6a48: Add deprecation rule for `DsDateInput` Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

vpolessky-dn · 2026-03-27T10:43:14Z

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx

+			// Dynamic by nature of this component
+			// eslint-disable-next-line react/button-has-type
+			type={type}
+			disabled={disabled}


disabled={disabled || loading}

pointer-events: none are not disabling the element in case of enter\space selection

The issue is, the designs show loading state in "normal" colors. Any idea how to go around it?

vpolessky-dn · 2026-03-27T10:43:52Z

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx

+			data-color={color}
+			data-on-dark={onDark ? 'true' : undefined}
+			data-variant={variant}
+			data-selected={selected ? 'true' : undefined}


data-selected is invisible to screen readers - toggle buttons should use aria-pressed

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx

vpolessky-dn · 2026-03-27T10:53:16Z

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.module.scss

+	}
+}
+
+.root[data-color='default'][data-variant='primary'] {


Mixin usage here looks reasonable to reduce boilerplate parts

@mixin button-variant($bg, $hover-bg, $active-bg, $text, $border) { background-color: $bg; color: $text; border-color: $border; &:hover:not(:disabled):not(:active):not([data-selected='true']) { background-color: $hover-bg; } }

To be fair, I would prefer going explicit. Easier to debug and adjust 🤔

vpolessky-dn · 2026-03-27T10:54:52Z

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.types.ts

+	ref?: Ref<HTMLButtonElement>;
+	className?: string;
+	style?: CSSProperties;
+	children?: ReactNode;


className, style, children are already in ButtonHTMLAttributes

vpolessky-dn · 2026-03-27T11:33:31Z

...ystem/src/components/ds-button/versions/ds-button-v3/__tests__/ds-button-v3.browser.test.tsx

+import { DsButtonV3 } from '..';
+import styles from '../ds-button-v3.module.scss';
+
+describe('DsButtonV3', () => {


No tests for:
disabled + loading combined
selected + disabled combined
onDark + color="negative" interaction

github-actions bot added the design-system label Mar 25, 2026

mmurawski-dn force-pushed the drivenets/michal/AR-52648-ds-button-v3 branch from 9f7790d to 5238a39 Compare March 25, 2026 12:42

mmurawski-dn added the skip changelog label Mar 25, 2026

iromanchuk-dn reviewed Mar 26, 2026

View reviewed changes

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.types.ts Show resolved Hide resolved

iromanchuk-dn reviewed Mar 26, 2026

View reviewed changes

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx Show resolved Hide resolved

mmurawski-dn changed the base branch from main to next March 26, 2026 12:28

mmurawski-dn changed the title ~~[DO NOT MERGE] feat(design-system): add DsButton v1.3 [AR-52648]~~ feat(design-system): add DsButton v1.3 [AR-52648] Mar 26, 2026

StyleShit removed the skip changelog label Mar 26, 2026

StyleShit changed the title ~~feat(design-system): add DsButton v1.3 [AR-52648]~~ feat(design-system)!: add DsButton v1.3 [AR-52648] Mar 26, 2026

mmurawski-dn force-pushed the drivenets/michal/AR-52648-ds-button-v3 branch from ebb606f to 8afa833 Compare March 26, 2026 12:38

mmurawski-dn and others added 4 commits March 26, 2026 13:44

chore: improve patters and review rules [AR-52647]

f5fe9ce

mmurawski-dn force-pushed the drivenets/michal/AR-52648-ds-button-v3 branch from 8afa833 to 2a99d3d Compare March 26, 2026 13:49

vpolessky-dn and others added 2 commits March 26, 2026 15:44

feat(design-system): fix file prototype loss in file upload [AR-52304] (

ba7fb97

drivenets#275) Co-authored-by: Evyatar Daud <32631382+StyleShit@users.noreply.github.com>

iromanchuk-dn previously approved these changes Mar 26, 2026

View reviewed changes

iromanchuk-dn self-requested a review March 26, 2026 15:28

mmurawski-dn dismissed iromanchuk-dn’s stale review via 310d33e March 27, 2026 10:06

vpolessky-dn reviewed Mar 27, 2026

View reviewed changes

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx Outdated Show resolved Hide resolved

mmurawski-dn added 2 commits March 27, 2026 11:48

feat(design-system)!: add DsButton v1.3 [AR-52648]

ef4ee1f

<img width="1090" height="927" alt="image" src="https://github.com/user-attachments/assets/c26b0caa-e86b-4cd8-aebe-1e65c45a699c" />

Remove 'selected' prop comment, not needed

bfb37d4

vpolessky-dn reviewed Mar 27, 2026

View reviewed changes

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx Show resolved Hide resolved

vpolessky-dn reviewed Mar 27, 2026

View reviewed changes

CR changes v2

64c5abd

mmurawski-dn force-pushed the drivenets/michal/AR-52648-ds-button-v3 branch from 310d33e to 64c5abd Compare March 27, 2026 12:10

github-actions bot added tooling eslint-plugin cursor PR that changes cursor rules, skills, etc. labels Mar 27, 2026

CR changes v3

d4fddba

Conversation

mmurawski-dn commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

vpolessky-dn Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mmurawski-dn commented Mar 25, 2026 •

edited

Loading

vpolessky-dn Mar 27, 2026 •

edited

Loading