Fix(avatar): font size

.changeset/healthy-berries-lie.md

@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+---
+
+Fix(avatar): fallback font size を修正しました．これに伴い，size プロパティで指定可能な値を`"md" | "lg" | "xl" | "xl2" | "xl3" | "xl4"` のみに限定しました．

packages/wiz-ui-next/src/components/base/avatar/avatar.stories.ts

@@ -1,8 +1,5 @@
-import { StoryFn, Meta } from "@storybook/vue3";
-import {
-  COLOR_MAP_ACCESSORS,
-  SPACING_ACCESSORS,
-} from "@wizleap-inc/wiz-ui-constants";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { COLOR_MAP_ACCESSORS } from "@wizleap-inc/wiz-ui-constants";
 
 import { WizAvatar } from ".";
 
@@ -15,7 +12,7 @@ export default {
     },
     size: {
       control: { type: "select" },
-      options: SPACING_ACCESSORS,
+      options: ["md", "lg", "xl", "xl2", "xl3", "xl4"],
     },
     color: {
       control: { type: "select" },

packages/wiz-ui-next/src/components/base/avatar/avatar.vue

@@ -3,6 +3,7 @@
     :class="[
       avatarStyle,
       sizeStyle[size],
+
       colorStyle[fontColor],
       clickable && avatarClickableStyle,
     ]"
@@ -18,7 +19,7 @@
     />
     <div
       v-else
-      :class="[avatarFallbackStyle]"
+      :class="[avatarFallbackStyle, fontSizeStyle[fontSizeMap[size]]]"
       :style="{
         background: avatarBgColor,
       }"
@@ -30,20 +31,25 @@
 
 <script setup lang="ts">
 import {
-  getColorCss,
-  ComponentName,
   ColorKeys,
+  ComponentName,
+  FontSizeKeys,
   SpacingKeys,
   THEME,
+  getColorCss,
 } from "@wizleap-inc/wiz-ui-constants";
 import {
-  avatarStyle,
-  avatarImageStyle,
-  avatarFallbackStyle,
   avatarClickableStyle,
+  avatarFallbackStyle,
+  avatarImageStyle,
+  avatarStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/avatar.css";
-import { sizeStyle, colorStyle } from "@wizleap-inc/wiz-ui-styles/commons";
-import { ref, PropType, computed } from "vue";
+import {
+  colorStyle,
+  fontSizeStyle,
+  sizeStyle,
+} from "@wizleap-inc/wiz-ui-styles/commons";
+import { PropType, computed, ref } from "vue";
 
 defineOptions({
   name: ComponentName.Anchor,
@@ -63,7 +69,9 @@ const props = defineProps({
     required: true,
   },
   size: {
-    type: String as PropType<SpacingKeys>,
+    type: String as PropType<
+      Extract<SpacingKeys, "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4">
+    >,
     required: false,
     default: "xl3",
   },
@@ -131,4 +139,16 @@ const fontColor = computed(() => {
   }
   return "white.800";
 });
+
+const fontSizeMap: Record<
+  Extract<SpacingKeys, "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4">,
+  Extract<FontSizeKeys, "xs2" | "xs" | "sm" | "md" | "lg">
+> = {
+  md: "xs2",
+  lg: "xs2",
+  xl: "xs",
+  xl2: "sm",
+  xl3: "md",
+  xl4: "lg",
+};
 </script>

packages/wiz-ui-react/src/components/base/avatar/components/avatar.tsx

@@ -1,12 +1,17 @@
 import {
   ColorKeys,
   ComponentName,
+  FontSizeKeys,
   SpacingKeys,
   THEME,
   getColorCss,
 } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/avatar.css";
-import { colorStyle, sizeStyle } from "@wizleap-inc/wiz-ui-styles/commons";
+import {
+  colorStyle,
+  fontSizeStyle,
+  sizeStyle,
+} from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
 import {
   ComponentProps,
@@ -20,7 +25,7 @@ import { BaseProps } from "@/types";
 type Props = BaseProps & {
   src?: string;
   name?: string;
-  size?: SpacingKeys;
+  size?: Extract<SpacingKeys, "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4">;
   color?: ColorKeys;
   bgColor?: ColorKeys;
   alt?: string;
@@ -76,6 +81,18 @@ const Avatar = forwardRef(
       return `hsl(${extractHue}, 50%, 48%)`;
     }, [bgColor, name]);
 
+    const fontSizeMap: Record<
+      Extract<SpacingKeys, "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4">,
+      Extract<FontSizeKeys, "xs2" | "xs" | "sm" | "md" | "lg">
+    > = {
+      md: "xs2",
+      lg: "xs2",
+      xl: "xs",
+      xl2: "sm",
+      xl3: "md",
+      xl4: "lg",
+    };
+
     return (
       <div
         ref={ref}
@@ -110,7 +127,10 @@ const Avatar = forwardRef(
           />
         ) : (
           <div
-            className={clsx(styles.avatarFallbackStyle)}
+            className={clsx(
+              styles.avatarFallbackStyle,
+              fontSizeStyle[fontSizeMap[size]]
+            )}
             style={{
               background: avatarBgColor,
             }}

packages/wiz-ui-react/src/components/base/avatar/stories/avatar.stories.tsx

@@ -1,46 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
-import {
-  COLOR_MAP_ACCESSORS,
-  SPACING_ACCESSORS,
-} from "@wizleap-inc/wiz-ui-constants";
 
 import { WizAvatar } from "../components/avatar";
 
 const meta: Meta<typeof WizAvatar> = {
   title: "Base/Avatar",
   component: WizAvatar,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: SPACING_ACCESSORS,
-    },
-    color: {
-      control: { type: "select" },
-      options: COLOR_MAP_ACCESSORS,
-    },
-    bgColor: {
-      control: { type: "select" },
-      options: COLOR_MAP_ACCESSORS,
-    },
-    src: {
-      control: { type: "text" },
-    },
-    alt: {
-      control: { type: "text" },
-    },
-    name: {
-      control: { type: "text" },
-    },
-    fallback: {
-      control: { type: "text" },
-    },
-    clickable: {
-      control: { type: "boolean" },
-    },
-    onClick: {
-      action: "onClick",
-    },
-  },
 };
 
 export default meta;