feat(icon): change normal to m

channel-io · Feb 13, 2024 · 297b174 · 297b174
1 parent 8dd616d
commit 297b174
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 19 deletions.
diff --git a/.changeset/gold-gorillas-shout.md b/.changeset/gold-gorillas-shout.md
@@ -22,4 +22,4 @@ The properties that change are:
 
 Also, `SpinnerThickness` props of `Spinner` is not supported any more.
 
-When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `TooltipPosition.TopCenter` -> `top-center`. Among the above enums, `TextAreaHeight` is converted to number literal type. e.g. `TextAreaHeight.Row16` -> `16`
+When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `TooltipPosition.TopCenter` -> `top-center`. Among the above enums, `TextAreaHeight` is converted to number literal type. e.g. `TextAreaHeight.Row16` -> `16`, and `IconSize.normal` is converted to `m` for consistency
diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts
@@ -226,7 +226,7 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = {
   IconSize: {
     XL: 'xl',
     L: 'l',
-    Normal: 'normal',
+    Normal: 'm',
     S: 's',
     XS: 'xs',
     XXS: 'xxs',

diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx
@@ -43,7 +43,7 @@ function getIconSize(size: ButtonSize) {
     s: 'xs',
     m: 's',
     l: 's',
-    xl: 'normal',
+    xl: 'm',
   } as const)[size]
 }
 

diff --git a/packages/bezier-react/src/components/Icon/Icon.stories.tsx b/packages/bezier-react/src/components/Icon/Icon.stories.tsx
@@ -58,7 +58,7 @@ export default meta
 export const Playground: StoryObj<IconProps> = {
   args: {
     source: ChannelIcon,
-    size: 'normal',
+    size: 'm',
     color: 'bg-black-darker',
   },
 }
@@ -99,7 +99,7 @@ export const AllIcons: StoryObj<Omit<IconProps, 'source'>> = {
   ),
 
   args: {
-    size: 'normal',
+    size: 'm',
     color: 'bg-black-darkest',
   },
 }
@@ -168,7 +168,7 @@ export const Overview: StoryFn<{}> = () => (
           'xxs',
           'xs',
           's',
-          'normal',
+          'm',
           'l',
           'xl',
         ] as const).map((size) => (
@@ -222,19 +222,19 @@ export const UsageColor: StoryObj<{}> = {
 export const UsageSize: StoryFn<{}> = () => (
   <LegacyVStack spacing={16}>
     { ([
-      { label: 'XXXS', size: 'xxxs' },
-      { label: 'XXS', size: 'xxs' },
-      { label: 'XS', size: 'xs' },
-      { label: 'S', size: 's' },
-      { label: 'Normal', size: 'normal' },
-      { label: 'L', size: 'l' },
-      { label: 'XL', size: 'xl' },
-    ] as const).map(({ label, size }) => (
+      'xxxs',
+      'xxs',
+      'xs',
+      's',
+      'm',
+      'l',
+      'xl',
+    ] as const).map((size) => (
       <LegacyStackItem key={size}>
         <LegacyHStack spacing={24}>
-          <LegacyStackItem size={100}>
+          <LegacyStackItem size={30}>
             <Text typo="13" color="txt-black-darkest">
-              { `${label} (${size}x${size})` }
+              { size }
             </Text>
           </LegacyStackItem>
           <LegacyStackItem>

diff --git a/packages/bezier-react/src/components/Icon/Icon.tsx b/packages/bezier-react/src/components/Icon/Icon.tsx
@@ -23,7 +23,7 @@ export const ICON_TEST_ID = 'bezier-icon'
 const getSizeValue = (size: IconSize) => ({
   xl: 44,
   l: 36,
-  normal: 24,
+  m: 24,
   s: 20,
   xs: 16,
   xxs: 12,
@@ -39,7 +39,7 @@ export const Icon = memo(forwardRef<SVGSVGElement, IconProps>(function Icon(
 
   const {
     className,
-    size = 'normal',
+    size = 'm',
     color,
     source: SourceElement,
     style,

diff --git a/packages/bezier-react/src/components/Icon/Icon.types.ts b/packages/bezier-react/src/components/Icon/Icon.types.ts
@@ -10,7 +10,7 @@ import {
 export type IconSize =
 | 'xl'
 | 'l'
-| 'normal'
+| 'm'
 | 's'
 | 'xs'
 | 'xxs'