docs(segment): wrap text in labels for segments in toolbar playground (#2815)

Author: brandyscarney

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>

static/usage/v6/toolbar/segments/demo.html

@@ -18,15 +18,15 @@
       <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>
     </ion-header>
   </ion-app>
 </body>
 
-</html>
+</html>

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>

static/usage/v6/toolbar/segments/react.md

@@ -1,17 +1,17 @@
 ```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 (
     <IonHeader>
       <IonToolbar>
         <IonSegment value="all">
           <IonSegmentButton value="all">
-            All
+            <IonLabel>All</IonLabel>
           </IonSegmentButton>
           <IonSegmentButton value="favorites">
-            Favorites
+            <IonLabel>Favorites</IonLabel>
           </IonSegmentButton>
         </IonSegment>
       </IonToolbar>

static/usage/v6/toolbar/segments/vue.md

@@ -4,22 +4,22 @@
     <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>
   </ion-header>
 </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>
 ```

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>

static/usage/v7/toolbar/segments/demo.html

@@ -18,15 +18,15 @@
       <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>
     </ion-header>
   </ion-app>
 </body>
 
-</html>
+</html>

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>

static/usage/v7/toolbar/segments/react.md

@@ -1,17 +1,17 @@
 ```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 (
     <IonHeader>
       <IonToolbar>
         <IonSegment value="all">
           <IonSegmentButton value="all">
-            All
+            <IonLabel>All</IonLabel>
           </IonSegmentButton>
           <IonSegmentButton value="favorites">
-            Favorites
+            <IonLabel>Favorites</IonLabel>
           </IonSegmentButton>
         </IonSegment>
       </IonToolbar>

static/usage/v7/toolbar/segments/vue.md

@@ -4,22 +4,22 @@
     <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>
   </ion-header>
 </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>
 ```