feat(chip): deprecate pressed in favor of press (#11389)

**Related Issue:** #10832 #7180 ## Summary Deprecate `--calcite-chip-select-icon-color-pressed` token. Add `--calcite-chip-select-icon-color-press: Specifies the component's selection element icon color when active.`
Esri · Feb 18, 2025 · ebe29dc · ebe29dc
1 parent a8b66a0
commit ebe29dc
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -289,7 +289,7 @@ describe("calcite-chip", () => {
       });
       describe("selected", () => {
         themed(html`<calcite-chip selection-mode="single" selected>Layers</calcite-chip>`, {
-          "--calcite-chip-select-icon-color-pressed": {
+          "--calcite-chip-select-icon-color-press": {
             shadowSelector: `.${CSS.selectIcon}`,
             targetProp: "color",
           },
@@ -305,5 +305,14 @@ describe("calcite-chip", () => {
         },
       });
     });
+
+    describe("deprecated", () => {
+      themed(html`<calcite-chip selection-mode="single" selected>Layers</calcite-chip>`, {
+        "--calcite-chip-select-icon-color-pressed": {
+          shadowSelector: `.${CSS.selectIcon}`,
+          targetProp: "color",
+        },
+      });
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
@@ -5,12 +5,13 @@
  *
  * @prop --calcite-chip-background-color: Specifies the component's background color.
  * @prop --calcite-chip-border-color: Specifies the component's border color.
+ * @prop --calcite-chip-close-icon-color: Specifies the component's close element icon color.
  * @prop --calcite-chip-corner-radius: Specifies the component's corner radius.
- * @prop --calcite-chip-text-color: Specifies the component's text color.
  * @prop --calcite-chip-icon-color: Specifies the component's icon color.
- * @prop --calcite-chip-close-icon-color: Specifies the component's close element icon color.
+ * @prop --calcite-chip-select-icon-color-press: Specifies the component's selection element icon color when active.
+ * @prop --calcite-chip-select-icon-color-pressed: [Deprecated] Use `--calcite-chip-select-icon-color-press`. Specifies the component's selection element icon color when active.
  * @prop --calcite-chip-select-icon-color: Specifies the component's selection element icon color.
- * @prop --calcite-chip-select-icon-color-pressed: Specifies the component's selection element icon color when active.
+ * @prop --calcite-chip-text-color: Specifies the component's text color.
  *
  */
 
@@ -475,7 +476,10 @@
     position: relative;
     visibility: visible;
     opacity: var(--calcite-opacity-half, 0.5);
-    color: var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor));
+    color: var(
+      --calcite-chip-select-icon-color-press,
+      var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor))
+    );
   }
 }
 

diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
@@ -3,12 +3,12 @@ import { html } from "../../support/formatting";
 export const chipTokens = {
   calciteChipBackgroundColor: "",
   calciteChipBorderColor: "",
+  calciteChipCloseIconColor: "",
   calciteChipCornerRadius: "",
-  calciteChipTextColor: "",
   calciteChipIconColor: "",
-  calciteChipCloseIconColor: "",
+  calciteChipSelectIconColorPress: "",
   calciteChipSelectIconColor: "",
-  calciteChipSelectIconColorPressed: "",
+  calciteChipTextColor: "",
 };
 
 export const chips = html`<div>

diff --git a/packages/calcite-components/src/demos/chip.html b/packages/calcite-components/src/demos/chip.html
@@ -96,9 +96,14 @@
       }
 
       .themed-children-card calcite-chip:first-of-type {
-        --calcite-color-foreground-2: rgb(222 239 220);
-        --calcite-color-text-1: var(--calcite-color-status-success);
-        --calcite-icon-color: var(--calcite-color-status-success);
+        --calcite-chip-background-color: rgb(222 239 220);
+        --calcite-chip-border-color: rgb(222 100 100);
+        --calcite-chip-close-icon-color: var(--calcite-color-status-danger);
+        --calcite-chip-corner-radius: 5px;
+        --calcite-chip-icon-color: var(--calcite-color-status-success);
+        --calcite-chip-select-icon-color-press: var(--calcite-color-status-success-press);
+        --calcite-chip-select-icon-color: var(--calcite-color-status-success-hover);
+        --calcite-chip-text-color: var(--calcite-color-status-success);
       }
 
       .themed-children-card calcite-chip:nth-of-type(2) {