Conversation
- 入力フィールドのスタイルにパディングを追加 - サイズに応じたクラス名を更新 - エラーハンドリングのスタイルを改善 - 無効状態のスタイルを更新
- Inputコンポーネントの説明文を削除 - スタイル定義の修正 - プロパティの型定義を更新
- サイズバリアントのクラス名をマップで管理 - テストの可読性を向上
- Figmaとの接続を設定 - InputコンポーネントのプロパティをFigmaにマッピング - 自動生成されたコードの追加
- InputコンポーネントのSizeストーリーにargsを適用 - InvalidおよびDisabledストーリーにargsを適用
- Inputコンポーネントの説明文を「インプットはテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。」に変更
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- インポート文の順序を修正しました。
There was a problem hiding this comment.
Pull Request Overview
This PR focuses on refining the Input component's visual design and functionality. The changes align with design specifications from a Notion document, updating colors, typography, spacing, and improving component documentation.
- Updated color scheme from base/primary colors to neutral/text semantic tokens
- Refined styling with new typography classes and improved spacing
- Enhanced component documentation and testing approach
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/input/item.json | Updated component description for better clarity |
| src/components/ui/input/index.tsx | Major styling updates including colors, typography, spacing, and prop documentation |
| src/components/ui/input/index.test.tsx | Improved test assertions to check specific CSS classes rather than size strings |
| src/components/ui/input/index.stories.tsx | Cleaned up Storybook configuration and improved story structure |
| src/components/ui/input/index.figma.tsx | Added new Figma Connect integration file |
| src/components/ui/input-password/index.test.tsx | Applied same test improvements as the main Input component |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| isDisabled: figma.enum("state", { | ||
| disabled: true, | ||
| }), | ||
| isFocused: figma.boolean("isFocused"), |
There was a problem hiding this comment.
isFocusedはどうしようかなというところでした。なくていいはずなんですがなかなかに複雑なことをしているなという印象があり...特に当初の意図とかなければ無くす形で実装できないか再度見てみます
There was a problem hiding this comment.
コンポーネントには必要だと思うんですけど、Code Connectでは不要という意味でした！🙆♂️
There was a problem hiding this comment.
Triggerの制御がCode Connectには含まれていない点が気になりました！
There was a problem hiding this comment.
isIconButtonEnableはFigmaだとisTriggerになるので、その点の同期が取れていなくても問題ないかについて議論をできていると良さそうです！
There was a problem hiding this comment.
あ、ここはその変更の対応関係が理解できていなかったです🙏
であればisIconButtonEnableをFigmaに合わせるが対応になるかと思います
- isIconButtonEnableをisTriggerに変更 - iconButtonIconをtriggerIconに変更 - iconButtonAriaLabelをtriggerAriaLabelに変更 - コンポーネントのテストを新しいプロパティに合わせて更新
|
@ore0 全般的にiconButtonではなくtriggerという形にして命名を変更しました🙆♂️ |
概要
こちらの修正および微調整
https://www.notion.so/goodpatch-design-div/Input-364c3d9b627848568b49d9671cad03fa?source=copy_link
変更内容
動作確認
pnpm lintを実行pnpm buildを実行してプロジェクトが正常にビルドされることを確認pnpm testを実行してテストがすべて成功することを確認関連 Issue