Move IconButton specific styles to a classname

HedvigInsurance · Sep 19, 2024 · 96e7c59 · 96e7c59
1 parent 4b963d0
commit 96e7c59
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/ui/src/components/Button/Button.css.ts b/packages/ui/src/components/Button/Button.css.ts
@@ -234,6 +234,8 @@ export const buttonSizeStyles = {
   },
 }
 
+export const iconButtonStyles = style({ aspectRatio: '1', height: 'auto' })
+
 export const childrenWrapper = style({
   display: 'flex',
   alignItems: 'center',

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
@@ -83,7 +83,7 @@ export const Button: PolymorphicComponent = forwardRef(function Button<
     >
       <span className={childrenWrapper} style={{ opacity: loading ? 0 : 1 }}>
         {iconPosition === 'left' && Icon}
-        {children && <span className={clsx(textWrapper)}>{children}</span>}
+        {children && <span className={textWrapper}>{children}</span>}
         {iconPosition === 'right' && Icon}
       </span>
       {hiddenText && hiddenText}

diff --git a/packages/ui/src/components/Button/IconButton.tsx b/packages/ui/src/components/Button/IconButton.tsx
@@ -1,14 +1,16 @@
+import clsx from 'clsx'
 import { type ComponentProps, forwardRef } from 'react'
 import { Button } from './Button'
+import { iconButtonStyles } from './Button.css'
 
 type ButtonProps = ComponentProps<typeof Button<'button'>>
 
 export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, ...props }, forwardedRef) => (
+  ({ className, children, ...props }, forwardedRef) => (
     <Button
+      className={clsx(iconButtonStyles, className)}
       variant="ghost"
       size="icon"
-      style={{ aspectRatio: '1', height: 'auto' }}
       Icon={children}
       {...props}
       ref={forwardedRef}