Skip to content

motion: tabsのモーションを作成 #247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tianshen-gp wants to merge 1 commit into
base: animation
Choose a base branch
from
Open

motion: tabsのモーションを作成 #247

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions src/components/ui/tabs/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,54 @@ export const Scrollable: TabsListVariantStory = {
),
};

/**
* コンテンツ切り替え fade-in と line インジケータースライドの確認用。
* en: For verifying content fade-in and line indicator slide motion.
*/
export const MotionPreview: Story = {
parameters: {
docs: {
description: {
story:
"タブを切り替えてモーションを確認する。上段：solid / ghost（コンテンツ fade-in のみ）。下段：line（コンテンツ fade-in + インジケータースライド）。\n\n**コンテンツ**：opacity(0)+translateY(6px)→opacity(1)+translateY(0)、200ms ease-out。\n**line インジケーター**：アクティブタブの位置・幅に追従してスライド、250ms cubic-bezier(0.16,1,0.3,1)。\n\nen: Switch tabs to verify motion. Top: solid/ghost (content fade-in only). Bottom: line (content fade-in + indicator slide). Content: opacity(0)+translateY(6px)→(1)+0, 200ms ease-out. Line indicator: slides to active tab position/width, 250ms cubic-bezier(0.16,1,0.3,1).",
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

説明文と実際のプレビュー構成が一致していません

"上段：solid / ghost" とありますが、render は solid と line の2段構成です。ドキュメントの期待値が誤るので文言修正（または ghost セクション追加）が必要です。

修正案（文言を実装に合わせる） 
- "タブを切り替えてモーションを確認する。上段：solid / ghost（コンテンツ fade-in のみ）。下段：line（コンテンツ fade-in + インジケータースライド）。\n\n**コンテンツ**：opacity(0)+translateY(6px)→opacity(1)+translateY(0)、200ms ease-out。\n**line インジケーター**：アクティブタブの位置・幅に追従してスライド、250ms cubic-bezier(0.16,1,0.3,1)。\n\nen: Switch tabs to verify motion. Top: solid/ghost (content fade-in only). Bottom: line (content fade-in + indicator slide). Content: opacity(0)+translateY(6px)→(1)+0, 200ms ease-out. Line indicator: slides to active tab position/width, 250ms cubic-bezier(0.16,1,0.3,1).",
+ "タブを切り替えてモーションを確認する。上段：solid（コンテンツ fade-in のみ）。下段：line（コンテンツ fade-in + インジケータースライド）。\n\n**コンテンツ**：opacity(0)+translateY(6px)→opacity(1)+translateY(0)、200ms ease-out。\n**line インジケーター**：アクティブタブの位置・幅に追従してスライド、250ms cubic-bezier(0.16,1,0.3,1)。\n\nen: Switch tabs to verify motion. Top: solid (content fade-in only). Bottom: line (content fade-in + indicator slide). Content: opacity(0)+translateY(6px)→(1)+0, 200ms ease-out. Line indicator: slides to active tab position/width, 250ms cubic-bezier(0.16,1,0.3,1).",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"タブを切り替えてモーションを確認する。上段：solid / ghost（コンテンツ fade-in のみ）。下段：line（コンテンツ fade-in + インジケータースライド）。\n\n**コンテンツ**：opacity(0)+translateY(6px)→opacity(1)+translateY(0)、200ms ease-out。\n**line インジケーター**：アクティブタブの位置・幅に追従してスライド、250ms cubic-bezier(0.16,1,0.3,1)。\n\nen: Switch tabs to verify motion. Top: solid/ghost (content fade-in only). Bottom: line (content fade-in + indicator slide). Content: opacity(0)+translateY(6px)→(1)+0, 200ms ease-out. Line indicator: slides to active tab position/width, 250ms cubic-bezier(0.16,1,0.3,1).",
"タブを切り替えてモーションを確認する。上段：solid（コンテンツ fade-in のみ）。下段：line（コンテンツ fade-in + インジケータースライド）。\n\n**コンテンツ**：opacity(0)+translateY(6px)→opacity(1)+translateY(0)、200ms ease-out。\n**line インジケーター**：アクティブタブの位置・幅に追従してスライド、250ms cubic-bezier(0.16,1,0.3,1)。\n\nen: Switch tabs to verify motion. Top: solid (content fade-in only). Bottom: line (content fade-in + indicator slide). Content: opacity(0)+translateY(6px)→(1)+0, 200ms ease-out. Line indicator: slides to active tab position/width, 250ms cubic-bezier(0.16,1,0.3,1).",
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/tabs/index.stories.tsx` at line 87, The story description
text mentions "上段：solid / ghost" but the render implementation uses a two-row
layout of "solid" and "line", so update the description string in this story to
match the actual preview (e.g., change "上段：solid / ghost" to "上段：solid / line")
or alternately modify the render to include a ghost section; locate and update
the long bilingual description string used in the story (referenced near the
render function in src/components/ui/tabs/index.stories.tsx) so the text and
rendered preview are consistent.

},
},
},
render: () => (
<div className="flex flex-col gap-10 w-[400px]">
{/* solid */}
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

インラインコメントを日英併記に統一してください

{/* solid */} と {/* line */} が英語のみで、コメント言語ルールに未準拠です。

修正案（日本語先頭 + en:） 
-      {/* solid */}
+      {/* 上段: solid */}
+      {/* en: Top section: solid */}
@@
-      {/* line */}
+      {/* 下段: line */}
+      {/* en: Bottom section: line */}

As per coding guidelines **/*.{ts,tsx,js,jsx}: Write comments in Japanese first, then English with en: prefix.

Also applies to: 108-108

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/tabs/index.stories.tsx` at line 93, Update the inline JSX
comments `{/* solid */}` and `{/* line */}` in the story file to follow the repo
rule "Japanese first, then English with en: prefix" — replace each comment with
a Japanese description followed by the English translation prefixed by "en:",
e.g. change the `solid` and `line` inline comments in the component story to
Japanese-first variants (and update both occurrences referenced around the
`solid` and `line` comments).

<div className="flex flex-col gap-1">
<p className="text-xs text-neutral-500 font-medium">solid</p>
<Tabs defaultValue="a">
<TabsList variant="solid">
<TabsTrigger value="a">アカウント</TabsTrigger>
<TabsTrigger value="b">通知</TabsTrigger>
<TabsTrigger value="c">セキュリティ</TabsTrigger>
</TabsList>
<TabsContent value="a"><p className="py-4 character-3-regular-pro text-text-medium">アカウント設定の内容がここに入ります。</p></TabsContent>
<TabsContent value="b"><p className="py-4 character-3-regular-pro text-text-medium">通知設定の内容がここに入ります。</p></TabsContent>
<TabsContent value="c"><p className="py-4 character-3-regular-pro text-text-medium">セキュリティ設定の内容がここに入ります。</p></TabsContent>
</Tabs>
</div>

{/* line */}
<div className="flex flex-col gap-1">
<p className="text-xs text-neutral-500 font-medium">line — インジケータースライド確認</p>
<Tabs defaultValue="x">
<TabsList variant="line">
<TabsTrigger value="x">アカウント</TabsTrigger>
<TabsTrigger value="y">通知</TabsTrigger>
<TabsTrigger value="z">セキュリティ</TabsTrigger>
</TabsList>
<TabsContent value="x"><p className="py-4 character-3-regular-pro text-text-medium">アカウント設定の内容がここに入ります。</p></TabsContent>
<TabsContent value="y"><p className="py-4 character-3-regular-pro text-text-medium">通知設定の内容がここに入ります。</p></TabsContent>
<TabsContent value="z"><p className="py-4 character-3-regular-pro text-text-medium">セキュリティ設定の内容がここに入ります。</p></TabsContent>
</Tabs>
</div>
</div>
),
};

export const Solid: Story = {
render: args => (
<Tabs defaultValue="tab1" {...args}>
Expand Down
Loading