From 38aa7e8456394c1730d9d17ae3f5252e81e5b82a Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Mon, 1 Jul 2024 18:14:24 -0700
Subject: [PATCH] fix(chips): add truncation support

PiperOrigin-RevId: 648545115
---
 chips/demo/stories.ts       | 51 ++++++++++++++++++++-----------------
 chips/internal/_shared.scss | 17 +++++++++++--
 chips/internal/chip.ts      |  4 ++-
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/chips/demo/stories.ts b/chips/demo/stories.ts
index 98e0a68fb7..cc228c2911 100644
--- 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
index 54d95949b3..fd5489f06a 100644
--- 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
index ae71a92ada..746034437e 100644
--- 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>
     `;
   }