feat(components): apply the new alpha source size style to related components

Author: sungik-choi

packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss

@@ -1,7 +1,5 @@
 @use '../../styles/mixins/dimension';
 
-$avatar-sizes: 16, 20, 24, 30, 36, 42, 48, 72, 90, 120;
-
 .Avatar {
   position: relative;
   display: block;
@@ -10,12 +8,6 @@ $avatar-sizes: 16, 20, 24, 30, 36, 42, 48, 72, 90, 120;
     pointer-events: none;
     opacity: var(--alpha-opacity-disabled);
   }
-
-  @each $size in $avatar-sizes {
-    &:where(.size-#{$size}) {
-      @include dimension.square(#{$size}px);
-    }
-  }
 }
 
 .AvatarImage {

packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx

@@ -4,6 +4,7 @@ import { forwardRef, isValidElement, useMemo } from 'react'
 
 import classNames from 'classnames'
 
+import { getSourceSizeClassName } from '~/src/types/alpha-props-helpers'
 import { isEmpty } from '~/src/utils/type'
 
 import { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'
@@ -127,11 +128,13 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     )
   }, [status, size, children])
 
+  console.log(getSourceSizeClassName(size))
+
   return (
     <div
       className={classNames(
         styles.Avatar,
-        styles[`size-${size}`],
+        getSourceSizeClassName(size),
         disabled && styles.disabled,
         className
       )}

packages/bezier-react/src/components/AlphaAvatar/Avatar.types.ts

@@ -1,3 +1,4 @@
+import { type SourceSize } from '~/src/types/alpha-tokens'
 import {
   type BezierComponentProps,
   type ChildrenProps,
@@ -8,17 +9,7 @@ import {
 // TODO: Replace this with AlphaStatusBadgeType
 import { type StatusType } from '~/src/components/Status'
 
-export type AvatarSize =
-  | '16'
-  | '20'
-  | '24'
-  | '30'
-  | '36'
-  | '42'
-  | '48'
-  | '72'
-  | '90'
-  | '120'
+export type AvatarSize = SourceSize
 
 interface AvatarOwnProps {
   /**

packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.module.scss

@@ -1,19 +1,10 @@
-@use '../AlphaAvatar/Avatar.module';
-
 .AvatarGroup {
   --b-avatar-group-spacing: 0;
-  --b-avatar-group-size: 0;
 
   position: relative;
   z-index: var(--z-index-base);
   display: flex;
 
-  @each $size in Avatar.$avatar-sizes {
-    &:where(.size-#{$size}) {
-      --b-avatar-group-size: #{$size}px;
-    }
-  }
-
   & > * + * {
     margin-left: var(--b-avatar-group-spacing);
   }
@@ -49,5 +40,5 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: var(--b-avatar-group-size);
+  height: 100%;
 }

packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx

@@ -37,13 +37,16 @@ function getRestAvatarListCountText(count: number, max: number) {
 function getProperIconSize(size: AlphaAvatarSize) {
   return (
     {
+      10: 'xxs',
+      12: 'xxs',
       16: 'xxs',
       20: 'xxs',
       24: 'xs',
       30: 's',
       36: 'm',
       42: 'm',
       48: 'l',
+      60: 'l',
       72: 'l',
       90: 'l',
       120: 'l',
@@ -55,13 +58,16 @@ function getProperIconSize(size: AlphaAvatarSize) {
 function getProperTypoSize(size: AlphaAvatarSize) {
   return (
     {
+      10: '12',
+      12: '12',
       16: '12',
       20: '12',
       24: '13',
       30: '15',
       36: '16',
       42: '18',
       48: '24',
+      60: '24',
       72: '24',
       90: '24',
       120: '24',
@@ -202,11 +208,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
         <div
           role="group"
           ref={forwardedRef}
-          className={classNames(
-            styles.AvatarGroup,
-            styles[`size-${size}`],
-            className
-          )}
+          className={classNames(styles.AvatarGroup, className)}
           style={
             {
               '--b-avatar-group-spacing': px(spacing),

packages/bezier-react/src/components/AlphaIcon/Icon.module.scss

@@ -1,25 +1,7 @@
-@use '../../styles/mixins/dimension';
-
-$size-map: (
-  xxxs: 10,
-  xxs: 12,
-  xs: 16,
-  s: 20,
-  m: 24,
-  l: 36,
-  xl: 44,
-);
-
 .Icon {
   --b-icon-color: initial;
 
   flex: 0 0 auto;
   color: var(--b-icon-color);
   transition: color var(--transition-s);
-
-  @each $size, $value in $size-map {
-    &:where(.size-#{$size}) {
-      @include dimension.square(#{$value}px);
-    }
-  }
 }

packages/bezier-react/src/components/AlphaIcon/Icon.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 
 import classNames from 'classnames'
 
+import { getSourceSizeClassName } from '~/src/types/alpha-props-helpers'
 import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
 import { alphaColorTokenCssVar } from '~/src/utils/style'
 
@@ -21,7 +22,7 @@ export const Icon = memo(
 
     const {
       className,
-      size = 'm',
+      size = '24',
       color,
       source: SourceElement,
       style,
@@ -40,7 +41,7 @@ export const Icon = memo(
         }
         className={classNames(
           styles.Icon,
-          styles[`size-${size}`],
+          getSourceSizeClassName(size),
           marginStyles.className,
           className
         )}

packages/bezier-react/src/components/AlphaIcon/Icon.types.ts

@@ -1,13 +1,17 @@
 import { type BezierIcon } from '@channel.io/bezier-icons'
 
-import type { FunctionalColor, SemanticColor } from '~/src/types/alpha-tokens'
+import type {
+  FunctionalColor,
+  SemanticColor,
+  SourceSize,
+} from '~/src/types/alpha-tokens'
 import {
   type BezierComponentProps,
   type MarginProps,
   type SizeProps,
 } from '~/src/types/props'
 
-export type IconSize = 'xs' | 's' | 'm' | 'l' | 'xl'
+export type IconSize = SourceSize
 
 interface IconOwnProps {
   /**