fix(chips): add truncation support

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

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss
@@ -22,6 +22,7 @@
     height: var(--_container-height);
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
+    max-width: 100%;
 
     @include ripple.theme(
       (
@@ -96,6 +97,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 +155,16 @@
     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;
+  }
+
+  .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>
     `;
   }

diff --git a/testing/table/internal/test-table.ts b/testing/table/internal/test-table.ts
@@ -82,7 +82,7 @@ export class TestTable<S extends string = string> extends LitElement {
             </th>
             ${this.states.map(
               (state, colIndex) => html`
-                <td class="md3-test-table__cell">
+                <td class="md3-test-table__cell" part="cell">
                   <slot name="${`${rowIndex}-${colIndex}`}">
                     <div class="md3-test-table__text">N/A</div>
                   </slot>