From babba3bd1d1f5413ccf71cc5fc24c24051682ca5 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 30 Oct 2023 10:45:26 -0700
Subject: [PATCH] fix(combobox): ensure icon scales are consistent (#8075)

**Related Issue:** #8067

## Summary

Uses `getIconScale` util to set proper scale for placeholder and chevron
icons.
---
 .../src/components/combobox/combobox.scss     |  4 +-
 .../components/combobox/combobox.stories.ts   | 58 +++++++++++++------
 .../src/components/combobox/combobox.tsx      |  8 ++-
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index 388bbd217b1..15c8177f42e 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -150,9 +150,7 @@
 
 .icon-end,
 .icon-start {
-  @apply flex
-    w-4 cursor-pointer
-    items-center;
+  @apply flex cursor-pointer items-center;
 }
 
 .icon-end {
diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index 178a8f5d2aa..ab7675b0d14 100644
--- a/packages/calcite-components/src/components/combobox/combobox.stories.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -497,21 +497,45 @@ export const clearDisabled_TestOnly = (): string => html`
 `;
 
 export const openInAllScales_TestOnly = (): string => html`
-  <calcite-combobox open scale="s">
-    <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
-    <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
-    <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
-  </calcite-combobox>
-  <br />
-  <calcite-combobox open scale="m">
-    <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
-    <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
-    <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
-  </calcite-combobox>
-  <br />
-  <calcite-combobox open scale="l">
-    <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
-    <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
-    <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
-  </calcite-combobox>
+  <div style="display: flex">
+    <calcite-combobox open placeholder="choose a number" scale="s">
+      <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+      <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+      <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+    </calcite-combobox>
+    <br />
+    <calcite-combobox open placeholder="choose a number" scale="m">
+      <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+      <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+      <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+    </calcite-combobox>
+    <br />
+    <calcite-combobox open placeholder="choose a number" scale="l">
+      <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+      <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+      <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+
+export const openWithPlaceholderIconInAllScales_TestOnly = (): string => html`
+  <div style="display: flex">
+    <calcite-combobox open placeholder="choose a number" placeholder-icon="number" scale="s">
+      <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+      <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+      <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+    </calcite-combobox>
+    <br />
+    <calcite-combobox open placeholder="choose a number" placeholder-icon="number" scale="m">
+      <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+      <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+      <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+    </calcite-combobox>
+    <br />
+    <calcite-combobox open placeholder="choose a number" placeholder-icon="number" scale="l">
+      <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+      <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+      <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
 `;
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 92dad0b09d1..5edc5beb2e4 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -66,6 +66,7 @@ import { ComboboxChildElement } from "./interfaces";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
 import { XButton, CSS as XButtonCSS } from "../functional/XButton";
+import { getIconScale } from "../../utils/component";
 
 interface ItemData {
   label: string;
@@ -1294,7 +1295,7 @@ export class Combobox
             class="selected-icon"
             flipRtl={this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl}
             icon={!this.open && selectedItem ? selectedIcon : placeholderIcon}
-            scale="s"
+            scale={getIconScale(this.scale)}
           />
         </span>
       )
@@ -1305,7 +1306,10 @@ export class Combobox
     const { open } = this;
     return (
       <span class="icon-end">
-        <calcite-icon icon={open ? "chevron-up" : "chevron-down"} scale="s" />
+        <calcite-icon
+          icon={open ? "chevron-up" : "chevron-down"}
+          scale={getIconScale(this.scale)}
+        />
       </span>
     );
   }