Breadcrumbの修正 - #136
Conversation
- Linkコンポーネントのインポート元を修正 - BreadcrumbLinkコンポーネントのスタイルを簡素化 - BreadcrumbSeparatorコンポーネントの色を更新
- テストデータ定数とヘルパー関数を追加 - 基本的なBreadcrumbのレンダリングテストを追加 - リンク機能のテストを追加 - 区切り文字の機能テストを追加 - アクセシビリティの検証テストを追加 - エッジケースのテストを追加
- BreadcrumbItemのリンクを「Components」から「Link」に変更 - BreadcrumbPageのテキストを「Breadcrumb」から「Current Page」に変更
- Figmaとの接続設定を追加 - 基本的なBreadcrumbナビゲーションの例を実装
- Breadcrumbコンポーネントの説明文を修正
- Figma Code Connectに関するコメントを更新 - `props`のマッピングに関する説明を追加 - `example`関数の更新に関する指示を追加
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Breadcrumbのサポート状況を「✅」に変更
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/components">Components</BreadcrumbLink> |
There was a problem hiding this comment.
これはLinkコンポーネントも同様なのでうまくいったら横展開できればというところなんですが
onClick={(e) => {
e.preventDefault();
action('anchor clicked')(e);
}}
などをして実際の遷移をしないようにしておくと動作確認がしやすそうと思いました
There was a problem hiding this comment.
対応しようとするとStroybookのサンプルコードにもイベントハンドラが表示されますけど、これは致し方なしなんですかね。
There was a problem hiding this comment.
そこのコードはそもそもrender関数がそのまま出ちゃうので参考にだけしてあくまで綺麗なサンプルはドキュメントの方の使用例を見てもらう運用にする、で割と今のフォーマットのままいける気がするのでいいかと思いました🙆♂️
どうしても気になるようであればargsに定義できるようにしておいてそっちで指定したら出なくなるとかあるかも？ですね
- Breadcrumbコンポーネントの使用例をドキュメントに追加しました。
- BreadcrumbコンポーネントにBreadcrumbLinkをサブコンポーネントとして追加しました。
- Breadcrumbリンクにクリックイベントを追加し、アクションをトリガーするように変更 - コードの可読性を向上させるために、リンクの構造を整理
There was a problem hiding this comment.
Pull Request Overview
Updates the Breadcrumb component with style refinements, improved documentation, comprehensive test coverage, and Figma integration. The changes align with design specifications from the referenced Notion document.
- Updated link import to use internal Link component and refined styling
- Restructured tests with helper functions and enhanced coverage for edge cases
- Enhanced Storybook stories with interactive actions and updated 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 |
|---|---|
| src/components/ui/breadcrumb/index.tsx | Updated import, enhanced documentation with usage example, removed hover/focus styles from links, changed separator color |
| src/components/ui/breadcrumb/index.test.tsx | Complete test restructure with helper functions, expanded test coverage, and improved organization |
| src/components/ui/breadcrumb/index.stories.tsx | Added action handlers and updated story content for better interactivity |
| src/components/ui/breadcrumb/index.figma.tsx | New Figma Connect integration file for design system alignment |
| README.md | Updated component status to show Figma Connect completion |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
概要
Notionに基づく修正を実施
https://www.notion.so/goodpatch-design-div/Breadcrumb-fa6ee15111f64147ac40cca104684f34?source=copy_link
変更内容
動作確認
pnpm lintを実行pnpm build:packageを実行してパッケージが正常にビルドされることを確認pnpm testを実行してテストがすべて成功することを確認関連 Issue