fix(combobox): add chevron icon at end of input regardless of selecti… (

#3143) * fix(combobox): add chevron icon at end of input regardless of selection mode (#3055) * fix(combobox): align the chevron icon to be centered vertically on multiple chips select mode (#3055) * fix(action-bar): get up-to-date master changes * feat(combobox): add additional story for multiple with preselected inputs * fix(combobox): make all the combobox height size consistent scale
Esri · Oct 14, 2021 · 1c8f8c5 · 1c8f8c5
1 parent be1be00
commit 1c8f8c5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/src/components/calcite-combobox/calcite-combobox.scss b/src/components/calcite-combobox/calcite-combobox.scss
@@ -37,13 +37,11 @@
 
 .wrapper {
   @apply flex
-    flex-wrap
     bg-foreground-1
     text-color-1
     focus-base;
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
-  padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l) 0
-    var(--calcite-combobox-item-spacing-unit-l);
+  padding: 0 var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l);
 }
 
 :host(:focus-within) .wrapper,
@@ -56,6 +54,11 @@
   @apply cursor-pointer flex-no-wrap;
 }
 
+.grid-input {
+  @apply flex flex-grow flex-wrap items-center;
+  padding: 0;
+}
+
 .input {
   @apply flex-grow
   font-inherit
@@ -130,6 +133,10 @@
     w-4;
 }
 
+.icon-end {
+  @apply flex-none;
+}
+
 .popper-container {
   @apply w-full;
   @include popperContainer();
@@ -162,8 +169,8 @@
 }
 
 .chip {
-  margin-right: var(--calcite-combobox-item-spacing-unit-s);
-  margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
+  margin: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) var(--calcite-combobox-item-spacing-unit-s)
+    calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
   max-width: 100%;
 }
 

diff --git a/src/components/calcite-combobox/calcite-combobox.stories.ts b/src/components/calcite-combobox/calcite-combobox.stories.ts
@@ -76,6 +76,28 @@ export const Single = (): string => html`
   </div>
 `;
 
+export const Multiple = (): string => html`
+  <div style="width:400px;max-width:100%;background-color:white;padding:100px">
+    <calcite-combobox
+      label="demo combobox"
+      placeholder="${text("placeholder", "placeholder")}"
+      label="${text("label (for screen readers)", "demo")}"
+      selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      ${boolean("disabled", false)}
+      ${boolean("allow-custom-values", false)}
+      max-items="${number("max-items", 0)}"
+    >
+      <calcite-combobox-item value="Trees" text-label="Trees" selected></calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers" selected></calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals"></calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+
 export const NestedItems = (): string => html`
   <div style="width:400px;max-width:100%;background-color:white;padding:100px">
     <calcite-combobox

diff --git a/src/components/calcite-combobox/calcite-combobox.tsx b/src/components/calcite-combobox/calcite-combobox.tsx
@@ -969,12 +969,14 @@ export class CalciteCombobox implements LabelableComponent {
           ref={this.setReferenceEl}
           role="combobox"
         >
-          {this.renderIconStart()}
-          {!single && this.renderChips()}
-          <label class="screen-readers-only" htmlFor={`${guid}-input`} id={labelId}>
-            {label}
-          </label>
-          {this.renderInput()}
+          <div class="grid-input">
+            {this.renderIconStart()}
+            {!single && this.renderChips()}
+            <label class="screen-readers-only" htmlFor={`${guid}-input`} id={labelId}>
+              {label}
+            </label>
+            {this.renderInput()}
+          </div>
           {this.renderIconEnd()}
         </div>
         <ul