From 5d964adcf9df7cfc4cc0b6108e378e6bc6b330fd Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Fri, 10 Nov 2023 15:16:30 -0800
Subject: [PATCH] fix(button): labels not truncating, add support for multiline
 with `text-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       |  2 ++
 button/internal/_icon.scss   |  1 +
 button/internal/_shared.scss | 18 +++++++++++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/button/demo/stories.ts b/button/demo/stories.ts
index 96ee61bcb4..46d6c850b8 100644
--- a/button/demo/stories.ts
+++ b/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;
   }
 `;
diff --git a/button/internal/_icon.scss b/button/internal/_icon.scss
index e98682f905..e2156e5be5 100644
--- a/button/internal/_icon.scss
+++ b/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);
diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
index 7dfee67078..3066fe30cf 100644
--- a/button/internal/_shared.scss
+++ b/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);