feat(chip): enhance component's interactivity states (#11538)

**Related Issue:** [#10005](#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`.
Esri · Feb 15, 2025 · fcc129a · fcc129a
1 parent 22d5448
commit fcc129a
Show file tree

Hide file tree

Showing 2 changed files with 165 additions and 0 deletions.
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
@@ -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
@@ -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 */;