Change hideLabel to iconOnly

Amsterdam · Oct 25, 2024 · 14e77ab · 14e77ab
1 parent c5d5a0c
commit 14e77ab
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 33 deletions.
diff --git 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
@@ -146,7 +146,7 @@ describe('Button', () => {
 
   it('renders a button with an icon only', () => {
     render(
-      <Button hideLabel icon={CloseIcon} variant="tertiary">
+      <Button icon={CloseIcon} iconOnly variant="tertiary">
         Sluiten
       </Button>,
     )

diff --git 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,30 +32,20 @@ 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<HTMLButtonElement>,
   ) => {
     return (
       <button
         {...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 svg={icon} size="level-5" square={hideLabel} />}
-        {icon && hideLabel ? <span className="ams-visually-hidden">{children}</span> : children}
-        {icon && !iconBefore && !hideLabel && <Icon svg={icon} size="level-5" />}
+        {icon && (iconBefore || iconOnly) && <Icon svg={icon} size="level-5" square={iconOnly} />}
+        {icon && iconOnly ? <span className="ams-visually-hidden">{children}</span> : children}
+        {icon && !iconBefore && !iconOnly && <Icon svg={icon} size="level-5" />}
       </button>
     )
   },

diff --git 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
@@ -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<typeof Button>
 
@@ -85,8 +85,8 @@ export const WithiconBefore: Story = {
 export const WithIconOnly: Story = {
   args: {
     children: 'Sluiten',
-    hideLabel: true,
     icon: Icons.CloseIcon,
+    iconOnly: true,
     variant: 'tertiary',
   },
 }