Merge pull request #457 from pixiv/toshusai/add-active-state

feat: Implemented active state for Button, IconButton, and DropdownSelector.
pixiv · Feb 8, 2024 · 5c78abc · 5c78abc
2 parents 73024d7 + 230135f
commit 5c78abc
Show file tree

Hide file tree

Showing 16 changed files with 653 additions and 688 deletions.
diff --git a/docs/src/pages/@charcoal-ui/react/Button/apiData.tsx b/docs/src/pages/@charcoal-ui/react/Button/apiData.tsx
@@ -28,4 +28,9 @@ export const apiData: Omit<
     type: toEnum(sizes),
     default: '"M"',
   },
+  isActive: {
+    description: 'ボタンの押下状態',
+    type: 'boolean',
+    default: 'false',
+  },
 }
diff --git a/docs/src/pages/@charcoal-ui/react/Button/sections.tsx b/docs/src/pages/@charcoal-ui/react/Button/sections.tsx
@@ -42,4 +42,14 @@ export const sections: PreviewSection<ButtonProps>[] = [
       children: variant,
     })),
   },
+  {
+    title: 'isActive',
+    previewMetas: variants.map((variant) => ({
+      props: {
+        variant,
+        isActive: true,
+      },
+      children: variant,
+    })),
+  },
 ]
diff --git a/docs/src/pages/@charcoal-ui/react/IconButton/apiData.tsx b/docs/src/pages/@charcoal-ui/react/IconButton/apiData.tsx
@@ -26,4 +26,9 @@ export const apiData: Omit<
     description: 'スタイルの種類',
     type: '"Default" | "Overlay"',
   },
+  isActive: {
+    description: 'ボタンの押下状態',
+    type: 'boolean',
+    default: 'false',
+  },
 }
diff --git a/docs/src/pages/@charcoal-ui/react/IconButton/sections.tsx b/docs/src/pages/@charcoal-ui/react/IconButton/sections.tsx
@@ -68,4 +68,25 @@ export const sections: PreviewSection<IconButtonProps>[] = [
       },
     ],
   },
+  {
+    title: 'isActive',
+    previewMetas: [
+      {
+        children: undefined,
+        props: {
+          icon: '24/Add',
+          variant: 'Default',
+          isActive: true,
+        },
+      },
+      {
+        children: undefined,
+        props: {
+          icon: '24/Add',
+          variant: 'Overlay',
+          isActive: true,
+        },
+      },
+    ],
+  },
 ]