fix(chips): add truncation support

PiperOrigin-RevId: 648545115
material-components · Jul 2, 2024 · 38aa7e8 · 38aa7e8
1 parent 352607d
commit 38aa7e8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 27 deletions.
diff --git a/chips/demo/stories.ts b/chips/demo/stories.ts
@@ -49,30 +49,33 @@ const assist: MaterialStoryInit<StoryKnobs> = {
   render({label, elevated, disabled, scrolling}) {
     const classes = {'scrolling': scrolling};
     return html`
-      <md-chip-set class=${classMap(classes)} aria-label="Assist chips">
-        <md-assist-chip
-          label=${label || 'Assist chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}></md-assist-chip>
-        <md-assist-chip
-          label=${label || 'Assist chip with icon'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}>
-          <md-icon slot="icon">local_laundry_service</md-icon>
-        </md-assist-chip>
-        <md-assist-chip
-          label=${label || 'Assist link chip'}
-          ?elevated=${elevated}
-          href="https://google.com"
-          target="_blank"
-          >${GOOGLE_LOGO}</md-assist-chip
-        >
-        <md-assist-chip
-          label=${label || 'Disabled assist chip (focusable)'}
-          disabled
-          always-focusable
-          ?elevated=${elevated}></md-assist-chip>
-      </md-chip-set>
+      <div
+        style="border: 4px solid black; resize: horizontal; overflow: hidden; width: 100px;">
+        <md-chip-set class=${classMap(classes)} aria-label="Assist chips">
+          <md-assist-chip
+            label=${label || 'Assist chip'}
+            ?disabled=${disabled}
+            ?elevated=${elevated}></md-assist-chip>
+          <md-assist-chip
+            label=${label || 'Assist chip with icon'}
+            ?disabled=${disabled}
+            ?elevated=${elevated}>
+            <md-icon slot="icon">local_laundry_service</md-icon>
+          </md-assist-chip>
+          <md-assist-chip
+            label=${label || 'Assist link chip'}
+            ?elevated=${elevated}
+            href="https://google.com"
+            target="_blank"
+            >${GOOGLE_LOGO}</md-assist-chip
+          >
+          <md-assist-chip
+            label=${label || 'Disabled assist chip (focusable)'}
+            disabled
+            always-focusable
+            ?elevated=${elevated}></md-assist-chip>
+        </md-chip-set>
+      </div>
     `;
   },
 };

diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss
@@ -96,6 +96,9 @@
   }
 
   .primary.action {
+    // Set a min-width on the primary action so that trailing actions remain
+    // inside the chip as the chip is resized.
+    min-width: 0;
     padding-inline-start: var(--_leading-space);
     padding-inline-end: var(--_trailing-space);
   }
@@ -151,11 +154,21 @@
     display: flex;
     font-family: var(--_label-text-font);
     font-size: var(--_label-text-size);
-    line-height: var(--_label-text-line-height);
     font-weight: var(--_label-text-weight);
     height: 100%;
-    text-overflow: ellipsis;
+    line-height: var(--_label-text-line-height);
+    overflow: hidden;
     user-select: none;
+  }
+
+  // An inner span is needed to truncate the label, since elements with a flex
+  // display do not support the text-overflow property. The outer wrapper .label
+  // needs to be a flex display to correctly set the element's baseline,
+  // supporting external elements aligning to the baseline of the chip's text
+  // instead of its edges or icons.
+  .label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 

diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts
@@ -129,7 +129,9 @@ export abstract class Chip extends LitElement {
       <span class="leading icon" aria-hidden="true">
         ${this.renderLeadingIcon()}
       </span>
-      <span class="label">${this.label}</span>
+      <span class="label">
+        <span class="label-text">${this.label}</span>
+      </span>
       <span class="touch"></span>
     `;
   }