From c616b97242a0b07c84c9fe5bdeb44305c5813476 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 12 Jul 2023 14:26:49 -0400
Subject: [PATCH 1/3] style(animations): react, vue and angular buttons do not
 need id

---
 .../v7/animations/basic/angular/example_component_html.md   | 6 +++---
 static/usage/v7/animations/basic/react.md                   | 6 +++---
 static/usage/v7/animations/basic/vue.md                     | 6 +++---
 .../v7/animations/chain/angular/example_component_html.md   | 6 +++---
 static/usage/v7/animations/chain/react.md                   | 6 +++---
 static/usage/v7/animations/chain/vue.md                     | 6 +++---
 .../v7/animations/group/angular/example_component_html.md   | 6 +++---
 static/usage/v7/animations/group/react.md                   | 6 +++---
 static/usage/v7/animations/group/vue.md                     | 6 +++---
 9 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/static/usage/v7/animations/basic/angular/example_component_html.md b/static/usage/v7/animations/basic/angular/example_component_html.md
index 3a27660393a..1bd8875b1b3 100644
--- a/static/usage/v7/animations/basic/angular/example_component_html.md
+++ b/static/usage/v7/animations/basic/angular/example_component_html.md
@@ -3,7 +3,7 @@
   <ion-card-content>Card</ion-card-content>
 </ion-card>
 
-<ion-button id="play" (click)="play()">Play</ion-button>
-<ion-button id="pause" (click)="pause()">Pause</ion-button>
-<ion-button id="stop" (click)="stop()">Stop</ion-button>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
 ```
diff --git a/static/usage/v7/animations/basic/react.md b/static/usage/v7/animations/basic/react.md
index 6767b71ead1..311c884ac2d 100644
--- a/static/usage/v7/animations/basic/react.md
+++ b/static/usage/v7/animations/basic/react.md
@@ -35,13 +35,13 @@ function Example() {
         <IonCardContent>Card</IonCardContent>
       </IonCard>
 
-      <IonButton id="play" onClick={play}>
+      <IonButton onClick={play}>
         Play
       </IonButton>
-      <IonButton id="pause" onClick={pause}>
+      <IonButton onClick={pause}>
         Pause
       </IonButton>
-      <IonButton id="stop" onClick={stop}>
+      <IonButton onClick={stop}>
         Stop
       </IonButton>
     </>
diff --git a/static/usage/v7/animations/basic/vue.md b/static/usage/v7/animations/basic/vue.md
index a0837b1b81e..afd6c68891b 100644
--- a/static/usage/v7/animations/basic/vue.md
+++ b/static/usage/v7/animations/basic/vue.md
@@ -4,9 +4,9 @@
     <ion-card-content>Card</ion-card-content>
   </ion-card>
 
-  <ion-button id="play" @click="play()">Play</ion-button>
-  <ion-button id="pause" @click="pause()">Pause</ion-button>
-  <ion-button id="stop" @click="stop()">Stop</ion-button>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/animations/chain/angular/example_component_html.md b/static/usage/v7/animations/chain/angular/example_component_html.md
index bb61611b10c..8f8b5a83f58 100644
--- a/static/usage/v7/animations/chain/angular/example_component_html.md
+++ b/static/usage/v7/animations/chain/angular/example_component_html.md
@@ -11,7 +11,7 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" (click)="play()">Play</ion-button>
-<ion-button id="pause" (click)="pause()">Pause</ion-button>
-<ion-button id="stop" (click)="stop()">Stop</ion-button>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
 ```
diff --git a/static/usage/v7/animations/chain/react.md b/static/usage/v7/animations/chain/react.md
index b559f038d7b..34ce95c5404 100644
--- a/static/usage/v7/animations/chain/react.md
+++ b/static/usage/v7/animations/chain/react.md
@@ -79,13 +79,13 @@ function Example() {
         <IonCardContent>Card 3</IonCardContent>
       </IonCard>
 
-      <IonButton id="play" onClick={play}>
+      <IonButton onClick={play}>
         Play
       </IonButton>
-      <IonButton id="pause" onClick={pause}>
+      <IonButton  onClick={pause}>
         Pause
       </IonButton>
-      <IonButton id="stop" onClick={stop}>
+      <IonButton onClick={stop}>
         Stop
       </IonButton>
     </>
diff --git a/static/usage/v7/animations/chain/vue.md b/static/usage/v7/animations/chain/vue.md
index 67077e8efa1..48166a15be2 100644
--- a/static/usage/v7/animations/chain/vue.md
+++ b/static/usage/v7/animations/chain/vue.md
@@ -12,9 +12,9 @@
     <ion-card-content>Card 3</ion-card-content>
   </ion-card>
 
-  <ion-button id="play" @click="play()">Play</ion-button>
-  <ion-button id="pause" @click="pause()">Pause</ion-button>
-  <ion-button id="stop" @click="stop()">Stop</ion-button>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/animations/group/angular/example_component_html.md b/static/usage/v7/animations/group/angular/example_component_html.md
index bb61611b10c..8f8b5a83f58 100644
--- a/static/usage/v7/animations/group/angular/example_component_html.md
+++ b/static/usage/v7/animations/group/angular/example_component_html.md
@@ -11,7 +11,7 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" (click)="play()">Play</ion-button>
-<ion-button id="pause" (click)="pause()">Pause</ion-button>
-<ion-button id="stop" (click)="stop()">Stop</ion-button>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
 ```
diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md
index 23b00bbee74..60aae3fc2f6 100644
--- a/static/usage/v7/animations/group/react.md
+++ b/static/usage/v7/animations/group/react.md
@@ -65,13 +65,13 @@ function Example() {
         <IonCardContent>Card 3</IonCardContent>
       </IonCard>
 
-      <IonButton id="play" onClick={play}>
+      <IonButton onClick={play}>
         Play
       </IonButton>
-      <IonButton id="pause" onClick={pause}>
+      <IonButton onClick={pause}>
         Pause
       </IonButton>
-      <IonButton id="stop" onClick={stop}>
+      <IonButton onClick={stop}>
         Stop
       </IonButton>
     </>
diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md
index 4302f414bb6..144eb7b8259 100644
--- a/static/usage/v7/animations/group/vue.md
+++ b/static/usage/v7/animations/group/vue.md
@@ -12,9 +12,9 @@
     <ion-card-content>Card 3</ion-card-content>
   </ion-card>
 
-  <ion-button id="play" @click="play()">Play</ion-button>
-  <ion-button id="pause" @click="pause()">Pause</ion-button>
-  <ion-button id="stop" @click="stop()">Stop</ion-button>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
 </template>
 
 <script lang="ts">

From c1f4cb0ef2433873bd387cf6b397287a56b58786 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 12 Jul 2023 14:35:44 -0400
Subject: [PATCH 2/3] javascript demos also call click

---
 static/usage/v7/animations/basic/javascript.md | 6 +++---
 static/usage/v7/animations/chain/javascript.md | 6 +++---
 static/usage/v7/animations/group/javascript.md | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/static/usage/v7/animations/basic/javascript.md b/static/usage/v7/animations/basic/javascript.md
index 369131ac39b..3c98a4e039f 100644
--- a/static/usage/v7/animations/basic/javascript.md
+++ b/static/usage/v7/animations/basic/javascript.md
@@ -3,9 +3,9 @@
   <ion-card-content>Card</ion-card-content>
 </ion-card>
 
-<ion-button id="play" onclick="animation.play()">Play</ion-button>
-<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
-<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
 
 <script>
   var animation = createAnimation()
diff --git a/static/usage/v7/animations/chain/javascript.md b/static/usage/v7/animations/chain/javascript.md
index 26011045834..4fd3dc227d3 100644
--- a/static/usage/v7/animations/chain/javascript.md
+++ b/static/usage/v7/animations/chain/javascript.md
@@ -11,9 +11,9 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" onclick="play()">Play</ion-button>
-<ion-button id="pause" onclick="pause()">Pause</ion-button>
-<ion-button id="stop" onclick="stop()">Stop</ion-button>
+<ion-button onclick="play()">Play</ion-button>
+<ion-button onclick="pause()">Pause</ion-button>
+<ion-button onclick="stop()">Stop</ion-button>
 
 <script>
   const cardA = createAnimation()
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
index d6f671660e2..3630f6520df 100644
--- a/static/usage/v7/animations/group/javascript.md
+++ b/static/usage/v7/animations/group/javascript.md
@@ -11,9 +11,9 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" onclick="animation.play()">Play</ion-button>
-<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
-<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
 
 <script>
   const cardA = createAnimation()

From 4e1ee773af8868c9ee88498cbdf00d9baf24c954 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 12 Jul 2023 14:36:35 -0400
Subject: [PATCH 3/3] style lint

---
 static/usage/v7/animations/basic/react.md | 12 +++---------
 static/usage/v7/animations/chain/react.md | 12 +++---------
 static/usage/v7/animations/group/react.md | 12 +++---------
 3 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/static/usage/v7/animations/basic/react.md b/static/usage/v7/animations/basic/react.md
index 311c884ac2d..9134a2d9f24 100644
--- a/static/usage/v7/animations/basic/react.md
+++ b/static/usage/v7/animations/basic/react.md
@@ -35,15 +35,9 @@ function Example() {
         <IonCardContent>Card</IonCardContent>
       </IonCard>
 
-      <IonButton onClick={play}>
-        Play
-      </IonButton>
-      <IonButton onClick={pause}>
-        Pause
-      </IonButton>
-      <IonButton onClick={stop}>
-        Stop
-      </IonButton>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
     </>
   );
 }
diff --git a/static/usage/v7/animations/chain/react.md b/static/usage/v7/animations/chain/react.md
index 34ce95c5404..d00350793f3 100644
--- a/static/usage/v7/animations/chain/react.md
+++ b/static/usage/v7/animations/chain/react.md
@@ -79,15 +79,9 @@ function Example() {
         <IonCardContent>Card 3</IonCardContent>
       </IonCard>
 
-      <IonButton onClick={play}>
-        Play
-      </IonButton>
-      <IonButton  onClick={pause}>
-        Pause
-      </IonButton>
-      <IonButton onClick={stop}>
-        Stop
-      </IonButton>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
     </>
   );
 }
diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md
index 60aae3fc2f6..dc445826e82 100644
--- a/static/usage/v7/animations/group/react.md
+++ b/static/usage/v7/animations/group/react.md
@@ -65,15 +65,9 @@ function Example() {
         <IonCardContent>Card 3</IonCardContent>
       </IonCard>
 
-      <IonButton onClick={play}>
-        Play
-      </IonButton>
-      <IonButton onClick={pause}>
-        Pause
-      </IonButton>
-      <IonButton onClick={stop}>
-        Stop
-      </IonButton>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
     </>
   );
 }