[Badge] Fix CVA defaultVariants, support ref as prop, and add variants
还没有人认领这个 Issue。
评估
- 难度
- 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 小时
- 30 天内合并 PR
- 10
贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 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
相似的 Issue
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs 未关闭
难度 2/5 1-3 小时 新手友好度 70/100
-
Crush 未关闭
难度 1/5 1 小时以内 新手友好度 85/100
catppuccin/catppuccin#3125 ·
-
难度 1/5 1 小时以内 新手友好度 90/100
ElementsProject/cln-application#167 · 1 条评论 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 75/100
Quantco/pnpm-licenses#17 ·
-
难度 2/5 1-3 小时 新手友好度 75/100