fix(combobox): update placeholder-icon color (#9956)

**Related Issue:** #9935 ## Summary This updates the placeholder's icon color to be consistent with other components.
Esri · Aug 5, 2024 · d916ca4 · d916ca4
1 parent 5e7f7d3
commit d916ca4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -160,6 +160,10 @@
   padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
+.placeholder-icon {
+  color: var(--calcite-color-text-3);
+}
+
 .input-wrap {
   @apply flex flex-grow items-center;
 }

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1702,17 +1702,21 @@ export class Combobox
   }
 
   renderSelectedOrPlaceholderIcon(): VNode {
-    const { selectedItems, placeholderIcon, placeholderIconFlipRtl } = this;
+    const { open, placeholderIcon, placeholderIconFlipRtl, selectedItems } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem?.icon;
+    const showPlaceholder = placeholderIcon && (open || !selectedItem);
 
     return (
       this.showingInlineIcon && (
         <span class="icon-start" key="selected-placeholder-icon">
           <calcite-icon
-            class="selected-icon"
-            flipRtl={this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl}
-            icon={!this.open && selectedItem ? selectedIcon : placeholderIcon}
+            class={{
+              [CSS.selectedIcon]: !showPlaceholder,
+              [CSS.placeholderIcon]: showPlaceholder,
+            }}
+            flipRtl={showPlaceholder ? placeholderIconFlipRtl : selectedItem.iconFlipRtl}
+            icon={showPlaceholder ? placeholderIcon : selectedIcon}
             scale={getIconScale(this.scale)}
           />
         </span>

diff --git a/packages/calcite-components/src/components/combobox/resources.ts b/packages/calcite-components/src/components/combobox/resources.ts
@@ -9,4 +9,6 @@ export const CSS = {
   selectionDisplaySingle: "selection-display-single",
   listContainer: "list-container",
   icon: "icon",
+  placeholderIcon: "placeholder-icon",
+  selectedIcon: "selected-icon",
 };