Merge pull request #276 from qualcomm/olaf/fix/tag-icon-size-selected

feat(tag): support controlled selected state

Author: R-Bower

packages/common/qds-core/src/tag/qds-tag.css

@@ -1,5 +1,5 @@
 .qui-tag__root {
-  > span {
+  > span:not(.qui-tag__icon) {
     text-box: cap alphabetic;
   }
 
@@ -20,6 +20,7 @@
   user-select: none;
 
   --tag-size: var(--sizing-90);
+  --tag-icon-size: var(--sizing-60);
   --tag-radius: var(--border-radius-md);
   --tag-bg-base: transparent;
   --tag-border-base: var(--color-interactive-border-neutral-idle);
@@ -35,7 +36,15 @@
   }
   &[data-size="lg"] {
     --tag-size: var(--sizing-100);
+    --tag-icon-size: var(--sizing-70);
     padding-inline: var(--spacing-80);
+
+    > .qui-tag__icon[data-tag-part="start-icon"] {
+      margin-inline-end: var(--spacing-70);
+    }
+    > .qui-tag__icon[data-tag-part="end-icon"] {
+      margin-inline-start: var(--spacing-70);
+    }
   }
 
   &[data-shape="rounded"] {
@@ -232,23 +241,36 @@
 
 .qui-tag__icon {
   color: var(--icon-color);
+
+  /* For when the icon is declared as a node, i.e. `<Plus />` */
+  .lucide {
+    display: block;
+    height: var(--icon-size);
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    width: var(--icon-size);
+  }
+
   &[data-tag-part="start-icon"] {
     margin-inline-end: var(--spacing-50);
   }
-  &[data-size="lg"][data-tag-part="start-icon"] {
-    margin-inline-end: var(--spacing-70);
-  }
   &[data-tag-part="end-icon"] {
     margin-inline-start: var(--spacing-50);
   }
-  &[data-size="lg"][data-tag-part="end-icon"] {
-    margin-inline-start: var(--spacing-70);
-  }
   .qui-tag__dismiss-button > &[data-tag-part="end-icon"] {
     margin-inline-start: 0;
   }
 }
 
+/*
+ * Overrides .qui-icon__root's own [data-size] mapping when the
+ * icon class lands directly on the SVG.
+ */
+.qui-tag__root .qui-tag__icon[data-tag-part] {
+  --icon-size: var(--tag-icon-size);
+}
+
 .qui-tag__dismiss-button {
   align-items: center;
   background: transparent;
@@ -279,15 +301,4 @@
     pointer-events: none;
     --icon-color: var(--color-utility-disabled-icon);
   }
-
-  &[data-size] {
-    .qui-tag__icon[data-tag-part$="-icon"] {
-      --icon-size: var(--sizing-60);
-    }
-  }
-  &[data-size="lg"] {
-    .qui-tag__icon[data-tag-part$="-icon"] {
-      --icon-size: var(--sizing-70);
-    }
-  }
 }

packages/common/qds-core/src/tag/tag.api.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 
-import {booleanDataAttr} from "@qualcomm-ui/utils/attributes"
+import {booleanAriaAttr, booleanDataAttr} from "@qualcomm-ui/utils/attributes"
 import type {PropNormalizer} from "@qualcomm-ui/utils/machine"
 
 import {tagAnatomy} from "./tag.anatomy"
@@ -22,6 +22,7 @@ export function createQdsTagApi(
   normalize: PropNormalizer,
 ): QdsTagApi {
   const size = props.size || "md"
+  const selected = props.variant === "selectable" && props.selected
 
   function isInteractiveVariant(): boolean {
     return props.variant === "link" || props.variant === "selectable"
@@ -32,7 +33,7 @@ export function createQdsTagApi(
     className: tagClasses.root,
     "data-disabled": booleanDataAttr(props.disabled),
     "data-emphasis": props.emphasis || "outline-brand",
-    "data-selected": booleanDataAttr(props.selected),
+    "data-selected": booleanDataAttr(selected),
     "data-shape": props.shape || props.radius || "square",
     "data-size": size,
     "data-variant": props.variant,
@@ -54,19 +55,25 @@ export function createQdsTagApi(
       return normalize.element({
         ...parts.endIcon,
         className: tagClasses.icon,
-        "data-size": size,
       })
     },
     getRootBindings(): QdsTagRootBindings {
-      return isInteractiveVariant()
-        ? normalize.button({...commonBindings, disabled: props.disabled})
-        : normalize.element(commonBindings)
+      if (!isInteractiveVariant()) {
+        return normalize.element(commonBindings)
+      }
+      return normalize.button({
+        ...commonBindings,
+        "aria-pressed":
+          props.variant === "selectable"
+            ? booleanAriaAttr(selected)
+            : undefined,
+        disabled: props.disabled,
+      })
     },
     getStartIconBindings(): QdsTagStartIconBindings {
       return normalize.element({
         ...parts.startIcon,
         className: tagClasses.icon,
-        "data-size": size,
       })
     },
     isInteractiveVariant,

packages/common/qds-core/src/tag/tag.types.ts

@@ -2,7 +2,10 @@
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 
 import type {AnatomyPart, AnatomyPartName} from "@qualcomm-ui/utils/anatomy"
-import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes"
+import type {
+  BooleanAriaAttr,
+  BooleanDataAttr,
+} from "@qualcomm-ui/utils/attributes"
 
 import type {tagAnatomy} from "./tag.anatomy"
 import type {tagClasses} from "./tag.classes"
@@ -98,6 +101,7 @@ export interface QdsTagSpanRootBindings extends Part<"root"> {
 }
 
 export interface QdsTagButtonRootBindings extends Part<"root"> {
+  "aria-pressed"?: BooleanAriaAttr
   className: TagClasses["root"]
   "data-disabled": BooleanDataAttr
   "data-emphasis": QdsTagEmphasis
@@ -113,12 +117,10 @@ export type QdsTagRootBindings =
 
 export interface QdsTagStartIconBindings extends Part<"startIcon"> {
   className: TagClasses["icon"]
-  "data-size": QdsTagSize
 }
 
 export interface QdsTagEndIconBindings extends Part<"endIcon"> {
   className: TagClasses["icon"]
-  "data-size": QdsTagSize
 }
 
 export interface QdsTagDismissButtonBindings extends Part<"dismissButton"> {

packages/debug-apps/angular-csr/src/app/components/tag.ts

@@ -1,5 +1,6 @@
 import {Component} from "@angular/core"
 
+import {TagControlledDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-controlled-demo"
 import {TagEmphasisDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-emphasis-demo"
 import {TagIconsDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-icons-demo"
 import {TagShapeDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-shape-demo"
@@ -9,6 +10,7 @@ import {TagVariantsDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/
 
 @Component({
   imports: [
+    TagControlledDemo,
     TagEmphasisDemo,
     TagIconsDemo,
     TagShapeDemo,
@@ -19,6 +21,12 @@ import {TagVariantsDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/
   selector: "app-tag",
   template: `
     <div class="container">
+      <div class="section">
+        <h2 class="section-title">Controlled</h2>
+        <div class="demo-container">
+          <tag-controlled-demo />
+        </div>
+      </div>
       <div class="section">
         <h2 class="section-title">Emphasis</h2>
         <div class="demo-container">

packages/debug-apps/angular-ssr/src/app/components/tag.ts

@@ -1,5 +1,6 @@
 import {Component} from "@angular/core"
 
+import {TagControlledDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-controlled-demo"
 import {TagEmphasisDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-emphasis-demo"
 import {TagIconsDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-icons-demo"
 import {TagShapeDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/tag-shape-demo"
@@ -9,6 +10,7 @@ import {TagVariantsDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/
 
 @Component({
   imports: [
+    TagControlledDemo,
     TagEmphasisDemo,
     TagIconsDemo,
     TagShapeDemo,
@@ -19,6 +21,12 @@ import {TagVariantsDemo} from "@qualcomm-ui/angular-docs/components+/tag+/demos/
   selector: "app-tag",
   template: `
     <div class="container">
+      <div class="section">
+        <h2 class="section-title">Controlled</h2>
+        <div class="demo-container">
+          <tag-controlled-demo />
+        </div>
+      </div>
       <div class="section">
         <h2 class="section-title">Emphasis</h2>
         <div class="demo-container">

packages/docs/angular-docs/src/routes/components+/tag+/_tag.mdx

@@ -24,10 +24,7 @@ import {TagDirective} from "@qualcomm-ui/angular/tag"
 ### Icons
 
 ::: terms
-leading icon
-trailing icon
-prefix
-suffix
+leading icon, trailing icon, prefix, suffix
 :::
 
 Icons are supplied using the [startIcon](./#startIcon) and [endIcon](./#endIcon) properties.
@@ -37,9 +34,7 @@ Icons are supplied using the [startIcon](./#startIcon) and [endIcon](./#endIcon)
 ### Variants
 
 ::: terms
-clickable
-removable
-closable
+clickable, removable, closable
 :::
 
 Choose from three [variants](./#variant): `link`, `selectable` and `dismissable`.
@@ -49,6 +44,16 @@ The `dismissable` variant and tags without a variant are non-interactive and sho
 
 <QdsDemo name="TagVariantsDemo" />
 
+### Controlled State
+
+::: terms
+signal, state management, two-way binding
+:::
+
+Set the initial value using the [defaultSelected](./#defaultSelected) input, or use the [selected](./#selected) input together with the [selectedChange](./#selectedChange) output to control the value manually. The pair supports `[(selected)]` two-way binding. Only applicable when [variant](./#variant) is `selectable`.
+
+<QdsDemo name="TagControlledDemo" />
+
 ### Colors
 
 ::: terms
@@ -62,9 +67,7 @@ Control the visual emphasis with different colors via the [emphasis](./#emphasis
 ### Sizes
 
 ::: terms
-small
-medium
-large
+small, medium, large
 :::
 
 Choose from three [sizes](./#size): `sm`, `md` and `lg`. The default size is `md`.

packages/docs/angular-docs/src/routes/components+/tag+/demos/tag-controlled-demo.ts

@@ -0,0 +1,28 @@
+import {Component, signal} from "@angular/core"
+import {Check, Plus} from "lucide-angular"
+
+import {TagDirective} from "@qualcomm-ui/angular/tag"
+import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
+
+@Component({
+  imports: [TagDirective],
+  providers: [provideIcons({Check, Plus})],
+  selector: "tag-controlled-demo",
+  template: `
+    <div class="flex flex-col items-start gap-2">
+      <!-- preview -->
+      <button
+        q-tag
+        variant="selectable"
+        [startIcon]="selected() ? 'Check' : 'Plus'"
+        [(selected)]="selected"
+      >
+        {{ selected() ? "Subscribed" : "Subscribe" }}
+      </button>
+      <!-- preview -->
+    </div>
+  `,
+})
+export class TagControlledDemo {
+  readonly selected = signal<boolean>(false)
+}

packages/docs/react-docs/src/routes/components+/tag+/_tag.mdx

@@ -22,10 +22,7 @@ import {Tag} from "@qualcomm-ui/react/tag"
 ### Icons
 
 ::: terms
-leading icon
-trailing icon
-prefix
-suffix
+leading icon, trailing icon, prefix, suffix
 :::
 
 Icons are supplied using the [startIcon](./#startIcon) and [endIcon](./#endIcon) props.
@@ -35,15 +32,27 @@ Icons are supplied using the [startIcon](./#startIcon) and [endIcon](./#endIcon)
 ### Variants
 
 ::: terms
-clickable
-removable
-closable
+clickable, removable, closable
 :::
 
 Choose from three [variants](./#variant): `link`, `selectable` and `dismissable`.
 
 <Demo name="TagVariantsDemo" component={demos.TagVariantsDemo} />
 
+### Controlled State
+
+::: terms
+useState, state management, two-way binding
+:::
+
+Set the initial value using the [defaultSelected](./#defaultSelected) prop, or use [selected](./#selected) and [onSelectedChange](./#onSelectedChange) to control the value manually. These props follow our [controlled state](/patterns/controlled-state) pattern. Only applicable when [variant](./#variant) is `selectable`.
+
+<Demo
+  expanded
+  name="TagControlledDemo"
+  component={demos.TagControlledDemo}
+/>
+
 ### Colors
 
 ::: terms
@@ -57,9 +66,7 @@ Control the visual emphasis with different colors via the [emphasis](./#emphasis
 ### Sizes
 
 ::: terms
-small
-medium
-large
+small, medium, large
 :::
 
 Choose from three [sizes](./#size): `sm`, `md` and `lg`. The default size is `md`.

packages/docs/react-docs/src/routes/components+/tag+/demos/index.ts

@@ -1,3 +1,4 @@
+export * from "./tag-controlled-demo"
 export * from "./tag-emphasis-demo"
 export * from "./tag-icons-demo"
 export * from "./tag-shape-demo"