fix(button): labels not truncating, add support for multiline with `t…

…ext-wrap: wrap`

There's currently a bug where wrapping buttons do not increase their height. That will come later to reduce the scope on this change.

PiperOrigin-RevId: 581383771

button/demo/stories.ts

@@ -25,10 +25,12 @@ const styles = css`
     display: flex;
     flex-direction: column;
     gap: 16px;
+    max-width: 600px;
   }
 
   .row {
     display: flex;
+    flex-wrap: wrap;
     gap: 16px;
   }
 `;

button/internal/_icon.scss

@@ -12,6 +12,7 @@
     position: relative;
     writing-mode: horizontal-tb;
     fill: currentColor;
+    flex-shrink: 0;
     color: var(--_icon-color);
     font-size: var(--_icon-size);
     inline-size: var(--_icon-size);

button/internal/_shared.scss

@@ -22,15 +22,20 @@
     display: inline-flex;
     gap: 8px;
     height: var(--_container-height);
-    min-width: 64px;
     outline: none;
     padding-inline-start: var(--_leading-space);
     padding-inline-end: var(--_trailing-space);
+    place-content: center;
+    place-items: center;
     position: relative;
     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);
+    // Long labels are cut off with ellipsis by default. `text-overflow` and
+    // `text-wrap` can customize this.
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     // Override vertical-align with shortest value "top". Vertical-align's
@@ -76,6 +81,10 @@
     vertical-align: middle;
     background: transparent;
     text-decoration: none;
+    // Buttons have a default min-width of 64px. This can be overridden by
+    // setting a smaller min-width on the host. The 64px button will be centered
+    // within the bounds of the smaller host element.
+    min-width: calc(64px - var(--_leading-space) - var(--_trailing-space));
     width: 100%;
     z-index: 0; // Place content on top of elevation and ripple
     height: 100%;
@@ -114,6 +123,13 @@
     overflow: hidden;
   }
 
+  // Inherit text-overflow down through label and slotted content so that it
+  // can be customized on the host.
+  :is(.button, .label, .label slot),
+  .label ::slotted(*) {
+    text-overflow: inherit;
+  }
+
   :host([disabled]) .label {
     color: var(--_disabled-label-text-color);
     opacity: var(--_disabled-label-text-opacity);