fix(combobox): avoid inline-start padding on combobox label when icon…

… is displayed (#8672) **Related Issue:** #8396 ## Summary This fixes a spacing regression introduced in #7912.
Esri · Feb 15, 2024 · 06ec437 · 06ec437
1 parent 416b338
commit 06ec437
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -142,12 +142,7 @@
 
 .input--icon {
   padding-block: 0;
-  padding-inline: var(--calcite-combobox-item-spacing-unit-s);
-}
-
-:host([scale="m"]) .input--icon,
-:host([scale="l"]) .input--icon {
-  padding-inline: 0.25rem;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .input-wrap {

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1520,7 +1520,18 @@ export class Combobox
     );
   }
 
-  renderInput(): VNode {
+  private get showingInlineIcon(): boolean {
+    const { placeholderIcon, selectionMode, selectedItems, open } = this;
+    const selectedItem = selectedItems[0];
+    const selectedIcon = selectedItem?.icon;
+    const singleSelectionMode = isSingleLike(selectionMode);
+
+    return !open && selectedItem
+      ? !!selectedIcon && singleSelectionMode
+      : !!placeholderIcon && (!selectedItem || singleSelectionMode);
+  }
+
+  private renderInput(): VNode {
     const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
     const single = isSingleLike(selectionMode);
     const selectedItem = selectedItems[0];
@@ -1554,7 +1565,7 @@ export class Combobox
             "input--single": true,
             "input--transparent": this.activeChipIndex > -1,
             "input--hidden": showLabel,
-            "input--icon": !!this.placeholderIcon,
+            "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
           }}
           disabled={disabled}
           id={`${inputUidPrefix}${guid}`}
@@ -1614,19 +1625,13 @@ export class Combobox
     );
   }
 
-  renderIconStart(): VNode {
-    const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
+  renderSelectedOrPlaceholderIcon(): VNode {
+    const { selectedItems, placeholderIcon, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem?.icon;
-    const singleSelectionMode = isSingleLike(selectionMode);
-
-    const iconAtStart =
-      !this.open && selectedItem
-        ? !!selectedIcon && singleSelectionMode
-        : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
 
     return (
-      iconAtStart && (
+      this.showingInlineIcon && (
         <span class="icon-start">
           <calcite-icon
             class="selected-icon"
@@ -1639,7 +1644,7 @@ export class Combobox
     );
   }
 
-  renderIconEnd(): VNode {
+  renderChevronIcon(): VNode {
     const { open } = this;
     return (
       <span class="icon-end">
@@ -1680,6 +1685,7 @@ export class Combobox
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref={this.setReferenceEl}
           >
+            {this.renderSelectedOrPlaceholderIcon()}
             <div
               class={{
                 "grid-input": true,
@@ -1688,7 +1694,6 @@ export class Combobox
               }}
               ref={this.setChipContainerEl}
             >
-              {this.renderIconStart()}
               {!singleSelectionMode && !singleSelectionDisplay && this.renderChips()}
               {!singleSelectionMode &&
                 !allSelectionDisplay && [
@@ -1714,7 +1719,7 @@ export class Combobox
                 scale={this.scale}
               />
             ) : null}
-            {this.renderIconEnd()}
+            {this.renderChevronIcon()}
           </div>
           <ul
             aria-labelledby={`${labelUidPrefix}${guid}`}