Skip to content

Badgeの修正 - #117

Merged
touyou merged 7 commits into
mainfrom
fix/badge
Aug 14, 2025
Merged

Badgeの修正#117
touyou merged 7 commits into
mainfrom
fix/badge

Conversation

@touyou

@touyou touyou commented Jul 28, 2025

Copy link
Copy Markdown
Member

概要

以下の指摘事項をもとに調整

変更内容

  • プロパティの追従
  • テストの修正
  • paddingの修正
  • Figma Connect
  • registry再生成

動作確認

  • pnpm lint を実行
  • pnpm build を実行してプロジェクトが正常にビルドされることを確認
  • pnpm test を実行してテストがすべて成功することを確認

関連 Issue

touyou added 5 commits July 28, 2025 17:48
- Badgeコンポーネントのサイズオプションを更新
- バリエーションの選択肢を追加
- ストーリーの実装をリファクタリング
- バッジの大きさ「lg」のパディングを修正
- 使用例のバリエーションを「status」から「variant」に変更
- Badgeのサイズクラスを修正
- サイズに応じたバリアントのテストを追加
- 不要なテストケースを削除
- テストの可読性を向上
- BadgeコンポーネントをFigmaに接続
- プロパティのマッピングを設定
- コード例をFigmaに表示するための関数を追加
@touyou
touyou requested a review from ore0 July 28, 2025 09:04
@touyou touyou self-assigned this Jul 28, 2025
Copilot AI review requested due to automatic review settings July 28, 2025 09:04
@vercel

vercel Bot commented Jul 28, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Project Deployment Preview Comments Updated (UTC)
sparkle-design Ready Preview Comment Aug 14, 2025 2:00am

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull Request Overview

This PR refactors the Badge component by simplifying the size system, renaming the status prop to variant, and adding Figma Connect integration. The changes streamline the API while maintaining essential functionality.

Key Changes

  • Simplified size system from 7 sizes (x5s, x4s, x3s, x2s, xs, sm, md) to 4 sizes (xs, sm, md, lg)
  • Renamed status prop to variant with values "normal" and "emphasis" instead of "info", "success", and "negative"
  • Added Figma Connect integration for design-to-code workflow
  • Updated registry configuration and documentation

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/components/ui/badge/index.tsx Main component refactoring with simplified size system and variant prop
src/components/ui/badge/index.test.tsx Updated test suite to match new API and size system
src/components/ui/badge/index.stories.tsx Storybook stories updated for new props and proper Story type usage
src/components/ui/badge/index.figma.tsx New Figma Connect integration file
registry.json Registry configuration updates and reordering
public/r/tooltip.json New tooltip component registry entry
public/r/registry.json Public registry configuration updates
public/r/badge.json Badge component registry entry with updated content
README.md Documentation update showing Figma Code Connect implementation

Comment thread src/components/ui/badge/index.tsx Outdated
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

@ore0 ore0 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Badge実装時にも確認した気もしますが、サイズがmd, lgのいずれかかつ、isNumberVisible="true"の場合にStorybook上でラッパーのline-heightの問題?でガタツキが発生しますね。
この問題は解決できると好ましいと思いつつ、対応しないことが好ましい場合はこのままマージしても問題ないと思いました!

Aug-14-2025.00-20-40.mp4

@touyou

touyou commented Aug 14, 2025

Copy link
Copy Markdown
Member Author

調べたんですがどこからこの変化がきているのかはよくわからなかってです汗
とりあえずあくまでStorybook側の問題っぽいのでこのままマージしますね

image image

@touyou
touyou merged commit d4c93a3 into main Aug 14, 2025
3 checks passed
@touyou
touyou deleted the fix/badge branch August 14, 2025 02:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants