From 77ce6fe2bb4faddd307fa6286207a7cfbdbaebe4 Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Fri, 13 Sep 2024 11:37:51 +0200
Subject: [PATCH] Add IconButton component

---
 packages/ui/src/components/Button/Button.tsx    |  4 +++-
 .../ui/src/components/Button/IconButton.tsx     | 17 +++++++++++++++++
 packages/ui/src/index.ts                        |  2 ++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/Button/IconButton.tsx

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 940f5c73ad..8090ab9611 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -23,6 +23,7 @@ type BaseProps = {
   loading?: boolean
   Icon?: ReactNode
   iconPosition?: 'left' | 'right'
+  isIconButton?: boolean
 }
 
 export type ButtonProps<C extends React.ElementType> = PolymorphicComponentPropsWithRef<
@@ -51,6 +52,7 @@ export const Button: PolymorphicComponent = forwardRef(function Button<
     children,
     Icon,
     iconPosition = 'left',
+    isIconButton,
     ...props
   }: ButtonProps<C>,
   ref?: PolymorphicRef<C>,
@@ -83,7 +85,7 @@ export const Button: PolymorphicComponent = forwardRef(function Button<
     >
       <span className={childrenWrapper} style={{ opacity: loading ? 0 : 1 }}>
         {iconPosition === 'left' && Icon}
-        {children && <span className={textWrapper}>{children}</span>}
+        {children && <span className={clsx(!isIconButton && 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
new file mode 100644
index 0000000000..405d76d30e
--- /dev/null
+++ b/packages/ui/src/components/Button/IconButton.tsx
@@ -0,0 +1,17 @@
+import { type ComponentProps, forwardRef } from 'react'
+import { Button } from './Button'
+
+type ButtonProps = Omit<ComponentProps<typeof Button<'button'>>, 'size'>
+
+export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => (
+  <Button
+    variant="ghost"
+    size="small"
+    style={{ padding: '0', aspectRatio: '1', height: 'auto' }}
+    {...props}
+    isIconButton
+    ref={forwardedRef}
+  />
+))
+
+IconButton.displayName = 'IconButton'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index dd0faa9ca7..e09e291da6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -4,6 +4,8 @@ export { HedvigLogo } from './components/HedvigLogo/HedvigLogo'
 export { HedvigSymbol } from './components/HedvigSymbol/HedvigSymbol'
 export { Space } from './components/Space'
 export { Button, type ButtonProps } from './components/Button/Button'
+export { IconButton } from './components/Button/IconButton'
+
 export { InputBase } from './components/InputBase'
 export type { InputBaseProps } from './components/InputBase'
 export { Heading } from './components/Heading/Heading'