[Badge] Fix CVA defaultVariants, support ref as prop, and add variants
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 50/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- react, typescript
Direzione di ricerca
Inizia individuando il componente Badge e la relativa configurazione CVA, quindi esamina come sono definiti i suoi variants attuali, i valori predefiniti, il tipo di children e la gestione di ref. Il lavoro è completato quando defaultVariants funziona senza fallback manuali, children può essere omesso, il supporto per ref è coerente e sono disponibili i variants dot/indicator e outline.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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)
- Lingua principale
- TypeScript
- Stelle
- 70
- Fork
- 13
- Merge medio
- 4g 6h
- PR unite (30g)
- 10
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di raystack/apsara
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 75/100
-
Docs: hand-duplicated props tables drift risk, missing a11y sections, no per-component changelog Apertaenhancement global
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
-
bug global
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
Tutte le issue di raystack/apsara
Issue simili
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
-
Crush Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 85/100
catppuccin/catppuccin#3125 ·
-
Add a SECURITY.md Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 90/100
ElementsProject/cln-application#167 · 1 commento · 1 reazione ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
Quantco/pnpm-licenses#17 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100