fix(combobox): ensure truncated text appears for longer strings when …

…in fixed-width container (#3342) * fix(combobox): ensure text ellipsis displays when nested in small width container * test(combobox): add longer strings for testing truncated text * improve markup to match demo page styles * empty commit try to trigger tests
Esri · Oct 26, 2021 · 1fb83a4 · 1fb83a4
1 parent eb16749
commit 1fb83a4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/src/components/calcite-combobox/calcite-combobox.scss b/src/components/calcite-combobox/calcite-combobox.scss
@@ -55,8 +55,12 @@
 }
 
 .grid-input {
-  @apply flex flex-grow flex-wrap items-center;
-  padding: 0;
+  @apply flex
+    flex-grow
+    flex-wrap
+    items-center
+    p-0
+    truncate;
 }
 
 .input {

diff --git a/src/components/calcite-combobox/calcite-combobox.stories.ts b/src/components/calcite-combobox/calcite-combobox.stories.ts
@@ -94,6 +94,11 @@ export const Multiple = (): string => html`
       <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-item
+        value="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+        text-label="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+        selected
+      ></calcite-combobox-item>
     </calcite-combobox>
   </div>
 `;

diff --git a/src/demos/calcite-combobox.html b/src/demos/calcite-combobox.html
@@ -612,5 +612,62 @@ <h1 style="margin: 0 auto; text-align: center">Combobox</h1>
         </calcite-combobox>
       </div>
     </div>
+
+    <hr />
+
+    <div class="parent">
+      <h3 class="child right-aligned-text">With truncated text effect in smaller fixed-width container</h3>
+      <div class="child" style="align-self: flex-start">
+        <div style="width: 20vw">
+          <p>Multi</p>
+          <calcite-combobox label="demo combobox 1" selection-mode="multi" allow-custom-values>
+            <calcite-combobox-item value="Trees" text-label="Trees">
+              <calcite-combobox-item
+                value="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+                text-label="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+                selected
+              ></calcite-combobox-item>
+              <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+              <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+            </calcite-combobox-item>
+          </calcite-combobox>
+        </div>
+      </div>
+
+      <div class="child" style="align-self: flex-start">
+        <div style="width: 20vw">
+          <p>Ancestors</p>
+          <calcite-combobox label="demo combobox 2" selection-mode="ancestors" allow-custom-values>
+            <calcite-combobox-item value="Trees" text-label="Trees">
+              <calcite-combobox-item
+                value="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+                text-label="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+                selected
+              ></calcite-combobox-item>
+              <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+              <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+            </calcite-combobox-item>
+          </calcite-combobox>
+        </div>
+      </div>
+
+      <div class="child" style="align-self: flex-start">
+        <div style="width: 20vw">
+          <p>Single</p>
+          <calcite-combobox label="demo combobox 3" selection-mode="single" allow-custom-values>
+            <calcite-combobox-item value="Trees" text-label="Trees">
+              <calcite-combobox-item
+                value="CommercialDamageAssessment - Damage to Commercial Buildings"
+                text-label="CommercialDamageAssessment - Damage to Commercial Buildings"
+                selected
+              ></calcite-combobox-item>
+              <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+              <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+            </calcite-combobox-item>
+            <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+          </calcite-combobox>
+        </div>
+      </div>
+    </div>
   </body>
 </html>