From d51f67f3f1ff37dbbceb3a0ddd023cb90cb5cea3 Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Fri, 13 Sep 2024 11:37:51 +0200
Subject: [PATCH 1/3] 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 179499914a..430e97093d 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -5,6 +5,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'

From 4b963d07a15369ed8803ae8d6860eef2220fc05a Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Tue, 17 Sep 2024 17:08:09 +0200
Subject: [PATCH 2/3] Update IconButton implementation

---
 .../ui/src/components/Button/Button.css.ts    | 10 ++++++++
 .../src/components/Button/Button.helpers.ts   |  2 +-
 .../src/components/Button/Button.stories.tsx  | 14 +++++++++--
 packages/ui/src/components/Button/Button.tsx  |  4 +---
 .../ui/src/components/Button/IconButton.tsx   | 24 ++++++++++---------
 5 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/Button/Button.css.ts b/packages/ui/src/components/Button/Button.css.ts
index 13f35504b4..a0796417c0 100644
--- a/packages/ui/src/components/Button/Button.css.ts
+++ b/packages/ui/src/components/Button/Button.css.ts
@@ -197,6 +197,10 @@ const SIZE_STYLES = {
     textAlign: 'center',
     borderRadius: tokens.radius.md,
   },
+  icon: {
+    borderRadius: tokens.radius.xxs,
+    padding: tokens.space.xxxs,
+  },
 } as const
 
 export const buttonSizeStyles = {
@@ -204,6 +208,7 @@ export const buttonSizeStyles = {
     small: style(SIZE_STYLES.small),
     medium: style(SIZE_STYLES.medium),
     large: style(SIZE_STYLES.large),
+    icon: style(SIZE_STYLES.icon),
   },
   lg: {
     small: style({
@@ -221,6 +226,11 @@ export const buttonSizeStyles = {
         [minWidth.lg]: SIZE_STYLES.large,
       },
     }),
+    icon: style({
+      '@media': {
+        [minWidth.lg]: SIZE_STYLES.icon,
+      },
+    }),
   },
 }
 
diff --git a/packages/ui/src/components/Button/Button.helpers.ts b/packages/ui/src/components/Button/Button.helpers.ts
index 56190ab13e..2d894afc0a 100644
--- a/packages/ui/src/components/Button/Button.helpers.ts
+++ b/packages/ui/src/components/Button/Button.helpers.ts
@@ -1,6 +1,6 @@
 import { buttonSizeStyles } from './Button.css'
 
-type ButtonSizeVariant = 'small' | 'medium' | 'large'
+type ButtonSizeVariant = 'small' | 'medium' | 'large' | 'icon'
 type ButtonLevels = 'base' | 'lg'
 
 export type ButtonSize = ButtonSizeVariant | Record<ButtonLevels, ButtonSizeVariant>
diff --git a/packages/ui/src/components/Button/Button.stories.tsx b/packages/ui/src/components/Button/Button.stories.tsx
index 312d3c7ad4..1b7f75342b 100644
--- a/packages/ui/src/components/Button/Button.stories.tsx
+++ b/packages/ui/src/components/Button/Button.stories.tsx
@@ -1,8 +1,10 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import { CheckIcon, yStack } from 'ui'
+import { type ComponentProps } from 'react'
+import { CheckIcon, CrossIcon, yStack } from 'ui'
 import { Button } from './Button'
+import { IconButton } from './IconButton'
 
-type Controls = typeof Button
+type Controls = ComponentProps<typeof Button>
 
 const meta: Meta<Controls> = {
   title: 'Button',
@@ -109,3 +111,11 @@ export const WithIcon = {
     Icon: <CheckIcon size="18px" />,
   },
 }
+
+export const IconButtonDefault = {
+  render: (args: Controls) => <IconButton variant={args.variant}>{args.Icon}</IconButton>,
+  args: {
+    Icon: <CrossIcon size="18px" />,
+    variant: 'primary',
+  },
+}
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 8090ab9611..e7d1c2ef3a 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -23,7 +23,6 @@ type BaseProps = {
   loading?: boolean
   Icon?: ReactNode
   iconPosition?: 'left' | 'right'
-  isIconButton?: boolean
 }
 
 export type ButtonProps<C extends React.ElementType> = PolymorphicComponentPropsWithRef<
@@ -52,7 +51,6 @@ export const Button: PolymorphicComponent = forwardRef(function Button<
     children,
     Icon,
     iconPosition = 'left',
-    isIconButton,
     ...props
   }: ButtonProps<C>,
   ref?: PolymorphicRef<C>,
@@ -85,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(!isIconButton && textWrapper)}>{children}</span>}
+        {children && <span className={clsx(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 405d76d30e..052cf43802 100644
--- a/packages/ui/src/components/Button/IconButton.tsx
+++ b/packages/ui/src/components/Button/IconButton.tsx
@@ -1,17 +1,19 @@
 import { type ComponentProps, forwardRef } from 'react'
 import { Button } from './Button'
 
-type ButtonProps = Omit<ComponentProps<typeof Button<'button'>>, 'size'>
+type ButtonProps = ComponentProps<typeof Button<'button'>>
 
-export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => (
-  <Button
-    variant="ghost"
-    size="small"
-    style={{ padding: '0', aspectRatio: '1', height: 'auto' }}
-    {...props}
-    isIconButton
-    ref={forwardedRef}
-  />
-))
+export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <Button
+      variant="ghost"
+      size="icon"
+      style={{ aspectRatio: '1', height: 'auto' }}
+      Icon={children}
+      {...props}
+      ref={forwardedRef}
+    />
+  ),
+)
 
 IconButton.displayName = 'IconButton'

From 96e7c592a5b5a43c04bc0a542981683a410566dd Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Wed, 18 Sep 2024 17:08:36 +0200
Subject: [PATCH 3/3] 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}