mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
82242f1b00
## Summary - Rename `text-xxxs`/`text-xxs` to `text-3xs`/`text-2xs` in design system CSS — fixes `tailwind-merge` incorrectly classifying custom font-size utilities as color classes, which clobbered text color - Add `Badge` component with updated severity colors matching Figma design (white text on colored backgrounds) - Add Badge stories under `Components/Badges/Badge` - Add unit tests including twMerge regression coverage Split from #10438 per review feedback — this PR contains the foundational Badge component; migration of consumers follows in a separate PR. ## Test plan - [x] Unit tests pass (`Badge.test.ts` — 12 tests) - [x] Typecheck passes - [x] Lint passes - [ ] Verify Badge stories render correctly in Storybook - [ ] Verify existing components using `text-2xs`/`text-3xs` render unchanged Fixes #10438 (partial) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10580-refactor-add-Badge-component-and-fix-twMerge-font-size-detection-32f6d73d3650810dae7cd0d4af67fd1c) by [Unito](https://www.unito.io)
67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { MenuItem } from 'primevue/menuitem'
|
|
import {
|
|
DropdownMenuItem,
|
|
DropdownMenuPortal,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger
|
|
} from 'reka-ui'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { toValue } from 'vue'
|
|
|
|
const { t } = useI18n()
|
|
|
|
defineOptions({
|
|
inheritAttrs: false
|
|
})
|
|
|
|
defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
|
|
</script>
|
|
<template>
|
|
<DropdownMenuSeparator
|
|
v-if="item.separator"
|
|
class="m-1 h-px bg-border-subtle"
|
|
/>
|
|
<DropdownMenuSub v-else-if="item.items">
|
|
<DropdownMenuSubTrigger
|
|
:class="itemClass"
|
|
:disabled="toValue(item.disabled) ?? !item.items?.length"
|
|
>
|
|
{{ item.label }}
|
|
<i class="ml-auto icon-[lucide--chevron-right]" />
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent
|
|
:class="contentClass"
|
|
:side-offset="2"
|
|
:align-offset="-5"
|
|
>
|
|
<DropdownItem
|
|
v-for="(subitem, index) in item.items"
|
|
:key="toValue(subitem.label) ?? index"
|
|
:item="subitem"
|
|
:item-class
|
|
:content-class
|
|
/>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuItem
|
|
v-else
|
|
:class="itemClass"
|
|
:disabled="toValue(item.disabled) ?? !item.command"
|
|
@select="item.command?.({ originalEvent: $event, item })"
|
|
>
|
|
<i class="size-5 shrink-0" :class="item.icon" />
|
|
<div class="mr-auto truncate" v-text="item.label" />
|
|
<i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
|
|
<div
|
|
v-else-if="item.new"
|
|
class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-2xs leading-none font-bold"
|
|
v-text="t('contextMenu.new')"
|
|
/>
|
|
</DropdownMenuItem>
|
|
</template>
|