From 8ca5d004d4b7b0ab3472c203c04d5d7624343292 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 27 Oct 2023 13:08:57 -0700
Subject: [PATCH 1/4] fix(combobox): ensure icon scales are consistent

---
 .../src/components/combobox/combobox.tsx                  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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>
     );
   }

From 2e51d0bf3a0cdad336b9123b6363d79c29ce4318 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 27 Oct 2023 15:06:04 -0700
Subject: [PATCH 2/4] update scale stories to cover icon scales

---
 .../src/components/combobox/combobox.stories.ts             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index 178a8f5d2aa..20a6abf6caf 100644
--- a/packages/calcite-components/src/components/combobox/combobox.stories.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -497,19 +497,19 @@ export const clearDisabled_TestOnly = (): string => html`
 `;
 
 export const openInAllScales_TestOnly = (): string => html`
-  <calcite-combobox open scale="s">
+  <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 scale="m">
+  <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 scale="l">
+  <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>

From f808a2aa32d7b7397c93ae73d4d66322b8f4e7eb Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 27 Oct 2023 15:20:59 -0700
Subject: [PATCH 3/4] remove fixed width set on internal icons

---
 .../calcite-components/src/components/combobox/combobox.scss  | 4 +---
 1 file changed, 1 insertion(+), 3 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 {

From 2b4c41948ba0717427258a857d4b25231907247d Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 30 Oct 2023 09:14:54 -0700
Subject: [PATCH 4/4] improve open stories

---
 .../components/combobox/combobox.stories.ts   | 58 +++++++++++++------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index 20a6abf6caf..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 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 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>
 `;