Alexander Brown
|
73cfbd9833
|
feat(StatusBadge): add dot mode with CVA variants (#8202)
## Summary
Refactors StatusBadge to use CVA (class-variance-authority) for variant
management and adds a new `dot` mode for label-free status indicators.
## Changes
- **CVA variants** (`statusBadge.variants.ts`): Extracts styling logic
into a CVA config with:
- `severity`: `default` | `secondary` | `warn` | `danger` | `contrast`
- `variant`: `label` (text badge) | `dot` (small indicator) | `circle`
(numeric badge)
- **StatusBadge.vue**: Simplified component using CVA; auto-selects
`dot` variant when no label provided
- **Storybook stories**: Comprehensive coverage of all severities and
variants
## Breaking Changes
- `label` prop is now optional (was required)
- `label` accepts `string | number` (was `string` only)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8202-feat-StatusBadge-add-dot-mode-with-CVA-variants-2ef6d73d36508120beedd04b2c277227)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Amp <amp@ampcode.com>
|
2026-01-20 20:59:45 -08:00 |
|