From 1fb83a4ad690830b2be1f48d46443b95d5f3d3aa Mon Sep 17 00:00:00 2001
From: Cari Palazzolo <cpalazzolo@esri.com>
Date: Mon, 25 Oct 2021 17:07:48 -0700
Subject: [PATCH] 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
---
 .../calcite-combobox/calcite-combobox.scss    |  8 ++-
 .../calcite-combobox.stories.ts               |  5 ++
 src/demos/calcite-combobox.html               | 57 +++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-combobox/calcite-combobox.scss b/src/components/calcite-combobox/calcite-combobox.scss
index efda8e367d6..bad262480b6 100644
--- 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
index 567f395bb9c..7130b3edd20 100644
--- 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
index 0eb96290ae3..60aae58a074 100644
--- 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>