refactor(): remove checked property in favor of parent value (#19449)

BREAKING CHANGE:


The following components have been updated to remove the checked or selected properties:

- Radio
- Segment Button
- Select

Developers should set the value property on the respective parent components in order to managed checked/selected status.

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

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

@@ -10,8 +10,8 @@
 </ion-segment>
 
 <!-- Disabled Segment -->
-<ion-segment (ionChange)="segmentChanged($event)" disabled>
-  <ion-segment-button value="sunny" checked>
+<ion-segment (ionChange)="segmentChanged($event)" disabled value="sunny">
+  <ion-segment-button value="sunny">
     <ion-label>Sunny</ion-label>
   </ion-segment-button>
   <ion-segment-button value="rainy">
@@ -30,26 +30,26 @@
 </ion-segment>
 
 <!-- Scrollable Segment -->
-<ion-segment scrollable>
-  <ion-segment-button>
+<ion-segment scrollable value="heart">
+  <ion-segment-button value="home">
     <ion-icon name="home"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button checked>
+  <ion-segment-button value="heart">
     <ion-icon name="heart"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="pin">
     <ion-icon name="pin"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="star">
     <ion-icon name="star"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="call">
     <ion-icon name="call"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="globe">
     <ion-icon name="globe"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="basket">
     <ion-icon name="basket"></ion-icon>
   </ion-segment-button>
 </ion-segment>

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

@@ -10,8 +10,8 @@
 </ion-segment>
 
 <!-- Disabled Segment -->
-<ion-segment disabled>
-  <ion-segment-button value="sunny" checked>
+<ion-segment disabled value="sunny">
+  <ion-segment-button value="sunny">
     <ion-label>Sunny</ion-label>
   </ion-segment-button>
   <ion-segment-button value="rainy">
@@ -30,26 +30,26 @@
 </ion-segment>
 
 <!-- Scrollable Segment -->
-<ion-segment scrollable>
-  <ion-segment-button>
+<ion-segment scrollable value="heart">
+  <ion-segment-button value="home">
     <ion-icon name="home"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button checked>
+  <ion-segment-button value="heart">
     <ion-icon name="heart"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="pin">
     <ion-icon name="pin"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="star">
     <ion-icon name="star"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="call">
     <ion-icon name="call"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="globe">
     <ion-icon name="globe"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button>
+  <ion-segment-button value="basket">
     <ion-icon name="basket"></ion-icon>
   </ion-segment-button>
 </ion-segment>

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

@@ -15,8 +15,8 @@ export const SegmentExample: React.FC = () => (
     </IonSegment>
 
     {/*-- Disabled Segment --*/}
-    <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled>
-      <IonSegmentButton value="sunny" checked>
+    <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value="sunny">
+      <IonSegmentButton value="sunny">
         <IonLabel>Sunny</IonLabel>
       </IonSegmentButton>
       <IonSegmentButton value="rainy">
@@ -35,26 +35,26 @@ export const SegmentExample: React.FC = () => (
     </IonSegment>
 
     {/*-- Scrollable Segment --*/}
-    <IonSegment scrollable>
-      <IonSegmentButton>
+    <IonSegment scrollable value="heart">
+      <IonSegmentButton value="home">
         <IonIcon name="home" />
       </IonSegmentButton>
-      <IonSegmentButton checked>
+      <IonSegmentButton value="heart">
         <IonIcon name="heart" />
       </IonSegmentButton>
-      <IonSegmentButton>
+      <IonSegmentButton value="pin">
         <IonIcon name="pin" />
       </IonSegmentButton>
-      <IonSegmentButton>
+      <IonSegmentButton value="star">
         <IonIcon name="star" />
       </IonSegmentButton>
-      <IonSegmentButton>
+      <IonSegmentButton value="call">
         <IonIcon name="call" />
       </IonSegmentButton>
-      <IonSegmentButton>
+      <IonSegmentButton value="globe">
         <IonIcon name="globe" />
       </IonSegmentButton>
-      <IonSegmentButton>
+      <IonSegmentButton value="basket">
         <IonIcon name="basket" />
       </IonSegmentButton>
     </IonSegment>

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

@@ -11,8 +11,8 @@
   </ion-segment>
 
   <!-- Disabled Segment -->
-  <ion-segment @ionChange="segmentChanged($event)" disabled>
-    <ion-segment-button value="sunny" checked>
+  <ion-segment @ionChange="segmentChanged($event)" disabled value="sunny">
+    <ion-segment-button value="sunny">
       <ion-label>Sunny</ion-label>
     </ion-segment-button>
     <ion-segment-button value="rainy">
@@ -31,26 +31,26 @@
   </ion-segment>
 
   <!-- Scrollable Segment -->
-  <ion-segment scrollable>
-    <ion-segment-button>
+  <ion-segment scrollable value="heart">
+    <ion-segment-button value="home">
       <ion-icon name="home"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button checked>
+    <ion-segment-button value="heart">
       <ion-icon name="heart"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="pin">
       <ion-icon name="pin"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="star">
       <ion-icon name="star"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="call">
       <ion-icon name="call"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="globe">
       <ion-icon name="globe"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="basket">
       <ion-icon name="basket"></ion-icon>
     </ion-segment-button>
   </ion-segment>