Conversation
added 4 commits
August 15, 2025 01:45
- タグコンポーネントのストーリーで子要素のテキストを「Tag」から「ラベル」に変更 - ストーリーの引数を使用して、タグのバリアント、サイズ、ステータスを指定
- TagコンポーネントをFigmaに接続 - プロパティのマッピングを定義 - コード例をFigma用に設定
- Tagコンポーネントの基本レンダリングテストを追加 - カスタムコンテンツのレンダリングテストを追加 - カスタムクラス名の適用テストを追加 - バリアントスタイルの適用テストを追加 - サイズバリアントの適用テストを追加 - ステータスバリアントの適用テストを追加 - 複数のプロパティの適用テストを追加 - アクセシビリティ属性のサポートテストを追加 - エッジケースのテストを追加
- タグのスタイルを改善 - タグのサイズに関するクラス名を更新 - タグの説明文を修正
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
added 3 commits
August 15, 2025 02:18
- ステータスバリアントの期待値に「bg-」プレフィックスを追加
- outlineバリアントの期待値を "border-neutral-500" から "bg-neutral-500" に変更
- outlineバリアントの期待値を"bg-neutral-500"から"bg-white"に変更 - カスタムクラスの期待値を"primary-500"から"border-primary-500"に修正
touyou
reviewed
Aug 15, 2025
Comment on lines
+16
to
+18
| sm: "py-0 px-2 h-5 character-1-bold-pro", | ||
| md: "py-0.5 px-2 h-6 character-1-bold-pro", | ||
| lg: "py-1 px-2 h-8 character-2-bold-pro", |
Member
There was a problem hiding this comment.
q: Figmaのdev mode見るとmin-widthがついているようなのですがこれは対応しますか？
逆にhはline-height基準でFigmaは作られていそうなので合わせて意図通りかは確認しておきたいです！
Author
There was a problem hiding this comment.
質問ありがとうございます！
めちゃくちゃ大事なポイントでした。
以下の対応を行いました！
- min-widthの指定
- heightの除去
- 折り返しのサポート
Figmaに合わせて固定幅が指定されたときに文字がoverflowする問題を解消して折り返し処理を行うように修正しています。
- タグのサイズに最小幅を追加しました。
There was a problem hiding this comment.
Pull Request Overview
This PR implements Tag component styling adjustments based on feedback, including color, font weight, border radius updates, and improved testing and documentation.
- Style adjustments including color scheme changes from
base-*toneutral-*, font weight changes to bold, and border radius changes torounded-notice - Test modernization from custom TestContainer to standard React Testing Library
- Storybook improvements with better story structure and Japanese content
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| item.json | Updated component description to better reflect Tag's purpose |
| index.tsx | Core styling changes: colors, typography, sizing, and border radius |
| index.test.tsx | Complete test refactor using React Testing Library with improved coverage |
| index.stories.tsx | Enhanced Storybook stories with proper args forwarding and Japanese labels |
| index.figma.tsx | New Figma Connect integration file for design-code sync |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
- タグのスタイルから最小幅を削除
- サイズバリアントの期待値を最小幅に変更 - 結合プロパティのテストで期待値を更新
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
以下のFBに基づいて修正を実施。
https://www.notion.so/goodpatch-design-div/Tag-3ab1d525cb6747b2b9c8215816e8bf7a?v=22aa8f8826858042bf3d000ce653a7a6&source=copy_link
以下のFBは対応不要のためスルー
変更内容
動作確認
pnpm lintを実行pnpm build:packageを実行してパッケージが正常にビルドされることを確認pnpm testを実行してテストがすべて成功することを確認関連 Issue