mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-02 04:02:20 +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)
49 lines
1.6 KiB
Vue
49 lines
1.6 KiB
Vue
<template>
|
|
<BaseWorkflowsSidebarTab
|
|
:title="$t('linearMode.appModeToolbar.apps')"
|
|
:filter="isAppWorkflow"
|
|
hide-leaf-icon
|
|
:search-subject="$t('linearMode.appModeToolbar.apps')"
|
|
data-testid="apps-sidebar"
|
|
>
|
|
<template #alt-title>
|
|
<span
|
|
class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-2xs text-base-foreground uppercase"
|
|
>
|
|
{{ $t('g.beta') }}
|
|
</span>
|
|
</template>
|
|
<template #empty-state>
|
|
<NoResultsPlaceholder
|
|
button-variant="secondary"
|
|
text-class="text-muted-foreground text-sm"
|
|
:message="
|
|
isAppMode
|
|
? $t('linearMode.appModeToolbar.appsEmptyMessage')
|
|
: `${$t('linearMode.appModeToolbar.appsEmptyMessage')}\n${$t('linearMode.appModeToolbar.appsEmptyMessageAction')}`
|
|
"
|
|
button-icon="icon-[lucide--hammer]"
|
|
:button-label="isAppMode ? undefined : $t('linearMode.buildAnApp')"
|
|
@action="enterAppMode"
|
|
/>
|
|
</template>
|
|
</BaseWorkflowsSidebarTab>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
|
|
import BaseWorkflowsSidebarTab from '@/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue'
|
|
import { useAppMode } from '@/composables/useAppMode'
|
|
import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
|
|
|
|
const { isAppMode, setMode } = useAppMode()
|
|
|
|
function isAppWorkflow(workflow: ComfyWorkflow): boolean {
|
|
return workflow.suffix === 'app.json'
|
|
}
|
|
|
|
function enterAppMode() {
|
|
setMode('app')
|
|
}
|
|
</script>
|