From d585e724dda8053f5aea86ed41cc8f9de3abca04 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 8 Mar 2023 17:04:06 -0500
Subject: [PATCH] docs(segment): wrap text in labels for segments in toolbar
 playground

---
 static/usage/v6/toolbar/segments/angular.md    | 4 ++--
 static/usage/v6/toolbar/segments/demo.html     | 6 +++---
 static/usage/v6/toolbar/segments/javascript.md | 4 ++--
 static/usage/v6/toolbar/segments/react.md      | 6 +++---
 static/usage/v6/toolbar/segments/vue.md        | 8 ++++----
 static/usage/v7/toolbar/segments/angular.md    | 4 ++--
 static/usage/v7/toolbar/segments/demo.html     | 6 +++---
 static/usage/v7/toolbar/segments/javascript.md | 4 ++--
 static/usage/v7/toolbar/segments/react.md      | 6 +++---
 static/usage/v7/toolbar/segments/vue.md        | 8 ++++----
 10 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/static/usage/v6/toolbar/segments/angular.md b/static/usage/v6/toolbar/segments/angular.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v6/toolbar/segments/angular.md
+++ b/static/usage/v6/toolbar/segments/angular.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v6/toolbar/segments/demo.html b/static/usage/v6/toolbar/segments/demo.html
index 8eb5e3cff7b..42452b90dd8 100644
--- a/static/usage/v6/toolbar/segments/demo.html
+++ b/static/usage/v6/toolbar/segments/demo.html
@@ -18,10 +18,10 @@
       <ion-toolbar>
         <ion-segment value="all">
           <ion-segment-button value="all">
-            All
+            <ion-label>All</ion-label>
           </ion-segment-button>
           <ion-segment-button value="favorites">
-            Favorites
+            <ion-label>Favorites</ion-label>
           </ion-segment-button>
         </ion-segment>
       </ion-toolbar>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v6/toolbar/segments/javascript.md b/static/usage/v6/toolbar/segments/javascript.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v6/toolbar/segments/javascript.md
+++ b/static/usage/v6/toolbar/segments/javascript.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v6/toolbar/segments/react.md b/static/usage/v6/toolbar/segments/react.md
index 54a63e7f8f8..f2fad4d0ec5 100644
--- a/static/usage/v6/toolbar/segments/react.md
+++ b/static/usage/v6/toolbar/segments/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
 
 function Example() {
   return (
@@ -8,10 +8,10 @@ function Example() {
       <IonToolbar>
         <IonSegment value="all">
           <IonSegmentButton value="all">
-            All
+            <IonLabel>All</IonLabel>
           </IonSegmentButton>
           <IonSegmentButton value="favorites">
-            Favorites
+            <IonLabel>Favorites</IonLabel>
           </IonSegmentButton>
         </IonSegment>
       </IonToolbar>
diff --git a/static/usage/v6/toolbar/segments/vue.md b/static/usage/v6/toolbar/segments/vue.md
index 3be08612557..b31855bf734 100644
--- a/static/usage/v6/toolbar/segments/vue.md
+++ b/static/usage/v6/toolbar/segments/vue.md
@@ -4,10 +4,10 @@
     <ion-toolbar>
       <ion-segment value="all">
         <ion-segment-button value="all">
-          All
+          <ion-label>All</ion-label>
         </ion-segment-button>
         <ion-segment-button value="favorites">
-          Favorites
+          <ion-label>Favorites</ion-label>
         </ion-segment-button>
       </ion-segment>
     </ion-toolbar>
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-  import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
+    components: { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
   });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/segments/angular.md b/static/usage/v7/toolbar/segments/angular.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v7/toolbar/segments/angular.md
+++ b/static/usage/v7/toolbar/segments/angular.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v7/toolbar/segments/demo.html b/static/usage/v7/toolbar/segments/demo.html
index 8eb5e3cff7b..42452b90dd8 100644
--- a/static/usage/v7/toolbar/segments/demo.html
+++ b/static/usage/v7/toolbar/segments/demo.html
@@ -18,10 +18,10 @@
       <ion-toolbar>
         <ion-segment value="all">
           <ion-segment-button value="all">
-            All
+            <ion-label>All</ion-label>
           </ion-segment-button>
           <ion-segment-button value="favorites">
-            Favorites
+            <ion-label>Favorites</ion-label>
           </ion-segment-button>
         </ion-segment>
       </ion-toolbar>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toolbar/segments/javascript.md b/static/usage/v7/toolbar/segments/javascript.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v7/toolbar/segments/javascript.md
+++ b/static/usage/v7/toolbar/segments/javascript.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v7/toolbar/segments/react.md b/static/usage/v7/toolbar/segments/react.md
index 54a63e7f8f8..f2fad4d0ec5 100644
--- a/static/usage/v7/toolbar/segments/react.md
+++ b/static/usage/v7/toolbar/segments/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
 
 function Example() {
   return (
@@ -8,10 +8,10 @@ function Example() {
       <IonToolbar>
         <IonSegment value="all">
           <IonSegmentButton value="all">
-            All
+            <IonLabel>All</IonLabel>
           </IonSegmentButton>
           <IonSegmentButton value="favorites">
-            Favorites
+            <IonLabel>Favorites</IonLabel>
           </IonSegmentButton>
         </IonSegment>
       </IonToolbar>
diff --git a/static/usage/v7/toolbar/segments/vue.md b/static/usage/v7/toolbar/segments/vue.md
index 3be08612557..b31855bf734 100644
--- a/static/usage/v7/toolbar/segments/vue.md
+++ b/static/usage/v7/toolbar/segments/vue.md
@@ -4,10 +4,10 @@
     <ion-toolbar>
       <ion-segment value="all">
         <ion-segment-button value="all">
-          All
+          <ion-label>All</ion-label>
         </ion-segment-button>
         <ion-segment-button value="favorites">
-          Favorites
+          <ion-label>Favorites</ion-label>
         </ion-segment-button>
       </ion-segment>
     </ion-toolbar>
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-  import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
+    components: { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
   });
 </script>
 ```