Update IconButton implementation

HedvigInsurance · Sep 18, 2024 · 45452d5 · 45452d5
1 parent ea81910
commit 45452d5
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/packages/ui/src/components/Button/Button.css.ts b/packages/ui/src/components/Button/Button.css.ts
@@ -197,13 +197,18 @@ const SIZE_STYLES = {
     textAlign: 'center',
     borderRadius: tokens.radius.md,
   },
+  icon: {
+    borderRadius: tokens.radius.xxs,
+    padding: tokens.space.xxxs,
+  },
 } as const
 
 export const buttonSizeStyles = {
   base: {
     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
@@ -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
@@ -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
@@ -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
@@ -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'