mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
73cfbd9833
## 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>
27 lines
812 B
TypeScript
27 lines
812 B
TypeScript
import type { VariantProps } from 'cva'
|
|
import { cva } from 'cva'
|
|
|
|
export const statusBadgeVariants = cva({
|
|
base: 'inline-flex items-center justify-center rounded-full',
|
|
variants: {
|
|
severity: {
|
|
default: 'bg-primary-background text-base-foreground',
|
|
secondary: 'bg-secondary-background text-base-foreground',
|
|
warn: 'bg-warning-background text-base-background',
|
|
danger: 'bg-destructive-background text-white',
|
|
contrast: 'bg-base-foreground text-base-background'
|
|
},
|
|
variant: {
|
|
label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
|
|
dot: 'size-2',
|
|
circle: 'size-3.5 text-xxxs font-semibold'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
severity: 'default',
|
|
variant: 'label'
|
|
}
|
|
})
|
|
|
|
export type StatusBadgeVariants = VariantProps<typeof statusBadgeVariants>
|