From 5887bc6089292fb2b1873d4dba344ad7f1b4f53e Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Wed, 12 Feb 2025 12:19:14 -0800
Subject: [PATCH 1/4] feat(chip): enhance component's interactivity states

---
 .../src/components/chip/chip.scss             | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)

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 */;

From 4508fecfe7014ac28f61fca3cd4a70b3157de85a Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Thu, 13 Feb 2025 16:07:46 -0800
Subject: [PATCH 2/4] feat(chip): add interactivity stories

---
 .../chip-group/chip-group.stories.ts          | 76 +++++++++++++++++++
 1 file changed, 76 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..75cca029728 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_TestOnly = (): string => html`
+  <div style="width:500px; max-width:100%; background-color:white; padding:100px">
+    <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>
+`;

From 0f44d6436491c9c1ac583b7d1d21f65d05e1e16e Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Fri, 14 Feb 2025 14:15:41 -0800
Subject: [PATCH 3/4] feat(chip): remove _TestOnly from screenshot test

---
 .../src/components/chip-group/chip-group.stories.ts             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 75cca029728..6a68e472dd8 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
@@ -106,7 +106,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
 
 darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };
 
-export const interactivityStates_TestOnly = (): string => html`
+export const interactivityStates = (): string => html`
   <div style="width:500px; max-width:100%; background-color:white; padding:100px">
     <h2>appearance="solid" & kind="neutral"</h2>
     <calcite-chip-group selection-mode="single">

From a9cf93e34797997e204cc3a82e1eb53ed34e79f9 Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Fri, 14 Feb 2025 14:47:44 -0800
Subject: [PATCH 4/4] feat(chip): remove snapshot test inline styles

---
 .../src/components/chip-group/chip-group.stories.ts             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 6a68e472dd8..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
@@ -107,7 +107,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
 darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };
 
 export const interactivityStates = (): string => html`
-  <div style="width:500px; max-width:100%; background-color:white; padding:100px">
+  <div>
     <h2>appearance="solid" & kind="neutral"</h2>
     <calcite-chip-group selection-mode="single">
       <calcite-chip appearance="solid" kind="neutral" value="forest">Forest</calcite-chip>