fix(combobox): Truncate long strings correctly (#2319)

* fix(combobox): Truncate long strings correctly. #2096 * review fix * revert title * label de chip.
Esri · Jun 16, 2021 · 2fc802a · 2fc802a
1 parent a4ff22e
commit 2fc802a
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 16 deletions.
diff --git a/src/components/calcite-chip/calcite-chip.scss b/src/components/calcite-chip/calcite-chip.scss
@@ -49,7 +49,11 @@
 }
 
 .container {
-  @apply inline-flex items-center h-full;
+  @apply inline-flex items-center h-full max-w-full;
+}
+
+.title {
+  @apply truncate;
 }
 
 .calcite--rtl {
@@ -88,7 +92,7 @@
     items-center
     border-none
     cursor-pointer
-    transition-default    
+    transition-default
     text-color-1;
   -webkit-appearance: none;
   border-radius: var(--calcite-chip-button-border-radius);

diff --git a/src/components/calcite-chip/calcite-chip.tsx b/src/components/calcite-chip/calcite-chip.tsx
@@ -130,7 +130,7 @@ export class CalciteChip {
       <div class={{ container: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
         {this.renderChipImage()}
         {this.icon ? iconEl : null}
-        <span id={this.guid}>
+        <span class={CSS.title} id={this.guid}>
           <slot />
         </span>
         {this.dismissible ? closeButton : null}

diff --git a/src/components/calcite-chip/resources.ts b/src/components/calcite-chip/resources.ts
@@ -1,4 +1,5 @@
 export const CSS = {
+  title: "title",
   close: "close"
 };
 

diff --git a/src/components/calcite-combobox/calcite-combobox.scss b/src/components/calcite-combobox/calcite-combobox.scss
@@ -48,7 +48,7 @@
 }
 
 .wrapper--single {
-  @apply cursor-pointer;
+  @apply cursor-pointer flex-no-wrap;
   padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-m);
 }
 
@@ -99,14 +99,14 @@
 }
 
 .input-wrap--single {
-  @apply flex-auto;
+  @apply flex-auto overflow-hidden;
 }
 
 .label {
   @apply p-0
     block
     flex-auto
-    pointer-events-none;
+    pointer-events-none truncate max-w-full;
   height: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
 }
@@ -155,6 +155,7 @@
 }
 
 .chip {
+  max-width: 100%;
   margin-right: var(--calcite-combobox-item-spacing-unit-s);
   margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
 }

diff --git a/src/components/calcite-combobox/calcite-combobox.tsx b/src/components/calcite-combobox/calcite-combobox.tsx
@@ -762,6 +762,7 @@ export class CalciteCombobox {
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
       return (
         <calcite-chip
+          aria-label={label}
           class={chipClasses}
           dismissLabel={"remove tag"}
           dismissible
@@ -770,6 +771,7 @@ export class CalciteCombobox {
           key={item.textLabel}
           onCalciteChipDismiss={(event) => this.calciteChipDismissHandler(event, item)}
           scale={scale}
+          title={label}
           value={item.value}
         >
           {label}

diff --git a/src/demos/calcite-combobox.html b/src/demos/calcite-combobox.html
@@ -268,6 +268,54 @@ <h2>Scale M</h2>
         <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 style="width: 350px; margin-left: 1rem">
+        <h3>Multi</h3>
+        <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 style="width: 350px; margin-left: 1rem">
+        <h3>Ancestors</h3>
+        <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>
+
+      <h2>Truncated</h2>
+
+      <div style="width: 350px; margin-left: 1rem">
+        <h3>Single</h3>
+        <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>
   </body>
 </html>
diff --git a/src/demos/calcite-link.html b/src/demos/calcite-link.html
@@ -39,16 +39,33 @@ <h4>Receive focus</h4>
 
     <br />
 
-
-  <h3>Text sizes</h3>
-  <p style="font-size:10px"><calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br /></p>
-  <p style="font-size:12px"><calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br /></p>
-  <p style="font-size:14px"><calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br /></p>
-  <p style="font-size:16px"><calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br /></p>
-  <p style="font-size:18px"><calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br /></p>
-  <p style="font-size:20px"><calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br /></p>
-  <p style="font-size:16px"><calcite-link icon-start="information" icon-end="information">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry' 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</calcite-link><br /></p>
-
+    <h3>Text sizes</h3>
+    <p style="font-size: 10px">
+      <calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br />
+    </p>
+    <p style="font-size: 12px">
+      <calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br />
+    </p>
+    <p style="font-size: 14px">
+      <calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br />
+    </p>
+    <p style="font-size: 16px">
+      <calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br />
+    </p>
+    <p style="font-size: 18px">
+      <calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br />
+    </p>
+    <p style="font-size: 20px">
+      <calcite-link icon-start="information" icon-end="information-f">Link example text</calcite-link><br />
+    </p>
+    <p style="font-size: 16px">
+      <calcite-link icon-start="information" icon-end="information"
+        >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'
+        1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
+        Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact
+        original form, accompanied by English versions from the 1914 translation by H. Rackham.</calcite-link
+      ><br />
+    </p>
 
     <h3>Tooltip trigger</h3>
     <calcite-tooltip-manager>