feat: add prefixIcon prop(icon alias)

ubie-oss · Nov 1, 2024 · 5764ae4 · 5764ae4
1 parent 68ff171
commit 5764ae4
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 28 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -14,7 +14,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       variant = 'primary',
       size = 'large',
       block = false,
-      icon: _icon,
+      icon,
+      prefixIcon: _prefixIcon,
       fixedIcon: _fixedIcon,
       suffixIcon: _suffixIcon,
       type = 'button',
@@ -34,7 +35,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const icon = useIcon(_icon, variant);
+    const prefixIcon = useIcon(icon || _prefixIcon, variant);
     const fixedIcon = useIcon(_fixedIcon, variant);
     const suffixIcon = useIcon(_suffixIcon, variant);
     const cls = clsx({
@@ -82,7 +83,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {loading && <span className={styles.loadingLabel}>{loadingLabel}</span>}
         {fixedIcon && <span className={styles.fixedIcon}>{fixedIcon}</span>}
         <span className={styles.label}>
-          {icon && <span className={clsx(styles.icon, loading && styles.loading)}>{icon}</span>}
+          {prefixIcon && <span className={clsx(styles.icon, loading && styles.loading)}>{prefixIcon}</span>}
           <span className={clsx(styles.children, loading && styles.loading)}>{children}</span>
           {suffixIcon && <span className={styles.suffixIcon}>{suffixIcon}</span>}
         </span>

diff --git a/src/components/Button/ButtonTypes.ts b/src/components/Button/ButtonTypes.ts
@@ -33,11 +33,7 @@ export type BaseProps = {
    */
   block?: boolean;
   /**
-   * アイコン
-   */
-  icon?: 'default' | ReactElement | IconName;
-  /**
-   * Fixedアイコン
+   * Fixedアイコンa
    */
   fixedIcon?: 'default' | ReactElement | IconName;
   /**
@@ -48,7 +44,27 @@ export type BaseProps = {
    * ラベルの折り返しを指定
    */
   whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
-} & MarginProps &
+} & (
+  | {
+      /**
+       * アイコン
+       */
+      icon?: 'default' | ReactElement | IconName;
+      prefixIcon?: never;
+    }
+  | {
+      /**
+       * アイコン
+       */
+      prefixIcon?: 'default' | ReactElement | IconName;
+      icon?: never;
+    }
+  | {
+      icon?: never;
+      prefixIcon?: never;
+    }
+) &
+  MarginProps &
   CustomDataAttributeProps;
 
 export type OnlyButtonProps = {

diff --git a/src/components/Button/LinkButton.tsx b/src/components/Button/LinkButton.tsx
@@ -16,7 +16,8 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
       variant = 'primary',
       size = 'large',
       block = false,
-      icon: _icon,
+      icon,
+      prefixIcon: _prefixIcon,
       fixedIcon: _fixedIcon,
       suffixIcon: _suffixIcon,
       whiteSpace = 'normal',
@@ -31,7 +32,7 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
     },
     forwardedRef,
   ) => {
-    const icon = useIcon(_icon, variant);
+    const prefixIcon = useIcon(icon || _prefixIcon, variant);
     const fixedIcon = useIcon(_fixedIcon, variant);
     const suffixIcon = useIcon(_suffixIcon, variant);
     const cls = clsx({
@@ -67,7 +68,7 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
       <>
         {fixedIcon && <span className={styles.fixedIcon}>{fixedIcon}</span>}
         <span className={styles.label}>
-          {icon && <span className={styles.icon}>{icon}</span>}
+          {prefixIcon && <span className={styles.icon}>{prefixIcon}</span>}
           {children}
           {suffixIcon && <span className={styles.suffixIcon}>{suffixIcon}</span>}
         </span>

diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
@@ -52,15 +52,15 @@ export const WithIcon: Story = {
   render: () => (
     <Stack spacing="lg">
       <Stack spacing="lg" as="dl">
-        <dt style={{ fontWeight: 'bold' }}>Default Position</dt>
+        <dt style={{ fontWeight: 'bold' }}>Position Prefix</dt>
         <dd style={{ margin: 0 }}>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
-            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} />
-            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="secondary" />
-            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="accent" />
-            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="alert" />
-            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="text" />
-            <Button icon={<Icon icon="TrashIcon" />} {...defaultArgs} variant="textAlert" />
+            <Button prefixIcon={<Icon icon="UbieIcon" />} {...defaultArgs} />
+            <Button prefixIcon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="secondary" />
+            <Button prefixIcon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="accent" />
+            <Button prefixIcon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="alert" />
+            <Button prefixIcon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="text" />
+            <Button prefixIcon={<Icon icon="TrashIcon" />} {...defaultArgs} variant="textAlert" />
           </div>
         </dd>
       </Stack>
@@ -126,6 +126,20 @@ export const WithIcon: Story = {
           </div>
         </dd>
       </Stack>
+
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>icon prop(deprecated)</dt>
+        <dd style={{ margin: 0 }}>
+          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} />
+            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="secondary" />
+            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="accent" />
+            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="alert" />
+            <Button icon={<Icon icon="UbieIcon" />} {...defaultArgs} variant="text" />
+            <Button icon={<Icon icon="TrashIcon" />} {...defaultArgs} variant="textAlert" />
+          </div>
+        </dd>
+      </Stack>
     </Stack>
   ),
   args: defaultArgs,
@@ -154,7 +168,7 @@ export const Block: Story = {
 export const Disabled: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
-      <Button {...defaultArgs} disabled />
+      <Button {...defaultArgs} prefixIcon="UbieIcon" disabled />
       <Button {...defaultArgs} variant="secondary" disabled />
       <Button {...defaultArgs} variant="accent" disabled />
       <Button {...defaultArgs} variant="alert" disabled />
@@ -201,7 +215,7 @@ export const Loading: Story = {
       </div>
 
       <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
-        <Button {...args} icon={<Icon icon="UbieIcon" />} size="medium" loadingLabel="ラベル変更">
+        <Button icon={<Icon icon="UbieIcon" />} size="medium" loading loadingLabel="ラベル変更">
           次のページへ
         </Button>
         <Button {...args} variant="secondary" size="medium" disabled />

diff --git a/src/stories/LinkButton.stories.tsx b/src/stories/LinkButton.stories.tsx
@@ -53,16 +53,16 @@ export const WithIcon: Story = {
   render: () => (
     <Stack spacing="lg">
       <Stack spacing="lg" as="dl">
-        <dt style={{ fontWeight: 'bold' }}>Default Position</dt>
+        <dt style={{ fontWeight: 'bold' }}>Position Prefix</dt>
 
         <dd style={{ margin: 0 }}>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
-            <LinkButton icon={<UbieIcon />} {...defaultArgs} />
-            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="secondary" />
-            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="accent" />
-            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="alert" />
-            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="text" />
-            <LinkButton icon={<TrashIcon />} {...defaultArgs} variant="textAlert" />
+            <LinkButton prefixIcon={<UbieIcon />} {...defaultArgs} />
+            <LinkButton prefixIcon={<UbieIcon />} {...defaultArgs} variant="secondary" />
+            <LinkButton prefixIcon={<UbieIcon />} {...defaultArgs} variant="accent" />
+            <LinkButton prefixIcon={<UbieIcon />} {...defaultArgs} variant="alert" />
+            <LinkButton prefixIcon={<UbieIcon />} {...defaultArgs} variant="text" />
+            <LinkButton prefixIcon={<TrashIcon />} {...defaultArgs} variant="textAlert" />
           </div>
         </dd>
       </Stack>
@@ -130,6 +130,21 @@ export const WithIcon: Story = {
           </div>
         </dd>
       </Stack>
+
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>icon prop(deprecated)</dt>
+
+        <dd style={{ margin: 0 }}>
+          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+            <LinkButton icon={<UbieIcon />} {...defaultArgs} />
+            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="secondary" />
+            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="accent" />
+            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="alert" />
+            <LinkButton icon={<UbieIcon />} {...defaultArgs} variant="text" />
+            <LinkButton icon={<TrashIcon />} {...defaultArgs} variant="textAlert" />
+          </div>
+        </dd>
+      </Stack>
     </Stack>
   ),
 };