fix(input-date-picker): update the focus and hover chevron icon color (…

…#9146) **Related Issue:** [7712](#7712) ### Summary This updates `input-date-picker` chevron colors to be `--calcite-color-text-3` when idle and `--calcite-color-text-1` when hovered or pressed.
Esri · Apr 23, 2024 · ca895e9 · ca895e9
1 parent bdd19c7
commit ca895e9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -37,6 +37,18 @@
 
 .input-wrapper {
   @apply relative;
+
+  .chevron-icon {
+    color: var(--calcite-color-text-3);
+  }
+
+  &:focus-within,
+  &:active,
+  &:hover {
+    .chevron-icon {
+      color: var(--calcite-color-text-1);
+    }
+  }
 }
 
 .toggle-icon {

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -681,6 +681,7 @@ export class InputDatePicker
       // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
       <span class={CSS.toggleIcon} tabIndex={-1}>
         <calcite-icon
+          class={CSS.chevronIcon}
           icon={open ? "chevron-up" : "chevron-down"}
           scale={getIconScale(this.scale)}
         />

diff --git a/packages/calcite-components/src/components/input-date-picker/resources.ts b/packages/calcite-components/src/components/input-date-picker/resources.ts
@@ -12,4 +12,5 @@ export const CSS = {
   menuActive: "menu-container--active",
   toggleIcon: "toggle-icon",
   verticalArrowContainer: "vertical-arrow-container",
+  chevronIcon: "chevron-icon",
 };