diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss index 56674277eb..baf5276da5 100644 --- a/packages/css/src/components/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -96,7 +96,7 @@ } } -.ams-button--hide-label { - padding-block: var(--ams-button-hide-label-padding-block); - padding-inline: var(--ams-button-hide-label-padding-inline); +.ams-button--icon-only { + padding-block: var(--ams-button-icon-only-padding-block); + padding-inline: var(--ams-button-icon-only-padding-inline); } diff --git a/packages/react/src/Button/Button.test.tsx b/packages/react/src/Button/Button.test.tsx index 49ed20a9db..50413e5e34 100644 --- a/packages/react/src/Button/Button.test.tsx +++ b/packages/react/src/Button/Button.test.tsx @@ -146,7 +146,7 @@ describe('Button', () => { it('renders a button with an icon only', () => { render( - , ) diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx index 1ceac49675..7e1cff3c07 100644 --- a/packages/react/src/Button/Button.tsx +++ b/packages/react/src/Button/Button.tsx @@ -10,18 +10,18 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' type IconButtonProps = { - /** Leaves only the icon visible in the button. Requires the `icon` prop to be set. */ - hideLabel?: boolean /** An icon to add to the button. */ icon: IconProps['svg'] /** Position the icon before the label. After is the default. Requires the `icon` prop to be set. */ iconBefore?: boolean + /** Leaves only the icon visible in the button. Requires the `icon` prop to be set. */ + iconOnly?: boolean } type TextButtonProps = { - hideLabel?: never icon?: never iconBefore?: never + iconOnly?: never } export type ButtonProps = { @@ -32,17 +32,7 @@ export type ButtonProps = { export const Button = forwardRef( ( - { - children, - className, - disabled, - icon, - iconBefore, - hideLabel, - type, - variant = 'primary', - ...restProps - }: ButtonProps, + { children, className, disabled, icon, iconBefore, iconOnly, type, variant = 'primary', ...restProps }: ButtonProps, ref: ForwardedRef, ) => { return ( @@ -50,12 +40,12 @@ export const Button = forwardRef( {...restProps} ref={ref} disabled={disabled} - className={clsx('ams-button', `ams-button--${variant}`, hideLabel && `ams-button--hide-label`, className)} + className={clsx('ams-button', `ams-button--${variant}`, iconOnly && `ams-button--icon-only`, className)} type={type || 'button'} > - {icon && (iconBefore || hideLabel) && } - {icon && hideLabel ? {children} : children} - {icon && !iconBefore && !hideLabel && } + {icon && (iconBefore || iconOnly) && } + {icon && iconOnly ? {children} : children} + {icon && !iconBefore && !iconOnly && } ) }, diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json index 53e5f2ee58..fc23bdf712 100644 --- a/proprietary/tokens/src/components/ams/button.tokens.json +++ b/proprietary/tokens/src/components/ams/button.tokens.json @@ -57,7 +57,7 @@ "color": { "value": "{ams.color.neutral-grey2}" } } }, - "hide-label": { + "icon-only": { "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.sm}" } } diff --git a/storybook/src/components/Button/Button.stories.tsx b/storybook/src/components/Button/Button.stories.tsx index b546a47129..b0eff5a908 100644 --- a/storybook/src/components/Button/Button.stories.tsx +++ b/storybook/src/components/Button/Button.stories.tsx @@ -13,21 +13,13 @@ const meta = { args: { children: 'Versturen', disabled: false, - hideLabel: false, + iconOnly: false, variant: 'primary', }, argTypes: { disabled: { description: 'Prevents interaction. Avoid if possible.', }, - hideLabel: { - control: { - type: 'boolean', - }, - if: { - arg: 'icon', - }, - }, icon: { control: { type: 'select', @@ -44,6 +36,14 @@ const meta = { arg: 'icon', }, }, + iconOnly: { + control: { + type: 'boolean', + }, + if: { + arg: 'icon', + }, + }, }, } satisfies Meta @@ -85,8 +85,8 @@ export const WithiconBefore: Story = { export const WithIconOnly: Story = { args: { children: 'Sluiten', - hideLabel: true, icon: Icons.CloseIcon, + iconOnly: true, variant: 'tertiary', }, }