feat(design, design-examples): reposition tag as a filter and selection component (#4566)

xelaint · web-flow · commit 4f02429e06a7 · 2026-07-08T13:48:08.000-04:00
diff --git a/libs/design-examples/tag/src/basic-tag/basic-tag.component.html b/libs/design-examples/tag/src/basic-tag/basic-tag.component.html
@@ -1,4 +1,3 @@
 <daff-tag>
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  In Stock
+  Shoes
 </daff-tag>
diff --git a/libs/design-examples/tag/src/basic-tag/basic-tag.component.ts b/libs/design-examples/tag/src/basic-tag/basic-tag.component.ts
@@ -2,8 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
 
@@ -13,9 +11,6 @@ import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_TAG_COMPONENTS,
-    FaIconComponent,
   ],
 })
-export class BasicTagExampleComponent {
-  faCircleCheck = faCircleCheck;
-}
+export class BasicTagExampleComponent {}
diff --git a/libs/design-examples/tag/src/colorable-tag/colorable-tag.component.html b/libs/design-examples/tag/src/colorable-tag/colorable-tag.component.html
@@ -1,39 +1,31 @@
 <daff-tag>
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Default
+  Category: Shoes
 </daff-tag>
 
 <daff-tag color="primary">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Primary
+  Category: Shoes
 </daff-tag>
 
 <daff-tag color="secondary">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Secondary
+  Category: Shoes
 </daff-tag>
 
 <daff-tag color="tertiary">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Tertiary
+  Category: Shoes
 </daff-tag>
 
 <daff-tag color="dark">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Dark
+  Category: Shoes
 </daff-tag>
 
 <daff-tag color="light">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Light
+  Category: Shoes
 </daff-tag>
 
 <daff-tag color="theme">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Theme
+  Category: Shoes
 </daff-tag>
 
 <daff-tag color="theme-contrast">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Theme Contrast
+  Category: Shoes
 </daff-tag>
diff --git a/libs/design-examples/tag/src/colorable-tag/colorable-tag.component.ts b/libs/design-examples/tag/src/colorable-tag/colorable-tag.component.ts
@@ -2,8 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
 
@@ -14,15 +12,13 @@ import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
     :host {
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 0.5rem;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_TAG_COMPONENTS,
-    FaIconComponent,
   ],
 })
 export class ColorableTagExampleComponent {
-  faCircleCheck = faCircleCheck;
 }
diff --git a/libs/design-examples/tag/src/disabled-tag/disabled-tag.component.html b/libs/design-examples/tag/src/disabled-tag/disabled-tag.component.html
@@ -1,3 +1,3 @@
 <daff-tag [disabled]="true">
-  Brand: Nike
+  Department: Men's
 </daff-tag>
diff --git a/libs/design-examples/tag/src/dismissible-tag/dismissible-tag.component.html b/libs/design-examples/tag/src/dismissible-tag/dismissible-tag.component.html
@@ -1,5 +1,5 @@
 @if (!isHidden) {
-  <daff-tag dismissible (closeTag)="hideTag()">
+  <daff-tag [dismissible]="true" (closeTag)="hideTag()">
     Brand: Nike
   </daff-tag>
 }
diff --git a/libs/design-examples/tag/src/dismissible-tag/dismissible-tag.component.ts b/libs/design-examples/tag/src/dismissible-tag/dismissible-tag.component.ts
@@ -2,8 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
 
@@ -14,12 +12,9 @@ import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_TAG_COMPONENTS,
-    FaIconComponent,
   ],
 })
 export class DismissibleTagExampleComponent {
-  faCircleCheck = faCircleCheck;
-
   isHidden = false;
 
   hideTag() {
diff --git a/libs/design-examples/tag/src/sizable-tag/sizable-tag.component.html b/libs/design-examples/tag/src/sizable-tag/sizable-tag.component.html
@@ -1,19 +1,14 @@
-<daff-tag>
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Default
+<daff-tag [dismissible]="true" size="sm">
+  <fa-icon daffPrefix [icon]="faTag"></fa-icon>
+  Size: S
 </daff-tag>
 
-<daff-tag size="sm">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Small
+<daff-tag [dismissible]="true" size="md">
+  <fa-icon daffPrefix [icon]="faTag"></fa-icon>
+  Size: M
 </daff-tag>
 
-<daff-tag size="md">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Medium
-</daff-tag>
-
-<daff-tag size="lg">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Large
+<daff-tag [dismissible]="true" size="lg">
+  <fa-icon daffPrefix [icon]="faTag"></fa-icon>
+  Size: L
 </daff-tag>
diff --git a/libs/design-examples/tag/src/sizable-tag/sizable-tag.component.ts b/libs/design-examples/tag/src/sizable-tag/sizable-tag.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
+import { faTag } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
 
@@ -25,5 +25,5 @@ import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
   ],
 })
 export class SizableTagExampleComponent {
-  faCircleCheck = faCircleCheck;
+  faTag = faTag;
 }
diff --git a/libs/design-examples/tag/src/statusable-tag/statusable-tag.component.html b/libs/design-examples/tag/src/statusable-tag/statusable-tag.component.html
@@ -1,19 +1,19 @@
 <daff-tag status="warn">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Warn
+  <fa-icon daffPrefix [icon]="faTriangleExclamation"></fa-icon>
+  Low Stock
 </daff-tag>
 
 <daff-tag status="success">
   <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Success
+  In Stock
 </daff-tag>
 
 <daff-tag status="critical">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Critical
+  <fa-icon daffPrefix [icon]="faCircleXmark"></fa-icon>
+  Out of Stock
 </daff-tag>
 
 <daff-tag status="info">
-  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
-  Info
+  <fa-icon daffPrefix [icon]="faCircleInfo"></fa-icon>
+  Pre-Order
 </daff-tag>
diff --git a/libs/design-examples/tag/src/statusable-tag/statusable-tag.component.ts b/libs/design-examples/tag/src/statusable-tag/statusable-tag.component.ts
@@ -3,7 +3,12 @@ import {
   Component,
 } from '@angular/core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCircleCheck,
+  faCircleInfo,
+  faCircleXmark,
+  faTriangleExclamation,
+} from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
 
@@ -25,4 +30,7 @@ import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
 })
 export class StatusableTagExampleComponent {
   faCircleCheck = faCircleCheck;
+  faCircleInfo = faCircleInfo;
+  faCircleXmark = faCircleXmark;
+  faTriangleExclamation = faTriangleExclamation;
 }
diff --git a/libs/design/tag/README.md b/libs/design/tag/README.md
@@ -1,8 +1,8 @@
 # Tag
-Tags are compact visual indicators used to display short pieces of information such as status, categories, or labels.
+Tags are interactive indicators and filters that can be edited or removed, used to represent selections, categories, or applied filters.
 
 ## Overview
-Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container.
+Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container. Tags can be dismissed to remove a selection or filter, making them well suited for filter chips, applied search criteria, and editable selections.
 
 <daff-docs-example-viewer example="basic-tag"></daff-docs-example-viewer>
 
@@ -36,7 +36,7 @@ A tag is composed of a wrapper, an optional prefix, a label, and an optional clo
 - **`<daff-tag>`**: The wrapper component that holds all tag content.
 - **`[daffPrefix]`**: A leading visual, typically an icon, displayed before the label.
 - **Label**: The text content of the tag, projected as a child element.
-- **Close button**: A trailing dismiss button, displayed when `dismissible` is `true`.
+- **Close button**: A trailing remove button, displayed when `dismissible` is `true`.
 
 ## Features
 
@@ -46,7 +46,7 @@ Set `dismissible` to `true` to display a close button. The button emits a `close
 <daff-docs-example-viewer example="dismissible-tag"></daff-docs-example-viewer>
 
 ### Disabled tags
-Set `disabled` to `true` to disable the tag. Disabled tags cannot be dismissed.
+Set `disabled` to `true` to disable the tag. Disabled tags cannot be removed.
 
 <daff-docs-example-viewer example="disabled-tag"></daff-docs-example-viewer>
 
@@ -63,15 +63,19 @@ Use the `color` property to change the color of a tag. Supported colors: `primar
 ### Statuses
 Use the `status` property to convey semantic meaning. Supported statuses: `warn`, `critical`, `info`, `success`.
 
+> **Deprecation notice:**
+>
+> The `status` property is deprecated. Tags are intended for selections, categories, and applied filters, so use the `color` property instead.
+
 <daff-docs-example-viewer example="statusable-tag"></daff-docs-example-viewer>
 
 ## Accessibility
 
 ### Built-in behavior
 - Default tags are not interactive and do not receive focus.
-- Dismissible tags include a focusable close button that can be activated with `Enter` or `Space`.
+- Removable tags include a focusable close button that can be activated with `Enter` or `Space`.
 - Disabled tags expose `aria-disabled="true"` and ignore close button activation.
 
 ### Developer responsibilities
 - Always provide a text label unless the icon is universally understood and accessible.
-- Use the `status` property to communicate semantic meaning, rather than relying on color alone.
+- Communicate meaning through the tag's label or an accessible icon, rather than relying on color alone.
diff --git a/libs/design/tag/src/tag-theme.scss b/libs/design/tag/src/tag-theme.scss
diff --git a/libs/design/tag/src/tag/specs/defaults.spec.ts b/libs/design/tag/src/tag/specs/defaults.spec.ts
diff --git a/libs/design/tag/src/tag/specs/usage.spec.ts b/libs/design/tag/src/tag/specs/usage.spec.ts
diff --git a/libs/design/tag/src/tag/tag.component.html b/libs/design/tag/src/tag/tag.component.html
diff --git a/libs/design/tag/src/tag/tag.component.scss b/libs/design/tag/src/tag/tag.component.scss
diff --git a/libs/design/tag/src/tag/tag.component.ts b/libs/design/tag/src/tag/tag.component.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`@if (!isHidden) {`
`2`		`- <daff-tag dismissible (closeTag)="hideTag()">`
	`2`	`+ <daff-tag [dismissible]="true" (closeTag)="hideTag()">`
`3`	`3`	`Brand: Nike`
`4`	`4`	`</daff-tag>`
`5`	`5`	`}`