diff --git a/.changeset/kind-facts-pick.md b/.changeset/kind-facts-pick.md new file mode 100644 index 00000000..7682ec5e --- /dev/null +++ b/.changeset/kind-facts-pick.md @@ -0,0 +1,5 @@ +--- +'@drivenets/design-system': patch +--- + +Make `DsButtonV3` `size` prop responsive diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss index 9bf55707..8db72cb1 100644 --- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss +++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss @@ -83,3 +83,9 @@ .onDarkColumnHeader { color: var(--secondary-300); } + +.responsiveRow { + display: flex; + align-items: center; + gap: var(--sm); +} diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx index 5b830ff7..597bd0ca 100644 --- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx +++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import classNames from 'classnames'; import { fn } from 'storybook/test'; import DsButtonV3 from './ds-button-v3'; +import { DsButtonV3 as DsButtonV3Wrapped } from './index'; import { type ButtonV3Color, buttonV3Colors, @@ -231,3 +232,22 @@ export const MatrixIcons: Story = { ), }; + +export const ResponsiveSize: Story = { + parameters: { layout: 'centered' }, + render: () => ( +
+ + lg: large / md: small + + + + lg: medium / md: tiny + + + + static: medium + +
+ ), +}; diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx b/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx index 834ba23f..de8951c4 100644 --- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx +++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { DsIcon, type IconSize } from '../ds-icon'; import { DsSpinner } from '../ds-spinner'; import styles from './ds-button-v3.module.scss'; -import type { ButtonV3Size, DsButtonV3Props } from './ds-button-v3.types.ts'; +import type { ButtonV3Size, DsButtonV3BaseProps } from './ds-button-v3.types.ts'; const iconSizeMap: Record = Object.freeze({ large: 'small', @@ -25,7 +25,7 @@ const DsButtonV3 = ({ selected = false, type = 'button', ...rest -}: DsButtonV3Props) => { +}: DsButtonV3BaseProps) => { const isIconOnly = icon !== undefined && !children; return ( diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts b/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts index 47a54711..8907e561 100644 --- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts +++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts @@ -1,5 +1,6 @@ import type { ButtonHTMLAttributes, Ref } from 'react'; import type { IconType } from '../ds-icon'; +import type { ResponsiveValue } from '../../utils/responsive'; export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const; export type ButtonV3Variant = (typeof buttonV3Variants)[number]; @@ -10,7 +11,7 @@ export type ButtonV3Color = (typeof buttonV3Colors)[number]; export const buttonV3Sizes = ['large', 'medium', 'small', 'tiny'] as const; export type ButtonV3Size = (typeof buttonV3Sizes)[number]; -export interface DsButtonV3Props extends ButtonHTMLAttributes { +export interface DsButtonV3BaseProps extends ButtonHTMLAttributes { ref?: Ref; /** @@ -47,3 +48,11 @@ export interface DsButtonV3Props extends ButtonHTMLAttributes */ loading?: boolean; } + +export interface DsButtonV3Props extends Omit { + /** + * Size of the button. Accepts a static value or a responsive object. + * @default 'medium' + */ + size?: ResponsiveValue; +} diff --git a/packages/design-system/src/components/ds-button-v3/index.ts b/packages/design-system/src/components/ds-button-v3/index.ts index 76dd2de1..780edd3f 100644 --- a/packages/design-system/src/components/ds-button-v3/index.ts +++ b/packages/design-system/src/components/ds-button-v3/index.ts @@ -1,2 +1,6 @@ -export { default as DsButtonV3 } from './ds-button-v3'; +import { withResponsiveProps } from '../../utils/responsive'; +import DsButtonV3Base from './ds-button-v3'; + +export const DsButtonV3 = withResponsiveProps(DsButtonV3Base, ['size']); + export * from './ds-button-v3.types';