From fcf97465f538967a5a700712a8b62dc4f0c6af8c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 25 Feb 2020 10:30:04 -0500
Subject: [PATCH] docs(segment-button): update usage for v5 (#20612)

---
 core/src/components/segment-button/readme.md  | 38 +++++++++----------
 .../segment-button/usage/angular.md           | 12 +++---
 .../segment-button/usage/javascript.md        | 12 +++---
 .../components/segment-button/usage/react.md  |  2 +-
 .../components/segment-button/usage/vue.md    | 12 +++---
 5 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index a59ef2d18a..fe77f22de3 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -11,12 +11,12 @@ Segment buttons are groups of related buttons inside of a [Segment](../segment).
 ### Angular
 
 ```html
-<!-- Segment buttons with text and click listeners -->
-<ion-segment>
-  <ion-segment-button (ionSelect)="segmentButtonClicked($event)">
+<!-- Segment buttons with text and click listener -->
+<ion-segment (ionChange)="segmentChanged($event)">
+  <ion-segment-button>
     <ion-label>Friends</ion-label>
   </ion-segment-button>
-  <ion-segment-button (ionSelect)="segmentButtonClicked($event)">
+  <ion-segment-button>
     <ion-label>Enemies</ion-label>
   </ion-segment-button>
 </ion-segment>
@@ -157,8 +157,8 @@ import { Component } from '@angular/core';
   styleUrls: ['./segment-button-example.css'],
 })
 export class SegmentButtonExample {
-  segmentButtonClicked(ev: any) {
-    console.log('Segment button clicked', ev);
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
   }
 }
 ```
@@ -305,13 +305,11 @@ export class SegmentButtonExample {
 ```
 
 ```javascript
-// Listen for ionClick on all segment buttons
-const segmentButtons = document.querySelectorAll('ion-segment-button')
-for (let i = 0; i < segmentButtons.length; i++) {
-  segmentButtons[i].addEventListener('ionSelect', (ev) => {
-    console.log('Segment button clicked', ev);
-  })
-}
+// Listen for ionChange on segment
+const segment = document.querySelector('ion-segment');
+segment.addEventListener('ionChange', (ev) => {
+  console.log('Segment changed', ev);
+})
 ```
 
 
@@ -331,7 +329,7 @@ export const SegmentButtonExamples: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        {/*-- Segment buttons with text and click listeners --*/}
+        {/*-- Segment buttons with text and click listener --*/}
         <IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}>
           <IonSegmentButton value="Friends">
             <IonLabel>Friends</IonLabel>
@@ -477,12 +475,12 @@ export const SegmentButtonExamples: React.FC = () => {
 
 ```html
 <template>
-  <!-- Segment buttons with text and click listeners -->
-  <ion-segment>
-    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+  <!-- Segment buttons with text and click listener -->
+  <ion-segment @ionChange="segmentChanged($event)">
+    <ion-segment-button>
       <ion-label>Friends</ion-label>
     </ion-segment-button>
-    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+    <ion-segment-button>
       <ion-label>Enemies</ion-label>
     </ion-segment-button>
   </ion-segment>
@@ -619,8 +617,8 @@ export const SegmentButtonExamples: React.FC = () => {
 
   @Component()
   export default class Example extends Vue {
-    segmentButtonClicked(ev: any) {
-      console.log('Segment button clicked', ev);
+    segmentChanged(ev: any) {
+      console.log('Segment changed', ev);
     }
   }
 </script>
diff --git a/core/src/components/segment-button/usage/angular.md b/core/src/components/segment-button/usage/angular.md
index 01abc4b3ec..1d723d9b62 100644
--- a/core/src/components/segment-button/usage/angular.md
+++ b/core/src/components/segment-button/usage/angular.md
@@ -1,10 +1,10 @@
 ```html
-<!-- Segment buttons with text and click listeners -->
-<ion-segment>
-  <ion-segment-button (ionSelect)="segmentButtonClicked($event)">
+<!-- Segment buttons with text and click listener -->
+<ion-segment (ionChange)="segmentChanged($event)">
+  <ion-segment-button>
     <ion-label>Friends</ion-label>
   </ion-segment-button>
-  <ion-segment-button (ionSelect)="segmentButtonClicked($event)">
+  <ion-segment-button>
     <ion-label>Enemies</ion-label>
   </ion-segment-button>
 </ion-segment>
@@ -145,8 +145,8 @@ import { Component } from '@angular/core';
   styleUrls: ['./segment-button-example.css'],
 })
 export class SegmentButtonExample {
-  segmentButtonClicked(ev: any) {
-    console.log('Segment button clicked', ev);
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
   }
 }
 ```
\ No newline at end of file
diff --git a/core/src/components/segment-button/usage/javascript.md b/core/src/components/segment-button/usage/javascript.md
index 18657506c8..bf6e8a23c5 100644
--- a/core/src/components/segment-button/usage/javascript.md
+++ b/core/src/components/segment-button/usage/javascript.md
@@ -137,11 +137,9 @@
 ```
 
 ```javascript
-// Listen for ionClick on all segment buttons
-const segmentButtons = document.querySelectorAll('ion-segment-button')
-for (let i = 0; i < segmentButtons.length; i++) {
-  segmentButtons[i].addEventListener('ionSelect', (ev) => {
-    console.log('Segment button clicked', ev);
-  })
-}
+// Listen for ionChange on segment
+const segment = document.querySelector('ion-segment');
+segment.addEventListener('ionChange', (ev) => {
+  console.log('Segment changed', ev);
+})
 ```
\ No newline at end of file
diff --git a/core/src/components/segment-button/usage/react.md b/core/src/components/segment-button/usage/react.md
index 70a5d5628c..86f4c5ed3f 100644
--- a/core/src/components/segment-button/usage/react.md
+++ b/core/src/components/segment-button/usage/react.md
@@ -12,7 +12,7 @@ export const SegmentButtonExamples: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        {/*-- Segment buttons with text and click listeners --*/}
+        {/*-- Segment buttons with text and click listener --*/}
         <IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}>
           <IonSegmentButton value="Friends">
             <IonLabel>Friends</IonLabel>
diff --git a/core/src/components/segment-button/usage/vue.md b/core/src/components/segment-button/usage/vue.md
index 290c84f665..0f02e396cc 100644
--- a/core/src/components/segment-button/usage/vue.md
+++ b/core/src/components/segment-button/usage/vue.md
@@ -1,11 +1,11 @@
 ```html
 <template>
-  <!-- Segment buttons with text and click listeners -->
-  <ion-segment>
-    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+  <!-- Segment buttons with text and click listener -->
+  <ion-segment @ionChange="segmentChanged($event)">
+    <ion-segment-button>
       <ion-label>Friends</ion-label>
     </ion-segment-button>
-    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+    <ion-segment-button>
       <ion-label>Enemies</ion-label>
     </ion-segment-button>
   </ion-segment>
@@ -142,8 +142,8 @@
 
   @Component()
   export default class Example extends Vue {
-    segmentButtonClicked(ev: any) {
-      console.log('Segment button clicked', ev);
+    segmentChanged(ev: any) {
+      console.log('Segment changed', ev);
     }
   }
 </script>