feat(design-system): add highEmphasis prop to DsButtonV3 [AR-77572]

.changeset/tidy-buttons-round.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+Add `highEmphasis` prop to `DsButtonV3`.

CONTEXT.md

@@ -12,6 +12,10 @@ _Avoid_: widget, element (unless HTML element), control (unless form field)
 A named visual or behavioral axis on a **Component**, backed by an `as const` array and union type in `*.types.ts`.
 _Avoid_: mode, type (when meaning visual style), theme
 
+**High-emphasis**:
+A boolean shape axis on `DsButtonV3` that raises corner radius for prominent surfaces (Sign in, Landing, NetGen). Purely rounding — not a priority/emphasis level (do not conflate with the `primary` **Variant**, which is the "highest-emphasis" action).
+_Avoid_: rounded, pill
+
 **Locale**:
 Optional prop bag of user-facing strings for a **Component**; keys name the UI role (e.g. `loading`, `noMatches`). Use a dedicated `Ds{Name}Locale` interface when there are many keys.
 _Avoid_: i18n, translations (this repo does not ship a global i18n framework)

packages/design-system/src/components/ds-button-v3/__tests__/__snapshots__/ds-button-v3.docs.snap

@@ -93,6 +93,23 @@ const IconOnly = () => <DsButtonV3
 ### MCP manifest
 const Selected = () => <DsButtonV3 onClick={fn()} variant="secondary" selected />;
 
+## High Emphasis
+
+### Show code
+<DsButtonV3
+  color="default"
+  highEmphasis
+  icon="check_circle"
+  onClick={() => {}}
+  size="medium"
+  variant="primary"
+>
+  Button
+</DsButtonV3>
+
+### MCP manifest
+const HighEmphasis = () => <DsButtonV3 onClick={fn()} variant="primary" highEmphasis />;
+
 ## On Dark
 
 ### Show code

packages/design-system/src/components/ds-button-v3/__tests__/ds-button-v3.browser.test.tsx

@@ -39,6 +39,22 @@ describe('DsButtonV3', () => {
 		await expect.element(button).toHaveAttribute('data-selected', 'true');
 	});
 
+	it('applies data-high-emphasis when highEmphasis is set', async () => {
+		await page.render(<DsButtonV3 highEmphasis>Label</DsButtonV3>);
+
+		const button = page.getByRole('button', { name: 'Label' });
+
+		await expect.element(button).toHaveAttribute('data-high-emphasis', 'true');
+	});
+
+	it('omits data-high-emphasis by default', async () => {
+		await page.render(<DsButtonV3>Label</DsButtonV3>);
+
+		const button = page.getByRole('button', { name: 'Label' });
+
+		await expect.element(button).not.toHaveAttribute('data-high-emphasis');
+	});
+
 	it('sets data-color for error palette', async () => {
 		await page.render(<DsButtonV3 color="error">Delete</DsButtonV3>);
 

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

@@ -3,7 +3,8 @@
 $height-large: 40px;
 $height-medium: 36px;
 $height-small: 28px;
-$border-radius: 4px;
+$border-radius: var(--3xs);
+$border-radius-high-emphasis: var(--sm);
 $focus-ring-width: 2px;
 
 @mixin focus-ring($outer-color) {
@@ -34,6 +35,10 @@ $focus-ring-width: 2px;
 		cursor: not-allowed;
 	}
 
+	&[data-high-emphasis] {
+		border-radius: $border-radius-high-emphasis;
+	}
+
 	&[data-loading] {
 		cursor: default;
 		pointer-events: none;

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

@@ -24,6 +24,7 @@ const meta: Meta<typeof DsButtonV3> = {
 		size: { control: 'select', options: buttonV3Sizes },
 		loading: { control: 'boolean' },
 		disabled: { control: 'boolean' },
+		highEmphasis: { control: 'boolean' },
 		className: { table: { disable: true } },
 		style: { table: { disable: true } },
 		ref: { table: { disable: true } },
@@ -88,6 +89,15 @@ export const Selected: Story = {
 	args: { ...baseArgs, variant: 'secondary', selected: true },
 };
 
+/**
+ * Raised corner radius (12px instead of 4px) for high-emphasis surfaces such as
+ * Sign in, Landing, and NetGen. Only affects rounding — color and priority are
+ * unchanged.
+ */
+export const HighEmphasis: Story = {
+	args: { ...baseArgs, variant: 'primary', highEmphasis: true },
+};
+
 /**
  * Palette tuned for dark-background surfaces. Use when the button sits on a dark
  * container rather than the default light UI.

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

@@ -29,6 +29,7 @@ const DsButtonV3 = ({
 	variant = 'primary',
 	size = 'medium',
 	selected = false,
+	highEmphasis = false,
 	type = 'button',
 	...rest
 }: DsButtonV3BaseProps) => {
@@ -48,6 +49,7 @@ const DsButtonV3 = ({
 			data-variant={variant}
 			data-size={size}
 			data-selected={selected ? 'true' : undefined}
+			data-high-emphasis={highEmphasis ? 'true' : undefined}
 			data-icon-only={isIconOnly || undefined}
 			data-loading={loading && !disabled ? '' : undefined}
 			{...rest}

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

@@ -45,6 +45,14 @@ export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElem
 	 */
 	selected?: boolean;
 
+	/**
+	 * Raises the corner radius for high-emphasis surfaces such as
+	 * Sign in, Landing, and NetGen. Purely a rounding change — does not affect
+	 * color or priority.
+	 * @default false
+	 */
+	highEmphasis?: boolean;
+
 	/**
 	 * Leading icon. When set without children, renders as icon-only (square) layout.
 	 */

packages/design-system/src/components/ds-button-v3/ds-button-v4.figma.ts

@@ -45,6 +45,9 @@ const size =
 const iconOnly =
 	structure.type === 'INSTANCE' ? structure.getEnum('icon-only', { True: true, False: false }) : false;
 
+const highEmphasis =
+	structure.type === 'INSTANCE' ? structure.getEnum('high-emphasis', { true: true, false: false }) : false;
+
 const showIcon = structure.type === 'INSTANCE' ? structure.getBoolean('isIconBefore') : false;
 
 // `DsButtonV3.icon` is an icon-name string. Swapped icons keep the placeholder layer
@@ -104,13 +107,14 @@ const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Button';
 const iconProp = icon ? figma.code` icon="${icon}"` : '';
 const disabledProp = disabled ? ' disabled' : '';
 const loadingProp = loading ? ' loading' : '';
+const highEmphasisProp = highEmphasis ? ' highEmphasis' : '';
 
 export default {
 	example: iconOnly
-		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${iconProp} aria-label="${label}" />`
+		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp}${iconProp} aria-label="${label}" />`
 		: showIcon && icon
-			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp} icon="${icon}">${label}</DsButtonV3>`
-			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}>${label}</DsButtonV3>`,
+			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp} icon="${icon}">${label}</DsButtonV3>`
+			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp}>${label}</DsButtonV3>`,
 	imports: ["import { DsButtonV3 } from '@drivenets/design-system';"],
 	id: 'ds-button-v4',
 	metadata: { nestable: true },