fix: Button fixes (#1122)

Amsterdam · Mar 11, 2024 · b5a9504 · b5a9504
1 parent 4acef4e
commit b5a9504
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 13 deletions.
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -34,10 +34,6 @@
   }
 }
 
-.amsterdam-button--busy {
-  cursor: var(--amsterdam-button-busy-cursor);
-}
-
 .amsterdam-button--primary {
   background-color: var(--amsterdam-button-primary-background-color);
   box-shadow: var(--amsterdam-button-primary-box-shadow);

diff --git a/packages/react/src/Button/Button.test.tsx b/packages/react/src/Button/Button.test.tsx
@@ -15,6 +15,16 @@ describe('Button', () => {
     expect(button).toBeVisible()
   })
 
+  it('renders an additional class name', () => {
+    render(<Button className="extra">Click me!</Button>)
+
+    const button = screen.getByRole('button', {
+      name: 'Click me!',
+    })
+
+    expect(button).toHaveClass('amsterdam-button extra')
+  })
+
   it('renders a default button with variant primary', () => {
     render(<Button>primary</Button>)
 

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
@@ -9,23 +9,20 @@ import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'reac
 
 export type ButtonProps = {
   variant?: 'primary' | 'secondary' | 'tertiary'
-  /** Render the button in a busy state to indicate something has to finish loading */
-  busy?: boolean
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>
 
 export const Button = forwardRef(
   (
-    { children, type, disabled, busy, variant = 'primary', ...restProps }: ButtonProps,
+    { children, className, type, disabled, variant = 'primary', ...restProps }: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
     return (
       <button
         {...restProps}
         ref={ref}
         disabled={disabled}
-        className={clsx('amsterdam-button', busy === true && 'amsterdam-button--busy', `amsterdam-button--${variant}`)}
+        className={clsx('amsterdam-button', `amsterdam-button--${variant}`, className)}
         type={type || 'button'}
-        aria-busy={busy || undefined}
       >
         {children}
       </button>

diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -9,9 +9,6 @@
       "padding-block": { "value": "{amsterdam.space.inside.xs}" },
       "padding-inline": { "value": "{amsterdam.space.inside.md}" },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "busy": {
-        "cursor": { "value": "{amsterdam.action.busy.cursor}" }
-      },
       "disabled": {
         "cursor": { "value": "{amsterdam.action.disabled.cursor}" }
       },

diff --git a/storybook/src/components/Button/Button.stories.tsx b/storybook/src/components/Button/Button.stories.tsx
@@ -14,7 +14,6 @@ const meta = {
     children: 'Button label',
     variant: 'primary',
     disabled: false,
-    busy: false,
   },
   argTypes: {
     children: {