feat(icon-button): use AlphaIcon instead of Icon

channel-io · Dec 23, 2024 · 3f3ef73 · 3f3ef73
1 parent 9cfbee0
commit 3f3ef73
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 28 deletions.
diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss
@@ -1,43 +1,39 @@
 @use '../../styles/mixins/dimension';
 
-@use '../Icon/Icon.module';
-
 $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
 .IconButton {
+  --b-icon-button-padding: initial;
+
   position: relative;
   box-sizing: border-box;
+  padding: var(--b-icon-button-padding);
   transition: background-color var(--transition-s);
 
   /* dimension */
   &:where(.size-xs) {
+    --b-icon-button-padding: 2px;
     @include dimension.square(20px);
-
-    padding: 2px;
   }
 
   &:where(.size-s) {
+    --b-icon-button-padding: 4px;
     @include dimension.square(24px);
-
-    padding: 4px;
   }
 
   &:where(.size-m) {
+    --b-icon-button-padding: 8px;
     @include dimension.square(36px);
-
-    padding: 8px;
   }
 
   &:where(.size-l) {
+    --b-icon-button-padding: 12px;
     @include dimension.square(44px);
-
-    padding: 12px;
   }
 
   &:where(.size-xl) {
+    --b-icon-button-padding: 15px;
     @include dimension.square(54px);
-
-    padding: 15px;
   }
 
   /* background-color */
@@ -265,18 +261,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
   & :where(.ButtonLoader) {
     position: absolute;
-    inset: 0;
+    top: var(--b-icon-button-padding);
+    left: var(--b-icon-button-padding);
 
     display: flex;
     align-items: center;
     justify-content: center;
 
-    @each $size, $value in Icon.$size-map {
-      &:where(.size-#{$size}) {
-        & :is(.Loader) {
-          @include dimension.square(#{$value}px);
-        }
-      }
+    & :is(.Loader) {
+      width: inherit;
+      height: inherit;
     }
   }
 }
diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
@@ -5,22 +5,24 @@ import { forwardRef } from 'react'
 import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
+import { getSourceSizeClassName } from '~/src/types/alpha-props-helpers'
+
+import { AlphaIcon } from '~/src/components/AlphaIcon'
 import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'
 import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { BaseButton } from '~/src/components/BaseButton'
 import { type ButtonSize } from '~/src/components/Button'
-import { Icon } from '~/src/components/Icon'
 
 import styles from './IconButton.module.scss'
 
 function getIconSize(size: ButtonSize) {
   return (
     {
-      xs: 'xs',
-      s: 'xs',
-      m: 's',
-      l: 's',
-      xl: 'm',
+      xs: '16',
+      s: '16',
+      m: '20',
+      l: '20',
+      xl: '24',
     } as const
   )[size]
 }
@@ -68,7 +70,7 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
           )}
         >
           {isBezierIcon(content) ? (
-            <Icon
+            <AlphaIcon
               size={getIconSize(size)}
               source={content}
               className={styles.ButtonIcon}
@@ -82,8 +84,7 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
           <div
             className={classNames(
               styles.ButtonLoader,
-              // NOTE: Loader size is the same as icon size
-              styles[`size-${getIconSize(size)}`]
+              getSourceSizeClassName(getIconSize(size))
             )}
           >
             <AlphaLoader