From a1317dab65a2bea5634656b46af63c45a1281443 Mon Sep 17 00:00:00 2001 From: Abraham Preciado Morales Date: Wed, 24 Apr 2024 13:37:25 -0700 Subject: [PATCH] fix(combo-box): update the focus and hover chevron icon color (#9187) **Related Issue:** [#7711](https://github.com/Esri/calcite-design-system/issues/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. --- .../src/components/combobox/combobox.scss | 12 ++++++++++++ .../src/components/combobox/combobox.tsx | 1 + .../src/components/combobox/resources.ts | 1 + 3 files changed, 14 insertions(+) diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index acc9442ac23..03ceb1e1240 100644 --- 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 index 07bb607ef1a..42609223fee 100644 --- 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 ( diff --git a/packages/calcite-components/src/components/combobox/resources.ts b/packages/calcite-components/src/components/combobox/resources.ts index f5e0b3175e0..8559b6dce78 100644 --- 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", };