docs(segment): update segment usage to include label (#16882)

Adapt docs to 4.0.0-beta.16 breaking change

core/src/components/segment/readme.md

@@ -16,30 +16,30 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 <!-- Default Segment -->
 <ion-segment (ionChange)="segmentChanged($event)">
   <ion-segment-button value="friends">
-    Friends
+    <ion-label>Friends</ion-label>
   </ion-segment-button>
   <ion-segment-button value="enemies">
-    Enemies
+    <ion-label>Enemies</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Disabled Segment -->
 <ion-segment (ionChange)="segmentChanged($event)" disabled>
   <ion-segment-button value="sunny" checked>
-    Sunny
+    <ion-label>Sunny</ion-label>
   </ion-segment-button>
   <ion-segment-button value="rainy">
-    Rainy
+    <ion-label>Rainy</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Segment with anchors -->
 <ion-segment (ionChange)="segmentChanged($event)">
   <ion-segment-button href="#dogs" value="dogs">
-    Dogs
+    <ion-label>Dogs</ion-label>
   </ion-segment-button>
   <ion-segment-button href="#cats" value="cats">
-    Cats
+    <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
 
@@ -71,13 +71,13 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 <!-- Segment with secondary color -->
 <ion-segment (ionChange)="segmentChanged($event)" color="secondary">
   <ion-segment-button value="standard">
-    Standard
+    <ion-label>Standard</ion-label>
   </ion-segment-button>
   <ion-segment-button value="hybrid">
-    Hybrid
+    <ion-label>Hybrid</ion-label>
   </ion-segment-button>
   <ion-segment-button value="sat">
-    Satellite
+    <ion-label>Satellite</ion-label>
   </ion-segment-button>
 </ion-segment>
 
@@ -116,30 +116,30 @@ export class SegmentExample {
 <!-- Default Segment -->
 <ion-segment>
   <ion-segment-button value="friends">
-    Friends
+    <ion-label>Friends</ion-label>
   </ion-segment-button>
   <ion-segment-button value="enemies">
-    Enemies
+    <ion-label>Enemies</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Disabled Segment -->
 <ion-segment disabled>
   <ion-segment-button value="sunny" checked>
-    Sunny
+    <ion-label>Sunny</ion-label>
   </ion-segment-button>
   <ion-segment-button value="rainy">
-    Rainy
+    <ion-label>Rainy</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Segment with anchors -->
 <ion-segment>
   <ion-segment-button href="#dogs" value="dogs">
-    Dogs
+    <ion-label>Dogs</ion-label>
   </ion-segment-button>
   <ion-segment-button href="#cats" value="cats">
-    Cats
+    <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
 
@@ -171,13 +171,13 @@ export class SegmentExample {
 <!-- Segment with secondary color -->
 <ion-segment color="secondary">
   <ion-segment-button value="standard">
-    Standard
+    <ion-label>Standard</ion-label>
   </ion-segment-button>
   <ion-segment-button value="hybrid">
-    Hybrid
+    <ion-label>Hybrid</ion-label>
   </ion-segment-button>
   <ion-segment-button value="sat">
-    Satellite
+    <ion-label>Satellite</ion-label>
   </ion-segment-button>
 </ion-segment>
 

core/src/components/segment/usage/angular.md

@@ -2,30 +2,30 @@
 <!-- Default Segment -->
 <ion-segment (ionChange)="segmentChanged($event)">
   <ion-segment-button value="friends">
-    Friends
+    <ion-label>Friends</ion-label>
   </ion-segment-button>
   <ion-segment-button value="enemies">
-    Enemies
+    <ion-label>Enemies</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Disabled Segment -->
 <ion-segment (ionChange)="segmentChanged($event)" disabled>
   <ion-segment-button value="sunny" checked>
-    Sunny
+    <ion-label>Sunny</ion-label>
   </ion-segment-button>
   <ion-segment-button value="rainy">
-    Rainy
+    <ion-label>Rainy</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Segment with anchors -->
 <ion-segment (ionChange)="segmentChanged($event)">
   <ion-segment-button href="#dogs" value="dogs">
-    Dogs
+    <ion-label>Dogs</ion-label>
   </ion-segment-button>
   <ion-segment-button href="#cats" value="cats">
-    Cats
+    <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
 
@@ -57,13 +57,13 @@
 <!-- Segment with secondary color -->
 <ion-segment (ionChange)="segmentChanged($event)" color="secondary">
   <ion-segment-button value="standard">
-    Standard
+    <ion-label>Standard</ion-label>
   </ion-segment-button>
   <ion-segment-button value="hybrid">
-    Hybrid
+    <ion-label>Hybrid</ion-label>
   </ion-segment-button>
   <ion-segment-button value="sat">
-    Satellite
+    <ion-label>Satellite</ion-label>
   </ion-segment-button>
 </ion-segment>
 

core/src/components/segment/usage/javascript.md

@@ -2,30 +2,30 @@
 <!-- Default Segment -->
 <ion-segment>
   <ion-segment-button value="friends">
-    Friends
+    <ion-label>Friends</ion-label>
   </ion-segment-button>
   <ion-segment-button value="enemies">
-    Enemies
+    <ion-label>Enemies</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Disabled Segment -->
 <ion-segment disabled>
   <ion-segment-button value="sunny" checked>
-    Sunny
+    <ion-label>Sunny</ion-label>
   </ion-segment-button>
   <ion-segment-button value="rainy">
-    Rainy
+    <ion-label>Rainy</ion-label>
   </ion-segment-button>
 </ion-segment>
 
 <!-- Segment with anchors -->
 <ion-segment>
   <ion-segment-button href="#dogs" value="dogs">
-    Dogs
+    <ion-label>Dogs</ion-label>
   </ion-segment-button>
   <ion-segment-button href="#cats" value="cats">
-    Cats
+    <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
 
@@ -57,13 +57,13 @@
 <!-- Segment with secondary color -->
 <ion-segment color="secondary">
   <ion-segment-button value="standard">
-    Standard
+    <ion-label>Standard</ion-label>
   </ion-segment-button>
   <ion-segment-button value="hybrid">
-    Hybrid
+    <ion-label>Hybrid</ion-label>
   </ion-segment-button>
   <ion-segment-button value="sat">
-    Satellite
+    <ion-label>Satellite</ion-label>
   </ion-segment-button>
 </ion-segment>