From 713f0a80fcfc9ef730e1c1f88e15098b9d10735b Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Wed, 3 Jul 2024 09:06:21 -0700
Subject: [PATCH] fix(chips): add truncation support

PiperOrigin-RevId: 649094591
---
 chips/internal/_shared.scss | 17 +++++++++++++++--
 chips/internal/chip.ts      |  4 +++-
 2 files changed, 18 insertions(+), 3 deletions(-)

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 a1b4595254..a5ad833e1b 100644
--- a/chips/internal/chip.ts
+++ b/chips/internal/chip.ts
@@ -128,7 +128,9 @@ export abstract class Chip extends chipBaseClass {
       <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>
     `;
   }