fix(combo-box): update the focus and hover chevron icon color (#9187)

**Related Issue:** [#7711](#7711) ### Summary This updates `combo-box` chevron colors to be `--calcite-color-text-3` when idle and `--calcite-color-text-1` when hovered or pressed.
Esri · Apr 24, 2024 · a1317da · a1317da
1 parent 710d1ee
commit a1317da
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -59,6 +59,14 @@
     border-solid;
   padding-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
   padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+
+  &:focus-within,
+  &:active,
+  &:hover {
+    .icon {
+      color: var(--calcite-color-text-1);
+    }
+  }
 }
 
 :host(:focus-within) .wrapper,
@@ -178,6 +186,10 @@
 
 .icon-end {
   @apply flex-none;
+
+  .icon {
+    color: var(--calcite-color-text-3);
+  }
 }
 
 .floating-ui-container {

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1656,6 +1656,7 @@ export class Combobox
     return (
       <span class="icon-end" key="chevron">
         <calcite-icon
+          class={CSS.icon}
           icon={open ? "chevron-up" : "chevron-down"}
           scale={getIconScale(this.scale)}
         />

diff --git a/packages/calcite-components/src/components/combobox/resources.ts b/packages/calcite-components/src/components/combobox/resources.ts
@@ -8,4 +8,5 @@ export const CSS = {
   selectionDisplayFit: "selection-display-fit",
   selectionDisplaySingle: "selection-display-single",
   listContainer: "list-container",
+  icon: "icon",
 };