fix(combobox): ensure icon scales are consistent (#8075)

**Related Issue:** #8067 ## Summary Uses `getIconScale` util to set proper scale for placeholder and chevron icons.
Esri · Oct 30, 2023 · babba3b · babba3b
1 parent f6d6d35
commit babba3b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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>
     );
   }