From fcc129acfb046199a93c5be87870c426343507bc Mon Sep 17 00:00:00 2001
From: Abraham Preciado Morales <apreciado@esri.com>
Date: Fri, 14 Feb 2025 16:43:14 -0800
Subject: [PATCH] feat(chip): enhance component's interactivity states (#11538)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:**
[#10005](https://github.com/Esri/calcite-design-system/issues/10005)

## Summary

- Update `chip`'s interactivity states for `chip-group`'s with selection
modes.

- `appearance=“solid” kind=“neutral”`:
- Update `hover` `background-color` to `--calcite-color-foreground-3`.
    -  Update `active` `background-color` to `--calcite-color-border-3`.
- `appearance=“solid” kind=“inverse”`:
- Update `hover` `background-color` to `--calcite-color-inverse-hover`.
- Update `active` `background-color` to `--calcite-color-inverse-press`.
- `appearance=“solid” kind=“brand”`:
- Update `hover` `background-color` to `--calcite-color-brand-hover`.
- Update `active` `background-color` to `--calcite-color-brand-press`.
- `appearance=“outline-fill” kind=“neutral”`:
- Update `hover` `background-color` to `--calcite-color-foreground-2`.
    - Update `hover` `border-color` to `--calcite-color-border-input`.
- Update `active` `background-color` to `--calcite-color-foreground-3`.
    - Update `active` `border-color` to `--calcite-color-text-3`.
- `appearance=“outline-fill” kind=“inverse | brand”`:
- Update `hover` `background-color` to `--calcite-color-foreground-2`.
- Update `active` `background-color` to `--calcite-color-foreground-3`.
- `appearance=“outline” kind=“neutral”`:
- Update `hover` `background-color` to
`--calcite-color-transparent-hover`.
    - Update `hover` `border-color` to `--calcite-color-border-input`.
- Update `active` `background-color` to
`--calcite-color-transparent-press`.
    - Update `active` `border-color` to `--calcite-color-text-3`.
- `appearance=“outline” kind=“inverse | brand”`:
- Update `hover` `background-color` to
`--calcite-color-transparent-hover`.
- Update `active` `background-color` to
`--calcite-color-transparent-press`.
---
 .../chip-group/chip-group.stories.ts          | 76 ++++++++++++++++
 .../src/components/chip/chip.scss             | 89 +++++++++++++++++++
 2 files changed, 165 insertions(+)

diff --git a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
index edb32531002..51983dba760 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
+++ b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
@@ -105,3 +105,79 @@ export const darkThemeRTL_TestOnly = (): string => html`
 `;
 
 darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };
+
+export const interactivityStates = (): string => html`
+  <div>
+    <h2>appearance="solid" & kind="neutral"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="solid" kind="neutral" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="solid" kind="neutral" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="solid" kind="neutral" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="solid" kind="neutral" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="solid" & kind="inverse"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="solid" kind="inverse" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="solid" kind="inverse" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="solid" kind="inverse" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="solid" kind="inverse" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="solid" & kind="brand"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="solid" kind="brand" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="solid" kind="brand" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="solid" kind="brand" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="solid" kind="brand" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline-fill" & kind="neutral"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline-fill" kind="neutral" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="neutral" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="neutral" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="neutral" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline-fill" & kind="inverse"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline-fill" kind="inverse" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="inverse" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="inverse" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="inverse" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline-fill" & kind="brand"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline-fill" kind="brand" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="brand" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="brand" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="brand" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline" & kind="neutral"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline" kind="neutral" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline" kind="neutral" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline" kind="neutral" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline" kind="neutral" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline" & kind="inverse"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline" kind="inverse" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline" kind="inverse" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline" kind="inverse" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline" kind="inverse" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline" & kind="brand"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline" kind="brand" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline" kind="brand" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline" kind="brand" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline" kind="brand" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 025c6b081f3..a85bc1d25a4 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -108,6 +108,95 @@
   opacity: 1;
 }
 
+:host([appearance="solid"]) {
+  &:host([kind="neutral"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-foreground-3);
+      }
+      &:active {
+        background-color: var(--calcite-color-border-3);
+      }
+    }
+  }
+
+  &:host([kind="inverse"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-inverse-hover);
+      }
+      &:active {
+        background-color: var(--calcite-color-inverse-press);
+      }
+    }
+  }
+
+  &:host([kind="brand"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-brand-hover);
+      }
+      &:active {
+        background-color: var(--calcite-color-brand-press);
+      }
+    }
+  }
+}
+
+:host([appearance="outline-fill"]) {
+  &:host([kind="neutral"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-foreground-2);
+        border-color: var(--calcite-color-border-input);
+      }
+      &:active {
+        background-color: var(--calcite-color-foreground-3);
+        border-color: var(--calcite-color-text-3);
+      }
+    }
+  }
+
+  &:host([kind="inverse"]) .container,
+  &:host([kind="brand"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-foreground-2);
+      }
+      &:active {
+        background-color: var(--calcite-color-foreground-3);
+      }
+    }
+  }
+}
+
+:host([appearance="outline"]) {
+  &:host([kind="neutral"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-transparent-hover);
+        border-color: var(--calcite-color-border-input);
+      }
+      &:active {
+        background-color: var(--calcite-color-transparent-press);
+        border-color: var(--calcite-color-text-3);
+      }
+    }
+  }
+
+  &:host([kind="inverse"]) .container,
+  &:host([kind="brand"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-transparent-hover);
+      }
+      &:active {
+        background-color: var(--calcite-color-transparent-press);
+      }
+    }
+  }
+}
+
 :host([scale="s"]) {
   .container {
     --calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) /* 24px */;