Selectの修正 - #114
Conversation
- 不要なスタイル定義を削除し、直接クラス名を使用するように変更 - `item.json`のプロパティの順序を整理
- SelectコンポーネントのargTypesから説明文を削除 - SelectTriggerコンポーネントの型定義を追加 - 使用例を追加し、ドキュメントを更新
- Selectコンポーネントの概要を削除し、SelectTriggerの説明を追加 - Selectコンポーネントの使用目的を明確化
- selectTriggerVariantsのスタイルを改善 - selectContentVariantsのスタイルを改善 - SelectItemコンポーネントのクラス名を更新
- Figmaとの接続を設定 - SelectTriggerコンポーネントのプロパティを自動マッピング - コード例を提供するための例関数を追加
- selectTriggerVariantsのisInvalidとisDisabledのスタイルを改善 - selectIconVariantsのisDisabledのスタイルを修正 - SelectSeparatorコンポーネントのクラス名を更新
- SelectLabelコンポーネントのテキストカラーを変更 - SelectItemコンポーネントの背景色を変更
- figmaインポートの位置を修正
- Figma Code Connectの対応状況を更新
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
Adjustments to the Select component based on Figma design specifications, including icon updates, focus ring color corrections, and documentation improvements.
- Updated icon from "expand_more" to "arrow_drop_down" to match Figma design
- Modified focus ring colors and various state colors to align with design system
- Improved component documentation structure and added TypeScript interface definitions
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/select/item.json | Reordered JSON properties for consistency |
| src/components/ui/select/index.tsx | Updated styling, colors, icon, documentation, and TypeScript interfaces |
| src/components/ui/select/index.stories.tsx | Removed redundant description properties from story controls |
| src/components/ui/select/index.figma.tsx | Added new Figma Connect integration file |
| README.md | Updated Select component status to show Figma Connect as complete |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- selectScrollButtonVariantsの削除 - スクロールボタンのクラス名を直接指定
|
@ore0 この観点なのですがsizeの指定場所を増やさずにこれを解決しようと思うとおそらくContextを自分たちで持たなければならず、どうしようかなぁとなっています。
シンプルにするのであればTriggerとValueは一体にしてしまうという方法もなくはなさそうだなと思ったんですがここら辺どう思いますか？ |
- Selectコンポーネントの概要を追加 - 使用例を追加 - SelectTriggerのドキュメントを整理
- Selectコンポーネントの実装状況を✅に変更
- SelectItemPropsインターフェースを追加し、textClassNameプロパティを定義 - SelectItemコンポーネントでtextClassNameを使用するように変更 - ItemTextのクラス名を修正し、flex-1を適用
|
GPT-5-Codexで解決です！ |
- paddingの位置を変更 - アイコンの位置を左側に移動
Dropdownの修正 |
|
確認しました！ |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughSelectコンポーネントの公開プロップ型とレンダリングを変更し、バリアント定義をインライン化。Storybookのメタ/型/argTypesを更新し、Figma Code Connect向けの自動生成ファイルを追加。READMEの表示テキストとヘッダ幅を調整。 Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro (Legacy) 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (7)**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/instructions/ai-context.instructions.md)
Files:
src/components/ui/**/index.tsx📄 CodeRabbit inference engine (.github/instructions/ai-context.instructions.md)
Files:
src/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/instructions/ai-development.instructions.md)
Files:
**/*.{js,ts,jsx,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{js,ts,jsx,tsx,mjs}📄 CodeRabbit inference engine (GEMINI.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/components/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧬 Code graph analysis (1)src/components/ui/select/index.tsx (2)
🔇 Additional comments (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/ui/select/index.stories.tsx (1)
34-53: argTypesをmetaレベルで定義することを検討してください。現在、
argTypesは各ストーリーに個別に適用されていますが、metaのargTypes（Line 34）は空のオブジェクトになっています。全ストーリーで共通のargTypesを使用する場合は、metaレベルで定義するとコードが簡潔になります。以下のように変更できます：
tags: ["autodocs"], - argTypes: {}, + argTypes: { + disabled: { + control: "boolean", + defaultValue: false, + }, + size: { + control: { type: "radio" }, + options: ["sm", "md", "lg"], + defaultValue: "md", + }, + isInvalid: { + control: "boolean", + defaultValue: false, + }, + }, } satisfies Meta<typeof Select>; export default meta; type Story = StoryObj<SelectTriggerProps>; -const argTypes: Story["argTypes"] = { - disabled: { - control: "boolean", - defaultValue: false, - }, - size: { - control: { type: "radio" }, - options: ["sm", "md", "lg"], - defaultValue: "md", - }, - isInvalid: { - control: "boolean", - defaultValue: false, - }, -};その後、各ストーリーから
argTypes: argTypesを削除できます。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
src/components/ui/select/item.jsonis excluded by!**/*.json
📒 Files selected for processing (4)
README.md(2 hunks)src/components/ui/select/index.figma.tsx(1 hunks)src/components/ui/select/index.stories.tsx(7 hunks)src/components/ui/select/index.tsx(12 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
README.md
📄 CodeRabbit inference engine (.github/instructions/new-component.instructions.md)
Update the 'コンポーネント対応状況' (Component Status) section in README.md after creating a new component
Files:
README.md
**/*.md
📄 CodeRabbit inference engine (AGENTS.md)
Commit messages must follow
.github/copilot-commit-message-instructions.md, be written in Japanese with an emoji prefix, and use Conventional Commit format
Files:
README.md
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/ai-context.instructions.md)
**/*.{ts,tsx}: Use Japanese first for comments, then English withen:prefix in TypeScript/React files
Follow shadcn/ui patterns with CVA (Class Variance Authority) variants for component styling in React components
Include ARIA labels and use semantic HTML for accessibility in React components
**/*.{ts,tsx}: React components: Write interface properties with bilingual format - Japanese followed by 'en:' and English translation
React components: Write JSDoc with three sections - Overview (日本語/English), Usage Example (executable code), and @PARAM with type only
Interface properties: Separate Japanese and English descriptions with '/' character
Component JSDoc: Usage Example section must contain executable code that demonstrates actual component usage
Component JSDoc: Add one blank line after the Overview section before Usage Example
Component JSDoc @PARAM: Include type information only (e.g., @PARAM {ButtonProps} props), with detailed descriptions provided in the interface definition
Files:
src/components/ui/select/index.figma.tsxsrc/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/ai-development.instructions.md)
src/**/*.{ts,tsx}: Use CVA (Class Variance Authority) for component styling variants with clear variant types defined
Write comments in Japanese first, then English with 'en:' prefix
Files:
src/components/ui/select/index.figma.tsxsrc/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Write comments in Japanese followed by English with
en:prefix
Files:
src/components/ui/select/index.figma.tsxsrc/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
**/*.{js,ts,jsx,tsx,mjs}
📄 CodeRabbit inference engine (GEMINI.md)
Write comments in Japanese followed by English with
en:prefix
Files:
src/components/ui/select/index.figma.tsxsrc/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Code comments must follow.github/instructions/comment-style.instructions.md, written in Japanese first, followed by English withen:prefix
Runpnpm lint && pnpm formatbefore committing to ensure code quality
Files:
src/components/ui/select/index.figma.tsxsrc/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/components/**/*.{ts,tsx}: Follow component creation process and scaffolding guidelines in.github/instructions/new-component.instructions.md
Use TailwindCSS with shadcn/ui patterns for component styling
Files:
src/components/ui/select/index.figma.tsxsrc/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/ai-development.instructions.md)
Write Storybook stories for component documentation
Files:
src/components/ui/select/index.stories.tsx
src/components/ui/**/index.tsx
📄 CodeRabbit inference engine (.github/instructions/ai-context.instructions.md)
Component implementation files should follow shadcn/ui patterns and include comprehensive TypeScript typing
Files:
src/components/ui/select/index.tsx
🧬 Code graph analysis (3)
src/components/ui/select/index.figma.tsx (1)
src/components/ui/select/index.tsx (5)
SelectTrigger(412-412)Select(409-409)SelectValue(411-411)SelectContent(413-413)SelectItem(415-415)
src/components/ui/select/index.stories.tsx (1)
src/components/ui/select/index.tsx (2)
Select(409-409)SelectTriggerProps(143-160)
src/components/ui/select/index.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/components/ui/icon/index.tsx (1)
Icon(36-58)
🔇 Additional comments (6)
src/components/ui/select/index.figma.tsx (1)
1-57: LGTM! Figma Code Connect統合が適切に実装されています。index.tsxで定義されたSelectTriggerPropsに基づき、size、isInvalid、disabled、valueのマッピングが正しく行われています。過去のレビューで指摘された「isInvaild」のタイポも修正されています。
src/components/ui/select/index.tsx (3)
10-46: LGTM! CVAバリアント定義が適切に構造化されています。selectTriggerVariantsは、size、isInvalid、isDisabledのバリアントを明確に定義し、compoundVariantsでInvalid + Disabledの組み合わせを適切に処理しています。配列をjoin(" ")で結合するパターンは可読性を向上させています。
142-160: LGTM! SelectTriggerPropsインターフェースが適切に定義されています。VariantPropsを活用してCVAバリアントから型を抽出し、バイリンガルのJSDocコメント（日本語 +
en:プレフィックス付き英語）がコーディングガイドラインに準拠しています。
272-279: LGTM! SelectItemPropsインターフェースが適切に追加されています。
textClassNameプロパティにより、アイテムのテキスト部分のスタイルを柔軟にカスタマイズできます。バイリンガルコメントも適切です。src/components/ui/select/index.stories.tsx (1)
55-121: PR目標に関する確認: 長いオプションテキストの表示問題PR Commentsで指摘されている通り、タイムゾーンのオプション（例: "Eastern Standard Time (EST)"）がSelectTriggerの幅を超える場合があります。これはGuidelinesの「Don't」に矛盾する可能性があります。
SelectTriggerに
overflow-hidden whitespace-preが設定されていますが、選択後に右側の矢印アイコンが見えなくなる問題が報告されています。PRコメントで言及された問題を確認するため、長いテキストの切り詰め（
text-ellipsis truncateなど）の追加を検討してください。README.md (1)
251-251: LGTM! コンポーネント対応状況が正しく更新されています。SelectのFigma Code Connect列が✅に更新され、
index.figma.tsxの追加と一致しています。
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/ui/select/index.stories.tsx (1)
180-226: Storiesのprops順序バグ：isInvalid/disabledが{...args}に上書きされます
<SelectTrigger ... isInvalid {...args}>の形だと、controls 側のargs.isInvalid（デフォルトfalse等）で上書きされ、Invalid/Disabled系ストーリーが意図通り描画されません。argsに寄せるのが一番事故りにくいです。export const Invalid: Story = { - argTypes: argTypes, + args: { isInvalid: true }, + argTypes: argTypes, render: args => ( <Select> - <SelectTrigger className="w-[240px]" isInvalid {...args}> + <SelectTrigger className="w-[240px]" {...args}> <SelectValue placeholder="選択してください" /> </SelectTrigger> <SelectContent> <SelectItem value="1">オプション1</SelectItem> <SelectItem value="2">オプション2</SelectItem> <SelectItem value="3">オプション3</SelectItem> </SelectContent> </Select> ), }; export const Disabled: Story = { - argTypes: argTypes, + args: { disabled: true }, + argTypes: argTypes, render: args => ( <Select> - <SelectTrigger className="w-[240px]" disabled {...args}> + <SelectTrigger className="w-[240px]" {...args}> <SelectValue placeholder="選択してください" /> </SelectTrigger> <SelectContent> <SelectItem value="1">オプション1</SelectItem> <SelectItem value="2">オプション2</SelectItem> <SelectItem value="3">オプション3</SelectItem> </SelectContent> </Select> ), }; export const DisabledWithInvalidState: Story = { - argTypes: argTypes, + args: { disabled: true, isInvalid: true }, + argTypes: argTypes, render: args => ( <Select> - <SelectTrigger className="w-[240px]" disabled isInvalid {...args}> + <SelectTrigger className="w-[240px]" {...args}> <SelectValue placeholder="選択してください" /> </SelectTrigger> <SelectContent> <SelectItem value="1">オプション1</SelectItem> <SelectItem value="2">オプション2</SelectItem> <SelectItem value="3">オプション3</SelectItem> </SelectContent> </Select> ), };
🧹 Nitpick comments (2)
src/components/ui/select/index.tsx (1)
142-160:SelectTriggerPropsのプロパティdoc形式（/ 区切り）とJSDoc構成をガイドラインに揃えたいです現状の日本語＋
en:の複数行スタイルだと、提示されている「/ 区切り」ルールとズレています。また、SelectTriggerのJSDocは Usage Example セクションが無いので、ガイドライン準拠を狙うなら追記が必要です。（コーディングガイドラインに基づき、）
Also applies to: 162-169
src/components/ui/select/index.stories.tsx (1)
16-53: Storybookの型付けとargTypes.defaultValueの効き方は、採用バージョン前提で一度確認したいです
StoryObj<SelectTriggerProps>やargTypes.defaultValueの挙動は Storybook のバージョン/設定で差が出やすいので、意図通り controls に反映されるかだけ確認があると安心です（必要ならmeta.args/ 各storyのargsに寄せる）。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (2)
src/components/ui/select/index.stories.tsx(7 hunks)src/components/ui/select/index.tsx(12 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/ai-context.instructions.md)
**/*.{ts,tsx}: Use Japanese first for comments, then English withen:prefix in TypeScript/React files
Follow shadcn/ui patterns with CVA (Class Variance Authority) variants for component styling in React components
Include ARIA labels and use semantic HTML for accessibility in React components
**/*.{ts,tsx}: React components: Write interface properties with bilingual format - Japanese followed by 'en:' and English translation
React components: Write JSDoc with three sections - Overview (日本語/English), Usage Example (executable code), and @PARAM with type only
Interface properties: Separate Japanese and English descriptions with '/' character
Component JSDoc: Usage Example section must contain executable code that demonstrates actual component usage
Component JSDoc: Add one blank line after the Overview section before Usage Example
Component JSDoc @PARAM: Include type information only (e.g., @PARAM {ButtonProps} props), with detailed descriptions provided in the interface definition
Files:
src/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/ai-development.instructions.md)
src/**/*.{ts,tsx}: Use CVA (Class Variance Authority) for component styling variants with clear variant types defined
Write comments in Japanese first, then English with 'en:' prefix
Files:
src/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/ai-development.instructions.md)
Write Storybook stories for component documentation
Files:
src/components/ui/select/index.stories.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Write comments in Japanese followed by English with
en:prefix
Files:
src/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
**/*.{js,ts,jsx,tsx,mjs}
📄 CodeRabbit inference engine (GEMINI.md)
Write comments in Japanese followed by English with
en:prefix
Files:
src/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Code comments must follow.github/instructions/comment-style.instructions.md, written in Japanese first, followed by English withen:prefix
Runpnpm lint && pnpm formatbefore committing to ensure code quality
Files:
src/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/components/**/*.{ts,tsx}: Follow component creation process and scaffolding guidelines in.github/instructions/new-component.instructions.md
Use TailwindCSS with shadcn/ui patterns for component styling
Files:
src/components/ui/select/index.stories.tsxsrc/components/ui/select/index.tsx
src/components/ui/**/index.tsx
📄 CodeRabbit inference engine (.github/instructions/ai-context.instructions.md)
Component implementation files should follow shadcn/ui patterns and include comprehensive TypeScript typing
Files:
src/components/ui/select/index.tsx
🧬 Code graph analysis (2)
src/components/ui/select/index.stories.tsx (1)
src/components/ui/select/index.tsx (3)
Select(409-409)SelectTriggerProps(143-160)SelectTrigger(412-412)
src/components/ui/select/index.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/components/ui/icon/index.tsx (1)
Icon(36-58)
🔇 Additional comments (4)
src/components/ui/select/index.tsx (4)
48-58: アイコンのdisabled時カラー切替は分かりやすいです
selectIconVariantsでisDisabledに応じて色を出し分けているのは意図が明確で良いです。
256-267:SelectLabelのクラス直書きは読みやすくて良いですバリアント不要な箇所を
cn(...)に寄せていて、保守性も上がっていると思います。
272-318:textClassNameをItemTextに渡す修正はOKですテキスト領域にだけクラスを当てられるようになっていて、スタイルの責務分離もできています。
66-72: このTailwind構文は実際には有効です — v4の標準形式ですTailwind v4では、CSS カスタムプロパティの短縮形として
max-h-(--var)およびorigin-(--var)構文が標準となっており、max-h-[var(--radix-...)]に変換する必要はありません。この形式はビルド互換性の問題を引き起こさず、むしろ v4の推奨される表記法です。コードは正しく記述されています。
memo |
概要
以下で指摘が入った箇所含め調整
https://www.notion.so/goodpatch-design-div/Select-3386ceea2f3543b49d619d08412d61f4?source=copy_link
変更内容
動作確認
pnpm lintを実行pnpm build:packageを実行してプロジェクトが正常にビルドされることを確認pnpm testを実行してテストがすべて成功することを確認関連 Issue