From c3572201fc8ddbb406f34adf5aac04d45165e8b0 Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Wed, 18 Sep 2024 17:08:36 +0200
Subject: [PATCH] Move IconButton specific styles to a classname

---
 packages/ui/src/components/Button/Button.css.ts  | 2 ++
 packages/ui/src/components/Button/Button.tsx     | 2 +-
 packages/ui/src/components/Button/IconButton.tsx | 6 ++++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/Button/Button.css.ts b/packages/ui/src/components/Button/Button.css.ts
index a0796417c0..89ad939f7f 100644
--- 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
index e7d1c2ef3a..940f5c73ad 100644
--- 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
index 052cf43802..9fdf2cb211 100644
--- 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}