feat(segment): display segment as a grid and add an ellipsis to overflowing text in a segment button (#27457)

Issue number: resolves #16532

---------

## What is the current behavior?
Text that is too long to fit in a segment button does not ellipsis,
instead it centers all of the text and cuts it off at the beginning and
end of the text.

## What is the new behavior?
Text that is wider than the segment button will now add an ellipsis and
cut the text off instead of horizontally centering the text and
overflowing the button (while being cut off visually).

While researching how to fix this issue I discovered that the button
text was not properly overflowing when it should due to a limitation of
flex. I was able to mock segments using divs and see that certain
buttons were adding an ellipsis when there was room to grow. This is due
to a combination of using `flex-basis: 0` on the segment buttons and
`width: auto` on the segment inside of a toolbar. This
[blog](https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think)
sums it up well, but it is not something I could work around with
segment set as `display: flex`. When I changed the mocked segment to use
`display: grid`, it allowed the text to properly grow, while overflowing
and adding an ellipsis when it couldn't grow. This can be seen in my
[Codepen
example](https://codepen.io/brandyscarney/pen/poOpbWE?editors=1100).

As a result, I made the following updates:

- Changed the `ion-segment` to [`display:
grid`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-dedcf5921daa49880ebae649e04d4f488a6b965c885a7bb1fdf29a5f1b3d501fR14)
(`display: inline-grid` could not be used because the highlight was not
properly aligned to the bottom of a toolbar for `md` mode)
- Moves the `max-width` for Material Design segment buttons to the
parent segment by using [`grid-auto-columns: minmax(auto,
$segment-button-md-max-width);`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-8df7c6681b616fdc975b068e3d31282cc4997222e786db6365ebcef3bccbb6d3R10).
This is necessary for the buttons to properly center inside of the grid
when they all hit the max-width (360px at the moment).
- The Material Design segment buttons will now take up equal widths.
This matches the [MD2 spec for fixed
segments](https://m2.material.io/components/tabs#fixed-tabs).
- Sets [`grid-row:
1`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R75)
on the host segment button. This tells the segment buttons to stay on
the same row.
- Sets [`max-width:
100%`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R214)
and [`overflow:
hidden`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R222)
on the native button. This allows the text itself to ellipsis.
- Added tests for segment wrapping & went through all existing tests to
add missing `ion-label` elements in the segment buttons

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

### High-level changes between main and this branch

| `main` | `FW-3401` |
| ---| ---|
|
![main-ios](https://github.com/ionic-team/ionic-framework/assets/6577830/b245fffa-e09c-4a96-bc6e-c4d2ee68cd16)
|
![branch-ios](https://github.com/ionic-team/ionic-framework/assets/6577830/397d95f5-24d3-4421-b960-1a8a6ace7c26)
|
|
![main-md](https://github.com/ionic-team/ionic-framework/assets/6577830/75c77373-0dde-4e7d-a7fa-fc082fcb5c7a)
|
![branch-md](https://github.com/ionic-team/ionic-framework/assets/6577830/402f8293-8ea5-47fb-bc13-7dc2d85b361a)
|

angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html

@@ -7,8 +7,12 @@
 <ion-content class="ion-padding">
   <h1>Welcome to Tab1</h1>
   <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
-    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="one">
-    <ion-segment-button value="two">Two</ion-segment-button>
+      <ion-label>One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="two">
+      <ion-label>Two</ion-label>
+    </ion-segment-button>
   </ion-segment>
   <p>
     Segment changed: <span class="segment-changed">{{changed}}</span>

angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html

@@ -7,8 +7,12 @@
 <ion-content class="ion-padding">
   <h1>Welcome to Tab 2</h1>
   <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
-    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="one">
-    <ion-segment-button value="two">Two</ion-segment-button>
+      <ion-label>One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="two">
+      <ion-label>Two</ion-label>
+    </ion-segment-button>
   </ion-segment>
   <p>
     Segment changed: <span class="segment-changed">{{changed}}</span>

core/src/components/segment-button/segment-button.ios.scss

@@ -30,7 +30,6 @@
 
   position: relative;
 
-  flex-basis: 0;
   flex-direction: row;
 
   min-width: #{$segment-button-ios-min-width};

core/src/components/segment-button/segment-button.md.scss

@@ -27,7 +27,6 @@
 
   min-width: $segment-button-md-min-width;
 
-  max-width: $segment-button-md-max-width;
   min-height: $segment-button-md-min-height;
 
   border-width: var(--border-width);

core/src/components/segment-button/segment-button.scss

@@ -57,7 +57,6 @@
 
   position: relative;
 
-  flex: 1 1 auto;
   flex-direction: column;
 
   height: auto;
@@ -71,9 +70,11 @@
 
   white-space: nowrap;
 
-  font-kerning: none;
-
   cursor: pointer;
+
+  grid-row: 1;
+
+  font-kerning: none;
 }
 
 .button-native {
@@ -210,12 +211,16 @@
 
   align-self: center;
 
+  max-width: 100%;
+
   line-height: 22px;
 
   text-overflow: ellipsis;
 
   white-space: nowrap;
 
+  overflow: hidden;
+
   box-sizing: border-box;
 
   pointer-events: none;

core/src/components/segment/segment.md.scss

@@ -6,6 +6,8 @@
 
 :host {
   --background: transparent;
+
+  grid-auto-columns: minmax(auto, $segment-button-md-max-width);
 }
 
 // Segment: In Toolbar

core/src/components/segment/segment.scss

@@ -11,7 +11,9 @@
 
   @include font-smoothing();
 
-  display: flex;
+  display: grid;
+
+  grid-auto-columns: 1fr;
 
   position: relative;
 
@@ -41,6 +43,8 @@
   width: auto;
 
   overflow-x: auto;
+
+  grid-auto-columns: minmax(min-content, 1fr);
 }
 
 :host(.segment-scrollable::-webkit-scrollbar) {

core/src/components/segment/test/basic/index.html

@@ -23,53 +23,91 @@
 
         <ion-toolbar>
           <ion-segment class="event-tester" value="Free">
-            <ion-segment-button value="Paid"> PaidPaidPaid </ion-segment-button>
+            <ion-segment-button value="Paid">
-            <ion-segment-button value="Free"> Free </ion-segment-button>
+              <ion-label>PaidPaidPaid</ion-label>
-            <ion-segment-button value="Top"> Top </ion-segment-button>
+            </ion-segment-button>
+            <ion-segment-button value="Free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Top">
+              <ion-label>Top</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment value="2" scrollable="true">
-            <ion-segment-button value="1">Button 1</ion-segment-button>
+            <ion-segment-button value="1">
-            <ion-segment-button value="2">Button 3</ion-segment-button>
+              <ion-label>Button 1</ion-label>
-            <ion-segment-button value="3">Button 3</ion-segment-button>
+            </ion-segment-button>
-            <ion-segment-button value="4">Button 4</ion-segment-button>
+            <ion-segment-button value="2">
-            <ion-segment-button value="5">Button 5</ion-segment-button>
+              <ion-label>Button 2</ion-label>
-            <ion-segment-button value="6">Button 6</ion-segment-button>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Button 3</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="4">
+              <ion-label>Button 4</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="5">
+              <ion-label>Button 5</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="6">
+              <ion-label>Button 6</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment name="dynamicPropDisable" disabled color="danger">
-            <ion-segment-button value="Bookmarks"> Bookmarks </ion-segment-button>
+            <ion-segment-button value="Bookmarks">
-            <ion-segment-button value="Reading List"> Reading List </ion-segment-button>
+              <ion-label>Bookmarks</ion-label>
-            <ion-segment-button value="Shared Links"> Shared Links </ion-segment-button>
+            </ion-segment-button>
+            <ion-segment-button value="Reading List">
+              <ion-label>Reading List</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Shared Links">
+              <ion-label>Shared Links</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment name="dynamicAttrElem" color="secondary" value="active">
-            <ion-segment-button value="active"> Active </ion-segment-button>
+            <ion-segment-button value="active">
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+              <ion-label>Active</ion-label>
-              Disabled
+            </ion-segment-button>
+            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+              <ion-label>Disabled</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="inactive" disabled="false">
+              <ion-label>Inactive</ion-label>
             </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false"> Inactive </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment value="all">
-            <ion-segment-button value="all"> All </ion-segment-button>
+            <ion-segment-button value="all">
-            <ion-segment-button value="missed"> Missed </ion-segment-button>
+              <ion-label>All</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="missed">
+              <ion-label>Missed</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
       </ion-header>
 
       <ion-segment value="segment">
-        <ion-segment-button value="segment"> Segment </ion-segment-button>
+        <ion-segment-button value="segment">
-        <ion-segment-button value="outside"> Outside </ion-segment-button>
+          <ion-label>Segment</ion-label>
-        <ion-segment-button value="content"> Content </ion-segment-button>
+        </ion-segment-button>
+        <ion-segment-button value="outside">
+          <ion-label>Outside</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="content">
+          <ion-label>Content</ion-label>
+        </ion-segment-button>
       </ion-segment>
 
       <ion-content>

core/src/components/segment/test/basic/segment.e2e.ts

@@ -7,9 +7,15 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment>
-          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="a">
-          <ion-segment-button value="b">Second</ion-segment-button>
+            <ion-label>First</ion-label>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -23,9 +29,15 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="a">
-          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="a">
-          <ion-segment-button value="b">Second</ion-segment-button>
+            <ion-label>First</ion-label>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -47,9 +59,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="b">
-          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="a">
-          <ion-segment-button value="b" disabled="true">Second</ion-segment-button>
+            <ion-label>First</ion-label>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="b" disabled="true">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -64,9 +82,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="b" color="danger">
-          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="a">
-          <ion-segment-button value="b">Second</ion-segment-button>
+            <ion-label>First</ion-label>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config

core/src/components/segment/test/scrollable/segment.e2e.ts

@@ -7,15 +7,33 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment scrollable="true" value="2">
-          <ion-segment-button value="1">First</ion-segment-button>
+          <ion-segment-button value="1">
-          <ion-segment-button value="2">Second</ion-segment-button>
+            <ion-label>First</ion-label>
-          <ion-segment-button value="3">Third</ion-segment-button>
+          </ion-segment-button>
-          <ion-segment-button value="4">Fourth</ion-segment-button>
+          <ion-segment-button value="2">
-          <ion-segment-button value="5">Fifth</ion-segment-button>
+            <ion-label>Second</ion-label>
-          <ion-segment-button value="6">Sixth</ion-segment-button>
+          </ion-segment-button>
-          <ion-segment-button value="7">Seventh</ion-segment-button>
+          <ion-segment-button value="3">
-          <ion-segment-button value="8">Eigth</ion-segment-button>
+            <ion-label>Third</ion-label>
-          <ion-segment-button value="9">Nineth</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="4">
+            <ion-label>Fourth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="5">
+            <ion-label>Fifth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="6">
+            <ion-label>Sixth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="7">
+            <ion-label>Seventh</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="8">
+            <ion-label>Eighth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="9">
+            <ion-label>Ninth</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config

core/src/components/segment/test/segment-events.e2e.ts

@@ -11,9 +11,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
           <ion-segment>
-            <ion-segment-button value="1">One</ion-segment-button>
+            <ion-segment-button value="1">
-            <ion-segment-button value="2">Two</ion-segment-button>
+              <ion-label>One</ion-label>
-            <ion-segment-button value="3">Three</ion-segment-button>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Two</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Three</ion-label>
+            </ion-segment-button>
           </ion-segment>
       `,
           config
@@ -40,9 +46,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
             <ion-segment value="1">
-              <ion-segment-button value="1">One</ion-segment-button>
+              <ion-segment-button value="1">
-              <ion-segment-button value="2">Two</ion-segment-button>
+                <ion-label>One</ion-label>
-              <ion-segment-button value="3">Three</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="2">
+                <ion-label>Two</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="3">
+                <ion-label>Three</ion-label>
+              </ion-segment-button>
             </ion-segment>
           `,
           config
@@ -65,9 +77,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
             <ion-segment>
-              <ion-segment-button value="1">One</ion-segment-button>
+              <ion-segment-button value="1">
-              <ion-segment-button value="2">Two</ion-segment-button>
+                <ion-label>One</ion-label>
-              <ion-segment-button value="3">Three</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="2">
+                <ion-label>Two</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="3">
+                <ion-label>Three</ion-label>
+              </ion-segment-button>
             </ion-segment>
           `,
           config
@@ -100,9 +118,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           <ion-app>
             <ion-toolbar>
               <ion-segment value="1">
-                <ion-segment-button value="1">One</ion-segment-button>
+                <ion-segment-button value="1">
-                <ion-segment-button value="2">Two</ion-segment-button>
+                  <ion-label>One</ion-label>
-                <ion-segment-button value="3">Three</ion-segment-button>
+                </ion-segment-button>
+                <ion-segment-button value="2">
+                  <ion-label>Two</ion-label>
+                </ion-segment-button>
+                <ion-segment-button value="3">
+                  <ion-label>Three</ion-label>
+                </ion-segment-button>
               </ion-segment>
             </ion-toolbar>
           </ion-app>
@@ -129,9 +153,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
           <ion-segment value="1">
-            <ion-segment-button value="1">One</ion-segment-button>
+            <ion-segment-button value="1">
-            <ion-segment-button value="2">Two</ion-segment-button>
+              <ion-label>One</ion-label>
-            <ion-segment-button value="3">Three</ion-segment-button>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Two</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Three</ion-label>
+            </ion-segment-button>
           </ion-segment>
         `,
           config
@@ -158,9 +188,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1">
-          <ion-segment-button value="1">One</ion-segment-button>
+          <ion-segment-button value="1">
-          <ion-segment-button value="2">Two</ion-segment-button>
+            <ion-label>One</ion-label>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -180,9 +216,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1">
-          <ion-segment-button value="1">One</ion-segment-button>
+          <ion-segment-button value="1">
-          <ion-segment-button value="2">Two</ion-segment-button>
+            <ion-label>One</ion-label>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -206,9 +248,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1" swipe-gesture="false">
-          <ion-segment-button value="1">One</ion-segment-button>
+          <ion-segment-button value="1">
-          <ion-segment-button value="2">Two</ion-segment-button>
+            <ion-label>One</ion-label>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config

core/src/components/segment/test/segment.spec.ts

@@ -10,7 +10,10 @@ it('should disable segment buttons added to disabled segment async', async () =>
   });
 
   const segment = page.body.querySelector('ion-segment');
-  segment.innerHTML = `<ion-segment-button>Segment Button</ion-segment-button>`;
+  segment.innerHTML = `
+    <ion-segment-button>
+      <ion-label>Segment Button</ion-label>
+    </ion-segment-button>`;
   await page.waitForChanges();
 
   const segmentButton = page.body.querySelector('ion-segment-button');
@@ -22,7 +25,9 @@ it('should set checked state when value is set asynchronously', async () => {
     components: [Segment, SegmentButton],
     html: `
       <ion-segment value="first">
-        <ion-segment-button>First</ion-segment-button>
+        <ion-segment-button>
+          <ion-label>First</ion-label>
+        </ion-segment-button>
       </ion-segment>
     `,
   });

core/src/components/segment/test/toolbar/segment.e2e.ts

@@ -9,9 +9,15 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-header>
           <ion-toolbar>
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="a">
-              <ion-segment-button value="b">Second</ion-segment-button>
+                <ion-label>First</ion-label>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
@@ -30,30 +36,54 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-header>
           <ion-toolbar color="primary">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="a">
-              <ion-segment-button value="b">Second</ion-segment-button>
+                <ion-label>First</ion-label>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="light">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="a">
-              <ion-segment-button value="b">Second</ion-segment-button>
+                <ion-label>First</ion-label>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="medium">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="a">
-              <ion-segment-button value="b">Second</ion-segment-button>
+                <ion-label>First</ion-label>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="dark">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="a">
-              <ion-segment-button value="b">Second</ion-segment-button>
+                <ion-label>First</ion-label>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
@@ -84,9 +114,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-header>
           <ion-toolbar mode="ios" color="primary">
             <ion-segment mode="md" value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="a">
-              <ion-segment-button value="b">Second</ion-segment-button>
+                <ion-label>First</ion-label>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>

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

@@ -0,0 +1,103 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('segment: wrap'), () => {
+    test('should wrap long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap`));
+    });
+    test('should wrap long text with an icon', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon`));
+    });
+    test('should wrap long text with a start icon', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button layout="icon-start" value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon-start`));
+    });
+    test('should wrap long text in a toolbar', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toolbar>
+          <ion-segment>
+            <ion-segment-button value="long">
+              <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="purchased">
+              <ion-label>Purchased</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const toolbar = page.locator('ion-toolbar');
+
+      await expect(toolbar).toHaveScreenshot(screenshot(`segment-wrap-toolbar`));
+    });
+  });
+});