refactor: rename button label wrap custom CSS property (#11864)

Author: jouni

dev/playground/button.html

@@ -86,10 +86,14 @@ <h2 class="heading">Custom Layout</h2>
         <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
         Reply
       </vaadin-button>
-      <vaadin-button style="width: 10em;">
+      <vaadin-button style="width: 10em; --vaadin-button-label-wrap: normal;">
         <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
         A really long label that should wrap
       </vaadin-button>
+      <vaadin-button style="width: 10em; --vaadin-button-label-wrap: nowrap;">
+        <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
+        A really long label that should truncate
+      </vaadin-button>
     </section>
   </body>
 </html>

packages/button/src/styles/vaadin-button-base-styles.js

@@ -13,7 +13,7 @@ export const buttonStyles = css`
     justify-content: center;
     text-align: center;
     gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-s));
-    white-space: var(--vaadin-button-white-space, normal);
+    white-space: var(--vaadin-button-label-wrap, normal);
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
     user-select: none;
@@ -47,7 +47,8 @@ export const buttonStyles = css`
   }
 
   [part='label'] {
-    display: inline-flex;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   :host(:is([focus-ring], :focus-visible)) {

packages/vaadin-lumo-styles/src/components/button.css

@@ -82,7 +82,7 @@ Note, to make it work, the form fields should have the same "::before" pseudo-el
   }
 
   [part='label'] {
-    white-space: var(--vaadin-button-white-space, nowrap);
+    white-space: var(--vaadin-button-label-wrap, nowrap);
     overflow: hidden;
     text-overflow: ellipsis;
     padding: calc(var(--lumo-button-size) / 6) 0;