fix(button): wrap text by default (#28682)

Issue number: resolves #8700

BREAKING CHANGE: Button text now wraps by default.

BREAKING.md

@@ -15,6 +15,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 - [Browser and Platform Support](#version-8x-browser-platform-support)
 - [Components](#version-8x-components)
+  - [Button](#version-8x-button)
   - [Content](#version-8x-content)
   - [Datetime](#version-8x-datetime)
 
@@ -45,6 +46,10 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 <h2 id="version-8x-components">Components</h2>
 
+<h4 id="version-8x-button">Button</h4>
+
+- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
+
 <h4 id="version-8x-content">Content</h4>
 
 - Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.

core/src/components/button/button.scss

@@ -56,8 +56,7 @@
   text-align: center;
   text-decoration: none;
 
-  // TODO(FW-4599): change to normal
+  white-space: normal;
-  white-space: nowrap;
 
   user-select: none;
   vertical-align: top; // the better option for most scenarios
@@ -68,7 +67,7 @@
 
 :host(.button-disabled) {
   cursor: default;
-  opacity: .5;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -229,11 +228,11 @@
 }
 
 ::slotted(ion-icon[slot="start"]) {
-  @include margin(0, .3em, 0, -.3em);
+  @include margin(0, 0.3em, 0, -0.3em);
 }
 
 ::slotted(ion-icon[slot="end"]) {
-  @include margin(0, -.2em, 0, .3em);
+  @include margin(0, -0.2em, 0, 0.3em);
 }
 
 ::slotted(ion-icon[slot="icon-only"]) {

core/src/components/button/test/wrap/button.e2e.ts

@@ -4,10 +4,9 @@ import { configs, test } from '@utils/test/playwright';
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: wrap'), () => {
     test('should render button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button>This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -18,10 +17,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render small button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -32,10 +30,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render large button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -46,10 +43,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap">
+        <ion-button>
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -64,10 +60,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render block button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -78,10 +73,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render block button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="block">
+        <ion-button expand="block">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -96,10 +90,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render full button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -110,10 +103,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render full button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="full">
+        <ion-button expand="full">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -128,11 +120,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render an item button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-item>
-          <ion-button class="ion-text-wrap" slot="end">
+          <ion-button slot="end">
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-item>
@@ -146,11 +137,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render an item button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-item>
-          <ion-button class="ion-text-wrap" slot="end">
+          <ion-button slot="end">
             <ion-icon slot="start" name="heart"></ion-icon>
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             <ion-icon slot="end" name="star"></ion-icon>
@@ -166,12 +156,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render a list header button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-list-header>
           <ion-label>List Header</ion-label>
-          <ion-button class="ion-text-wrap">
+          <ion-button>
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-list-header>
@@ -185,12 +174,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render a toolbar button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-toolbar>
           <ion-buttons slot="end">
-            <ion-button class="ion-text-wrap">
+            <ion-button>
               This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             </ion-button>
           </ion-buttons>