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/readme.md

@@ -24,8 +24,8 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 </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">
@@ -44,26 +44,26 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 </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>
@@ -134,8 +134,8 @@ export class SegmentExample {
 </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">
@@ -154,26 +154,26 @@ export class SegmentExample {
 </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>
@@ -244,8 +244,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">
@@ -264,26 +264,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>
@@ -342,8 +342,8 @@ export const SegmentExample: React.FC = () => (
   </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">
@@ -362,26 +362,26 @@ export const SegmentExample: React.FC = () => (
   </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/segment.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h, writeTask } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
@@ -50,6 +50,13 @@ export class Segment implements ComponentInterface {
    */
   @Prop({ mutable: true }) value?: string | null;
 
+  @Watch('value')
+  protected valueChanged(value: string | undefined) {
+    if (this.didInit) {
+      this.ionChange.emit({ value });
+    }
+  }
+
   /**
    * Emitted when the value property has changed.
    */
@@ -61,14 +68,6 @@ export class Segment implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
-  @Watch('value')
-  protected valueChanged(value: string | undefined) {
-    if (this.didInit) {
-      this.updateButtons();
-      this.ionChange.emit({ value });
-    }
-  }
-
   @Watch('disabled')
   disabledChanged() {
     if (this.gesture && !this.scrollable) {
@@ -76,26 +75,7 @@ export class Segment implements ComponentInterface {
     }
   }
 
-  @Listen('ionSelect')
-  segmentClick(ev: CustomEvent) {
-    const current = ev.target as HTMLIonSegmentButtonElement;
-    const previous = this.checked;
-    this.value = current.value;
-
-    if (previous && this.scrollable) {
-      this.checkButton(previous, current);
-    }
-
-    this.checked = current;
-  }
-
   connectedCallback() {
-    if (this.value === undefined) {
-      const checked = this.getButtons().find(b => b.checked);
-      if (checked) {
-        this.value = checked.value;
-      }
-    }
     this.emitStyle();
   }
 
@@ -104,7 +84,6 @@ export class Segment implements ComponentInterface {
   }
 
   async componentDidLoad() {
-    this.updateButtons();
     this.setCheckedClasses();
 
     this.gesture = (await import('../../utils/gesture')).createGesture({
@@ -119,7 +98,6 @@ export class Segment implements ComponentInterface {
     });
     this.gesture.enable(!this.scrollable);
     this.disabledChanged();
-
     this.didInit = true;
   }
 
@@ -142,6 +120,10 @@ export class Segment implements ComponentInterface {
     this.addRipple(detail);
   }
 
+  private getButtons() {
+    return Array.from(this.el.querySelectorAll('ion-segment-button'));
+  }
+
   /**
    * The gesture blocks the segment button ripple. This
    * function adds the ripple based on the checked segment
@@ -149,7 +131,7 @@ export class Segment implements ComponentInterface {
    */
   private addRipple(detail: GestureDetail) {
     const buttons = this.getButtons();
-    const checked = buttons.find(button => button.checked === true);
+    const checked = buttons.find(button => button.value === this.value);
 
     const ripple = checked!.shadowRoot!.querySelector('ion-ripple-effect');
 
@@ -163,7 +145,7 @@ export class Segment implements ComponentInterface {
   private activate(detail: GestureDetail) {
     const clicked = detail.event.target as HTMLIonSegmentButtonElement;
     const buttons = this.getButtons();
-    const checked = buttons.find(button => button.checked === true);
+    const checked = buttons.find(button => button.value === this.value);
 
     // Make sure we are only checking for activation on a segment button
     // since disabled buttons will get the click on the segment
@@ -173,12 +155,12 @@ export class Segment implements ComponentInterface {
 
     // If there are no checked buttons, set the current button to checked
     if (!checked) {
-      clicked.checked = true;
+      this.value = clicked.value;
     }
 
     // If the gesture began on the clicked button with the indicator
     // then we should activate the indicator
-    if (clicked.checked) {
+    if (this.value === clicked.value) {
       this.activated = true;
     }
   }
@@ -220,17 +202,17 @@ export class Segment implements ComponentInterface {
       currentIndicator.style.setProperty('transform', '');
     });
 
-    current.checked = true;
+    this.value = current.value;
     this.setCheckedClasses();
   }
 
   private setCheckedClasses() {
     const buttons = this.getButtons();
-    const index = buttons.findIndex(button => button.checked === true);
+    const index = buttons.findIndex(button => button.value === this.value);
     const next = index + 1;
 
     // Keep track of the currently checked button
-    this.checked = buttons.find(button => button.checked === true);
+    this.checked = buttons.find(button => button.value === this.value);
 
     for (const button of buttons) {
       button.classList.remove('segment-button-after-checked');
@@ -244,7 +226,7 @@ export class Segment implements ComponentInterface {
     const isRTL = document.dir === 'rtl';
     const activated = this.activated;
     const buttons = this.getButtons();
-    const index = buttons.findIndex(button => button.checked === true);
+    const index = buttons.findIndex(button => button.value === this.value);
     const previous = buttons[index];
     let current;
     let nextIndex;
@@ -318,15 +300,16 @@ export class Segment implements ComponentInterface {
     });
   }
 
-  private updateButtons() {
-    const value = this.value;
-    for (const button of this.getButtons()) {
-      button.checked = (button.value === value);
-    }
-  }
+  private onClick = (ev: Event) => {
+    const current = ev.target as HTMLIonSegmentButtonElement;
+    const previous = this.checked;
+    this.value = current.value;
 
-  private getButtons() {
-    return Array.from(this.el.querySelectorAll('ion-segment-button'));
+    if (previous && this.scrollable) {
+      this.checkButton(previous, current);
+    }
+
+    this.checked = current;
   }
 
   render() {
@@ -334,6 +317,7 @@ export class Segment implements ComponentInterface {
 
     return (
       <Host
+        onClick={this.onClick}
         class={{
           ...createColorClasses(this.color),
           [mode]: true,

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

@@ -64,8 +64,8 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-segment>
-          <ion-segment-button value="all" checked>
+        <ion-segment value="all">
+          <ion-segment-button value="all">
             All
           </ion-segment-button>
           <ion-segment-button value="missed">
@@ -89,14 +89,14 @@
           </ion-segment-button>
         </ion-segment>
 
-        <ion-segment class="segment-no-animate">
-          <ion-segment-button>
+        <ion-segment class="segment-no-animate" value="is">
+          <ion-segment-button value="animate">
             <ion-label>Animate</ion-label>
           </ion-segment-button>
-          <ion-segment-button checked>
+          <ion-segment-button value="is">
             <ion-label>Is</ion-label>
           </ion-segment-button>
-          <ion-segment-button>
+          <ion-segment-button value="false">
             <ion-label>False</ion-label>
           </ion-segment-button>
         </ion-segment>

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

@@ -59,8 +59,8 @@
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment color="tertiary">
-        <ion-segment-button value="all" checked>
+      <ion-segment color="tertiary" value="all">
+        <ion-segment-button value="all">
           All
         </ion-segment-button>
         <ion-segment-button value="missed">
@@ -68,8 +68,8 @@
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment color="success">
-        <ion-segment-button checked value="330">
+      <ion-segment color="success" value="330">
+        <ion-segment-button value="330">
           <ion-label>330ml</ion-label>
         </ion-segment-button>
         <ion-segment-button value="440">
@@ -108,59 +108,59 @@
       </ion-segment>
 
 
-      <ion-segment color="light">
+      <ion-segment color="light" value="rainy">
         <ion-segment-button value="sunny">
           Sunny
         </ion-segment-button>
-        <ion-segment-button value="rainy" checked>
+        <ion-segment-button value="rainy">
           Rainy
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment color="medium">
-        <ion-segment-button checked>
+      <ion-segment color="medium" value="seg1">
+        <ion-segment-button value="seg1">
           <ion-label>Seg 1</ion-label>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button value="seg2">
           <ion-label>Seg 2</ion-label>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button value="seg3">
           <ion-label>Seg 3</ion-label>
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment color="dark">
-        <ion-segment-button>
+      <ion-segment color="dark" value="seg22">
+        <ion-segment-button value="seg21">
           <ion-label>Seg 2 1</ion-label>
         </ion-segment-button>
-        <ion-segment-button checked>
+        <ion-segment-button value="seg22">
           <ion-label>Seg 2 2</ion-label>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button value="seg23">
           <ion-label>Seg 2 3</ion-label>
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment disabled color="danger">
-        <ion-segment-button>
+      <ion-segment disabled color="danger" value="seg22">
+        <ion-segment-button  value="seg21">
           <ion-label>Seg 2 1</ion-label>
         </ion-segment-button>
-        <ion-segment-button checked>
+        <ion-segment-button value="seg22">
           <ion-label>Seg 2 2</ion-label>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button  value="seg23">
           <ion-label>Seg 2 3</ion-label>
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment disabled color="medium">
-        <ion-segment-button>
+      <ion-segment disabled color="medium" value="seg22">
+        <ion-segment-button value="seg21">
           <ion-label>Seg 2 1</ion-label>
         </ion-segment-button>
-        <ion-segment-button checked>
+        <ion-segment-button value="seg22">
           <ion-label>Seg 2 2</ion-label>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button value="seg23">
           <ion-label>Seg 2 3</ion-label>
         </ion-segment-button>
       </ion-segment>

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

@@ -19,16 +19,16 @@
       </ion-toolbar>
 
       <ion-toolbar color="tertiary">
-        <ion-segment id="modeLayout">
-          <ion-segment-button checked>
+        <ion-segment id="modeLayout" value="compass">
+          <ion-segment-button value="compass">
             <ion-icon name="compass"></ion-icon>
             <ion-label>Explore</ion-label>
           </ion-segment-button>
-          <ion-segment-button>
+          <ion-segment-button value="airplane">
             <ion-icon name="airplane"></ion-icon>
             <ion-label>Flights</ion-label>
           </ion-segment-button>
-          <ion-segment-button>
+          <ion-segment-button value="briefcase">
             <ion-icon name="briefcase"></ion-icon>
             <ion-label>Trips</ion-label>
           </ion-segment-button>
@@ -38,148 +38,148 @@
 
     <ion-content>
       <!-- Label only -->
-      <ion-segment id="multi-color">
-        <ion-segment-button checked>
+      <ion-segment id="multi-color" value="one">
+        <ion-segment-button value="one">
           <ion-label>Item One</ion-label>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button value="two">
           <ion-label>Item Two</ion-label>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button value="three"> 
           <ion-label>Item Three</ion-label>
         </ion-segment-button>
       </ion-segment>
 
       <!-- Icon only -->
-      <ion-segment>
-        <ion-segment-button>
+      <ion-segment value="heart">
+        <ion-segment-button value="call">
           <ion-icon name="call"></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>
 
       <!-- Icon top -->
-      <ion-segment>
-        <ion-segment-button>
+      <ion-segment value="heart">
+        <ion-segment-button value="call">
           <ion-label>Item One</ion-label>
           <ion-icon name="call"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button checked>
+        <ion-segment-button value="heart">
           <ion-label>Item Two</ion-label>
           <ion-icon name="heart"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button>
+        <ion-segment-button value="pin">
           <ion-label>Item Three</ion-label>
           <ion-icon name="pin"></ion-icon>
         </ion-segment-button>
       </ion-segment>
 
       <!-- Icon bottom -->
-      <ion-segment>
-        <ion-segment-button checked layout="icon-bottom">
+      <ion-segment value="call">
+        <ion-segment-button layout="icon-bottom" value="call">
           <ion-icon name="call"></ion-icon>
           <ion-label>Item One</ion-label>
         </ion-segment-button>
-        <ion-segment-button layout="icon-bottom">
+        <ion-segment-button layout="icon-bottom" value="heart">
           <ion-icon name="heart"></ion-icon>
           <ion-label>Item Two</ion-label>
         </ion-segment-button>
-        <ion-segment-button layout="icon-bottom">
+        <ion-segment-button layout="icon-bottom" value="pin">
           <ion-icon name="pin"></ion-icon>
           <ion-label>Item Three</ion-label>
         </ion-segment-button>
       </ion-segment>
 
       <!-- Icon start -->
-      <ion-segment>
-        <ion-segment-button checked layout="icon-start">
+      <ion-segment value="call">
+        <ion-segment-button layout="icon-start" value="call">
           <ion-label>Item One</ion-label>
           <ion-icon name="call"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button layout="icon-start">
+        <ion-segment-button layout="icon-start" value="heart">
           <ion-label>Item Two</ion-label>
           <ion-icon name="heart"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button layout="icon-start">
+        <ion-segment-button layout="icon-start" value="pin">
           <ion-label>Item Three</ion-label>
           <ion-icon name="pin"></ion-icon>
         </ion-segment-button>
       </ion-segment>
 
       <!-- Icon end -->
-      <ion-segment>
-        <ion-segment-button checked layout="icon-end">
+      <ion-segment value="call">
+        <ion-segment-button layout="icon-end" value="call">
           <ion-icon name="call"></ion-icon>
           <ion-label>Item One</ion-label>
         </ion-segment-button>
-        <ion-segment-button disabled layout="icon-end">
+        <ion-segment-button disabled layout="icon-end" value="heart">
           <ion-icon name="heart"></ion-icon>
           <ion-label>Item Two</ion-label>
         </ion-segment-button>
-        <ion-segment-button layout="icon-end">
+        <ion-segment-button layout="icon-end" value="pin">
           <ion-icon name="pin"></ion-icon>
           <ion-label>Item Three</ion-label>
         </ion-segment-button>
       </ion-segment>
 
       <!-- Disabled -->
-      <ion-segment scrollable disabled>
-        <ion-segment-button checked layout="icon-end">
+      <ion-segment scrollable disabled value="call">
+        <ion-segment-button layout="icon-end" value="call">
           <ion-icon name="call"></ion-icon>
           <ion-label>Item One</ion-label>
         </ion-segment-button>
-        <ion-segment-button layout="icon-end">
+        <ion-segment-button layout="icon-end" value="heart">
           <ion-icon name="heart"></ion-icon>
           <ion-label>Item Two</ion-label>
         </ion-segment-button>
-        <ion-segment-button layout="icon-end">
+        <ion-segment-button layout="icon-end" value="pin">
           <ion-icon name="pin"></ion-icon>
           <ion-label>Item Three</ion-label>
         </ion-segment-button>
       </ion-segment>
 
       <!-- Color -->
-      <ion-segment color="secondary">
-        <ion-segment-button checked layout="icon-end">
+      <ion-segment color="secondary" value="call">
+        <ion-segment-button layout="icon-end" value="call">
           <ion-icon name="call"></ion-icon>
           <ion-label>Item One</ion-label>
         </ion-segment-button>
-        <ion-segment-button disabled layout="icon-end">
+        <ion-segment-button disabled layout="icon-end" value="heart">
           <ion-icon name="heart"></ion-icon>
           <ion-label>Item Two</ion-label>
         </ion-segment-button>
-        <ion-segment-button layout="icon-end">
+        <ion-segment-button layout="icon-end" value="pin">
           <ion-icon name="pin"></ion-icon>
           <ion-label>Item Three</ion-label>
         </ion-segment-button>
       </ion-segment>
 
       <!-- Scrollable Icons -->
-      <ion-segment scrollable color="tertiary">
-        <ion-segment-button>
+      <ion-segment scrollable color="tertiary" 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>
@@ -230,6 +230,9 @@
           setLayout();
         });
       });
+      document.querySelector('ion-segment').addEventListener('ionChange', (ev) => {
+        console.log('ionChange', ev);
+      });
 
     </script>
   </ion-app>

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

@@ -104,22 +104,22 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-segment>
+        <ion-segment value="rainy">
           <ion-segment-button value="sunny">
             <ion-label>Sunny</ion-label>
           </ion-segment-button>
-          <ion-segment-button value="rainy" checked>
+          <ion-segment-button value="rainy">
             <ion-label>Rainy</ion-label>
           </ion-segment-button>
         </ion-segment>
       </ion-toolbar>
 
       <ion-toolbar color="primary">
-        <ion-segment color="light">
+        <ion-segment color="light" value="rainy">
           <ion-segment-button value="sunny">
             Sunny
           </ion-segment-button>
-          <ion-segment-button value="rainy" checked>
+          <ion-segment-button value="rainy">
             Rainy
           </ion-segment-button>
         </ion-segment>
@@ -127,14 +127,14 @@
 
       <!-- Label only -->
       <ion-toolbar color="primary">
-        <ion-segment>
-          <ion-segment-button checked>
+        <ion-segment value="1">
+          <ion-segment-button value="1">
             <ion-label>Item One</ion-label>
           </ion-segment-button>
-          <ion-segment-button>
+          <ion-segment-button value="2">
             <ion-label>Item Two</ion-label>
           </ion-segment-button>
-          <ion-segment-button>
+          <ion-segment-button value="3">
             <ion-label>Item Three</ion-label>
           </ion-segment-button>
         </ion-segment>
@@ -142,14 +142,14 @@
 
       <!-- Icon only -->
       <ion-toolbar color="secondary">
-        <ion-segment>
-          <ion-segment-button>
+        <ion-segment value="heart">
+          <ion-segment-button value="call">
             <ion-icon name="call"></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>
@@ -157,16 +157,16 @@
 
       <!-- Icon top -->
       <ion-toolbar color="danger">
-        <ion-segment>
-          <ion-segment-button>
+        <ion-segment value="2">
+          <ion-segment-button value="1">
             <ion-label>Item One</ion-label>
             <ion-icon name="call"></ion-icon>
           </ion-segment-button>
-          <ion-segment-button checked>
+          <ion-segment-button value="2">
             <ion-label>Item Two</ion-label>
             <ion-icon name="heart"></ion-icon>
           </ion-segment-button>
-          <ion-segment-button>
+          <ion-segment-button value="3">
             <ion-label>Item Three</ion-label>
             <ion-icon name="pin"></ion-icon>
           </ion-segment-button>
@@ -175,16 +175,16 @@
 
       <!-- Icon bottom -->
       <ion-toolbar color="tertiary">
-        <ion-segment>
-          <ion-segment-button checked layout="icon-bottom">
+        <ion-segment value="1">
+          <ion-segment-button value="1" layout="icon-bottom">
             <ion-icon name="call"></ion-icon>
             <ion-label>Item One</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-bottom">
+          <ion-segment-button value="2" layout="icon-bottom">
             <ion-icon name="heart"></ion-icon>
             <ion-label>Item Two</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-bottom">
+          <ion-segment-button value="3" layout="icon-bottom">
             <ion-icon name="pin"></ion-icon>
             <ion-label>Item Three</ion-label>
           </ion-segment-button>
@@ -193,16 +193,16 @@
 
       <!-- Icon start -->
       <ion-toolbar color="dark">
-        <ion-segment>
-          <ion-segment-button checked layout="icon-start">
+        <ion-segment value="1">
+          <ion-segment-button value="1" layout="icon-start">
             <ion-label>Item One</ion-label>
             <ion-icon name="call"></ion-icon>
           </ion-segment-button>
-          <ion-segment-button layout="icon-start">
+          <ion-segment-button value="2" layout="icon-start">
             <ion-label>Item Two</ion-label>
             <ion-icon name="heart"></ion-icon>
           </ion-segment-button>
-          <ion-segment-button layout="icon-start">
+          <ion-segment-button value="3" layout="icon-start">
             <ion-label>Item Three</ion-label>
             <ion-icon name="pin"></ion-icon>
           </ion-segment-button>
@@ -211,16 +211,16 @@
 
       <!-- Icon end -->
       <ion-toolbar color="medium">
-        <ion-segment>
-          <ion-segment-button checked layout="icon-end">
+        <ion-segment value="1">
+          <ion-segment-button value="1" layout="icon-end">
             <ion-icon name="call"></ion-icon>
             <ion-label>Item One</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-end">
+          <ion-segment-button value="2" layout="icon-end">
             <ion-icon name="heart"></ion-icon>
             <ion-label>Item Two</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-end">
+          <ion-segment-button value="3" layout="icon-end">
             <ion-icon name="pin"></ion-icon>
             <ion-label>Item Three</ion-label>
           </ion-segment-button>
@@ -229,16 +229,16 @@
 
       <!-- Disabled -->
       <ion-toolbar color="success">
-        <ion-segment disabled>
-          <ion-segment-button checked layout="icon-end">
+        <ion-segment disabled value="1">
+          <ion-segment-button value="1" layout="icon-end">
             <ion-icon name="call"></ion-icon>
             <ion-label>Item One</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-end">
+          <ion-segment-button value="2" layout="icon-end">
             <ion-icon name="heart"></ion-icon>
             <ion-label>Item Two</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-end">
+          <ion-segment-button value="3" layout="icon-end">
             <ion-icon name="pin"></ion-icon>
             <ion-label>Item Three</ion-label>
           </ion-segment-button>
@@ -247,16 +247,16 @@
 
       <!-- Color -->
       <ion-toolbar color="light">
-        <ion-segment color="secondary">
-          <ion-segment-button checked layout="icon-end">
+        <ion-segment color="secondary" value="1">
+          <ion-segment-button value="1" layout="icon-end">
             <ion-icon name="call"></ion-icon>
             <ion-label>Item One</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-end">
+          <ion-segment-button value="2" layout="icon-end">
             <ion-icon name="heart"></ion-icon>
             <ion-label>Item Two</ion-label>
           </ion-segment-button>
-          <ion-segment-button layout="icon-end">
+          <ion-segment-button value="3" layout="icon-end">
             <ion-icon name="pin"></ion-icon>
             <ion-label>Item Three</ion-label>
           </ion-segment-button>

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>