[Badge] Fix CVA defaultVariants, support ref as prop, and add variants
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 50/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
調査の方向性
まず Badge コンポーネントとその CVA 設定を見つけ、現在の variants、デフォルト値、children の型、ref の扱いがどのように定義されているかを確認します。defaultVariants が手動のフォールバックなしで動作し、children を省略でき、ref のサポートが一貫しており、dot/indicator と outline の variants が利用可能になれば、作業は完了です。
索引モデルが issue の本文から書いたものです。
説明
Summary
Improvements to the Badge component to fix a CVA configuration bug, improve component API consistency, and add flexibility.
Improvements
1. Fix defaultVariants placement in CVA
defaultVariants is incorrectly nested inside variants instead of being a sibling. CVA's defaults aren't working — the component only works because of manual fallbacks in the destructuring (variant = 'accent').
3. Make children optional
The type mandates children: ReactNode but a badge could be icon-only or dot-only.
5. Add dot/indicator variant
Common badge pattern for notification dots (no text, just a colored circle).
6. Add outline variant
Many design systems include an outline/bordered badge variant alongside solid and soft.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Replace hardcoded CSS values with design tokens (#672)
- Forward HTML attributes (#674)
- 主要言語
- TypeScript
- スター
- 70
- フォーク
- 13
- 平均マージ
- 4日 6時間
- マージ済み PR（30日）
- 10
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
raystack/apsara のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 3/5 1〜2日 初心者へのやさしさ 75/100
-
Docs: hand-duplicated props tables drift risk, missing a11y sections, no per-component changelog オープンenhancement global
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
-
bug global
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
raystack/apsara の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
mksglu/context-mode#1200 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
anthropics/claude-code#96687 ·
-
good first issue
難易度 1/5 1時間未満 初心者へのやさしさ 95/100
AOSSIE-Org/DebateAI#582 · コメント 2 件 ·