🎨 #303 style を直接渡すのは Tailwind CSS のクラスと競合するのでクラス名を受け取るStyleに変更

nekochans · Aug 23, 2024 · 4e46991 · 4e46991
1 parent f47d7b9
commit 4e46991
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/app/_components/IconButton.stories.tsx b/src/app/_components/IconButton.stories.tsx
@@ -9,6 +9,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const responsiveWidthClass = 'w-[220px] sm:w-[240px]';
+
 export const Default: Story = {
   args: {
     type: 'button',
@@ -38,7 +40,7 @@ export const WithRepeatIcon: Story = {
     type: 'button',
     displayText: 'ランダムコピー',
     showRepeatIcon: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -48,7 +50,7 @@ export const WithRepeatIconPressed: Story = {
     displayText: 'ランダムコピー',
     showRepeatIcon: true,
     isPressed: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -57,7 +59,7 @@ export const WithRandomIcon: Story = {
     type: 'button',
     displayText: 'ねこリフレッシュ',
     showRandomIcon: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -67,7 +69,7 @@ export const WithRandomIconPressed: Story = {
     displayText: 'ねこリフレッシュ',
     showRandomIcon: true,
     isPressed: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -76,7 +78,7 @@ export const WithCatIcon: Story = {
     type: 'button',
     displayText: 'ねこ新着順',
     showCatIcon: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -86,6 +88,6 @@ export const WithCatIconPressed: Story = {
     displayText: 'ねこ新着順',
     showCatIcon: true,
     isPressed: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
diff --git a/src/app/_components/IconButton.tsx b/src/app/_components/IconButton.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, CSSProperties, JSX } from 'react';
+import type { ComponentProps, JSX } from 'react';
 import { Button, Text } from 'react-aria-components';
 
 const GithubIcon = () => {
@@ -76,7 +76,7 @@ type Props = ComponentProps<'button'> & {
   showRandomIcon?: boolean;
   showCatIcon?: boolean;
   isPressed?: boolean;
-  style?: CSSProperties;
+  className?: string;
 };
 
 export const IconButton = ({
@@ -87,7 +87,7 @@ export const IconButton = ({
   showRandomIcon,
   showCatIcon,
   isPressed,
-  style,
+  className,
 }: Props): JSX.Element => {
   const baseClasses =
     'inline-flex items-center justify-center gap-2 rounded-lg px-7 py-1.5 text-black transition-colors duration-200';
@@ -99,10 +99,9 @@ export const IconButton = ({
   return (
     <Button
       type={type}
-      className={`${baseClasses} ${stateClasses} ${focusClasses}`}
+      className={`${baseClasses} ${stateClasses} ${focusClasses} ${className ?? ''}`}
       isDisabled={isPressed}
       aria-pressed={isPressed}
-      style={style}
     >
       {showGithubIcon != null && <GithubIcon />}
       {showRepeatIcon != null && <RepeatIcon />}