feat: add Tag component from design system and rename SquareChip (#10650)

## Summary
- Add `Tag` component based on Figma design system with CVA variants
  - `square` (rounded-sm) and `rounded` (pill) shapes
- `overlay` shape for tags on image thumbnails (pending Figma
confirmation)
  - `default`, `unselected`, `selected` states matching Figma
  - `removable` prop with X close button and `remove` event
  - Icon slot support
- Rename `SquareChip` → `Tag` across all consumers
(WorkflowTemplateSelectorDialog, SampleModelSelector)
- Update all Storybook stories (Tag, Card, BaseModalLayout)
- Delete old `SquareChip.vue` and `SquareChip.stories.ts`
- Add E2E screenshot test for template card overlay tags

Foundation for migrating PrimeVue `Chip` and `Tag` components in
follow-up PRs.

## Test plan
- [x] Unit tests pass (5 tests: rendering, removable, icon slot)
- [x] E2E screenshot test: template cards with overlay tags
- [x] Typecheck passes
- [x] Lint passes
- [ ] Verify Tag stories render correctly in Storybook
- [ ] Verify WorkflowTemplateSelectorDialog tags display correctly
- [ ] Verify SampleModelSelector chips display correctly

## Follow-up work
- **PR 4** (#10673): Migrate PrimeVue `Chip` → custom `Tag`
(SearchFilterChip, NodeSearchItem, DownloadItem)
- **PR 5** (planned): Migrate PrimeVue `Tag` → custom `Tag` (~14 files)

Author: dante01yoon

browser_tests/tests/templates.spec.ts

@@ -2,6 +2,7 @@ import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 async function checkTemplateFileExists(
   page: Page,
@@ -345,4 +346,71 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       )
     }
   )
+
+  test(
+    'template cards display overlay tags correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        const response = [
+          {
+            moduleName: 'default',
+            title: 'Test Templates',
+            type: 'image',
+            templates: [
+              {
+                name: 'tagged-template',
+                title: 'Tagged Template',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template with tags.',
+                tags: ['Relight', 'Image Edit']
+              },
+              {
+                name: 'no-tags',
+                title: 'No Tags',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template without tags.'
+              }
+            ]
+          }
+        ]
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(response),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.page.route('**/templates/**.webp', async (route) => {
+        await route.fulfill({
+          status: 200,
+          path: 'browser_tests/assets/example.webp',
+          headers: {
+            'Content-Type': 'image/webp',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      const taggedCard = comfyPage.page.getByTestId(
+        TestIds.templates.workflowCard('tagged-template')
+      )
+      await expect(taggedCard).toBeVisible({ timeout: 5000 })
+      await expect(taggedCard.getByText('Relight')).toBeVisible()
+      await expect(taggedCard.getByText('Image Edit')).toBeVisible()
+
+      const templateGrid = comfyPage.page.getByTestId(TestIds.templates.content)
+      await expect(templateGrid).toHaveScreenshot(
+        'template-cards-with-overlay-tags.png'
+      )
+    }
+  )
 })

browser_tests/tests/templates.spec.ts-snapshots/template-cards-with-overlay-tags-chromium-linux.png

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import SquareChip from '../chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import CardBottom from './CardBottom.vue'
 import CardContainer from './CardContainer.vue'
 import CardDescription from './CardDescription.vue'
@@ -174,7 +174,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardTitle,
     CardDescription,
     Button,
-    SquareChip
+    Tag
   },
   setup() {
     const favorited = ref(false)
@@ -218,7 +218,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showTopLeft" #top-left>
-              <SquareChip label="Featured" />
+              <Tag label="Featured" />
             </template>
             
             <template v-if="args.showTopRight" #top-right>
@@ -238,17 +238,17 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showBottomLeft" #bottom-left>
-              <SquareChip label="New" />
+              <Tag label="New" />
             </template>
             
             <template v-if="args.showBottomRight" #bottom-right>
-              <SquareChip v-if="args.showFileType" :label="args.fileType" />
-              <SquareChip v-if="args.showFileSize" :label="args.fileSize" />
-              <SquareChip v-for="tag in args.tags" :key="tag" :label="tag">
+              <Tag v-if="args.showFileType" :label="args.fileType" />
+              <Tag v-if="args.showFileSize" :label="args.fileSize" />
+              <Tag v-for="tag in args.tags" :key="tag" :label="tag">
                 <template v-if="tag === 'LoRA'" #icon>
                   <i class="icon-[lucide--folder] size-3" />
                 </template>
-              </SquareChip>
+              </Tag>
             </template>
           </CardTop>
         </template>

src/components/card/Card.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Tag from './Tag.vue'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    shape: {
+      control: 'select',
+      options: ['square', 'rounded', 'overlay']
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'unselected', 'selected']
+    },
+    removable: { control: 'boolean' }
+  },
+  args: {
+    label: 'Tag',
+    shape: 'square',
+    state: 'default',
+    removable: false
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Rounded: Story = {
+  args: {
+    label: 'Tag',
+    shape: 'rounded'
+  }
+}
+
+export const Unselected: Story = {
+  args: {
+    label: 'Tag',
+    state: 'unselected'
+  }
+}
+
+export const Removable: Story = {
+  args: {
+    label: 'Tag',
+    removable: true
+  }
+}
+
+export const AllStates: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Square</p>
+          <div class="flex items-center gap-2">
+            <Tag label="Default" />
+            <Tag label="Unselected" state="unselected" />
+            <Tag label="Removable" removable />
+          </div>
+        </div>
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Rounded</p>
+          <div class="flex items-center gap-2">
+            <Tag label="Default" shape="rounded" />
+            <Tag label="Unselected" shape="rounded" state="unselected" />
+            <Tag label="Removable" shape="rounded" removable />
+          </div>
+        </div>
+        <div class="bg-zinc-800 p-2 rounded">
+          <p class="mb-2 text-xs text-muted-foreground">Overlay (on images)</p>
+          <div class="flex items-center gap-2">
+            <Tag label="png" shape="overlay" />
+            <Tag label="1.2 MB" shape="overlay" />
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const TagList: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <Tag label="JavaScript" />
+        <Tag label="TypeScript" />
+        <Tag label="Vue.js" />
+        <Tag label="React" />
+        <Tag label="Node.js" />
+        <Tag label="Python" />
+        <Tag label="Docker" />
+        <Tag label="Kubernetes" />
+      </div>
+    `
+  })
+}

src/components/chip/SquareChip.stories.ts

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import Tag from './Tag.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { g: { remove: 'Remove' } } }
+})
+
+function renderTag(
+  props: {
+    label: string
+    shape?: 'square' | 'rounded'
+    removable?: boolean
+    onRemove?: (...args: unknown[]) => void
+  },
+  options?: { slots?: Record<string, string> }
+) {
+  return render(Tag, {
+    props,
+    global: { plugins: [i18n] },
+    ...options
+  })
+}
+
+describe('Tag', () => {
+  it('renders label text', () => {
+    renderTag({ label: 'JavaScript' })
+    expect(screen.getByText('JavaScript')).toBeInTheDocument()
+  })
+
+  it('does not show remove button by default', () => {
+    renderTag({ label: 'Test' })
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('shows remove button when removable', () => {
+    renderTag({ label: 'Test', removable: true })
+    expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument()
+  })
+
+  it('emits remove event when remove button is clicked', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    renderTag({ label: 'Test', removable: true, onRemove })
+
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(onRemove).toHaveBeenCalledOnce()
+  })
+
+  it('renders icon slot content', () => {
+    renderTag(
+      { label: 'LoRA' },
+      {
+        slots: {
+          icon: '<i data-testid="tag-icon" class="icon-[lucide--folder]" />'
+        }
+      }
+    )
+    expect(screen.getByTestId('tag-icon')).toBeInTheDocument()
+  })
+})