From fe745aeb89be9c270fdc61a91c34df654656e56e Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 7 Nov 2023 00:23:46 -0500
Subject: [PATCH 1/3] docs(alert): update content in playground examples

---
 .../presenting/controller/angular/example_component_ts.md | 8 ++++----
 static/usage/v7/alert/presenting/controller/demo.html     | 8 ++++----
 static/usage/v7/alert/presenting/controller/javascript.md | 8 ++++----
 static/usage/v7/alert/presenting/controller/react.md      | 8 ++++----
 static/usage/v7/alert/presenting/controller/vue.md        | 8 ++++----
 .../presenting/isOpen/angular/example_component_html.md   | 6 +++---
 .../presenting/isOpen/angular/example_component_ts.md     | 2 +-
 static/usage/v7/alert/presenting/isOpen/demo.html         | 8 ++++++--
 static/usage/v7/alert/presenting/isOpen/javascript.md     | 8 ++++++--
 static/usage/v7/alert/presenting/isOpen/react.md          | 8 ++++----
 static/usage/v7/alert/presenting/isOpen/vue.md            | 8 ++++----
 .../presenting/trigger/angular/example_component_html.md  | 6 +++---
 .../presenting/trigger/angular/example_component_ts.md    | 2 +-
 static/usage/v7/alert/presenting/trigger/demo.html        | 8 ++++----
 static/usage/v7/alert/presenting/trigger/javascript.md    | 8 ++++----
 static/usage/v7/alert/presenting/trigger/react.md         | 8 ++++----
 static/usage/v7/alert/presenting/trigger/vue.md           | 8 ++++----
 17 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
index 32583600432..6fdd69c7f69 100644
--- a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
@@ -11,10 +11,10 @@ export class ExampleComponent {
 
   async presentAlert() {
     const alert = await this.alertController.create({
-      header: 'Alert',
-      subHeader: 'Important message',
-      message: 'This is an alert!',
-      buttons: ['OK'],
+      header: 'A Short Title Is Best',
+      subHeader: 'A Sub Header Is Optional',
+      message: 'A message should be a short, complete sentence.',
+      buttons: ['Action'],
     });
 
     await alert.present();
diff --git a/static/usage/v7/alert/presenting/controller/demo.html b/static/usage/v7/alert/presenting/controller/demo.html
index 62efcb2413c..d4e86b7fb77 100644
--- a/static/usage/v7/alert/presenting/controller/demo.html
+++ b/static/usage/v7/alert/presenting/controller/demo.html
@@ -22,10 +22,10 @@
     <script>
       async function presentAlert() {
         const alert = document.createElement('ion-alert');
-        alert.header = 'Alert';
-        alert.subHeader = 'Important message';
-        alert.message = 'This is an alert!';
-        alert.buttons = ['OK'];
+        alert.header = 'A Short Title Is Best';
+        alert.subHeader = 'A Sub Header Is Optional';
+        alert.message = 'A message should be a short, complete sentence.';
+        alert.buttons = ['Action'];
 
         document.body.appendChild(alert);
         await alert.present();
diff --git a/static/usage/v7/alert/presenting/controller/javascript.md b/static/usage/v7/alert/presenting/controller/javascript.md
index b9159bf2fde..0847251aba7 100644
--- a/static/usage/v7/alert/presenting/controller/javascript.md
+++ b/static/usage/v7/alert/presenting/controller/javascript.md
@@ -4,10 +4,10 @@
 <script>
   async function presentAlert() {
     const alert = document.createElement('ion-alert');
-    alert.header = 'Alert';
-    alert.subHeader = 'Important message';
-    alert.message = 'This is an alert!';
-    alert.buttons = ['OK'];
+    alert.header = 'A Short Title Is Best';
+    alert.subHeader = 'A Sub Header Is Optional';
+    alert.message = 'A message should be a short, complete sentence.';
+    alert.buttons = ['Action'];
 
     document.body.appendChild(alert);
     await alert.present();
diff --git a/static/usage/v7/alert/presenting/controller/react.md b/static/usage/v7/alert/presenting/controller/react.md
index 4e59124b155..0ae2dbec301 100644
--- a/static/usage/v7/alert/presenting/controller/react.md
+++ b/static/usage/v7/alert/presenting/controller/react.md
@@ -9,10 +9,10 @@ function Example() {
     <IonButton
       onClick={() =>
         presentAlert({
-          header: 'Alert',
-          subHeader: 'Important message',
-          message: 'This is an alert!',
-          buttons: ['OK'],
+          header: 'A Short Title Is Best',
+          subHeader: 'A Sub Header Is Optional',
+          message: 'A message should be a short, complete sentence.',
+          buttons: ['Action'],
         })
       }
     >
diff --git a/static/usage/v7/alert/presenting/controller/vue.md b/static/usage/v7/alert/presenting/controller/vue.md
index 8c46798eff5..ed0a4da5fc7 100644
--- a/static/usage/v7/alert/presenting/controller/vue.md
+++ b/static/usage/v7/alert/presenting/controller/vue.md
@@ -8,10 +8,10 @@
 
   const presentAlert = async () => {
     const alert = await alertController.create({
-      header: 'Alert',
-      subHeader: 'Important message',
-      message: 'This is an alert!',
-      buttons: ['OK'],
+      header: 'A Short Title Is Best',
+      subHeader: 'A Sub Header Is Optional',
+      message: 'A message should be a short, complete sentence.',
+      buttons: ['Action'],
     });
 
     await alert.present();
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
index 504cb5b4863..6394f95a34b 100644
--- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
+++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
@@ -2,9 +2,9 @@
 <ion-button (click)="setOpen(true)">Click Me</ion-button>
 <ion-alert
   [isOpen]="isAlertOpen"
-  header="Alert"
-  subHeader="Important message"
-  message="This is an alert!"
+  header="A Short Title Is Best"
+  subHeader="A Sub Header Is Optional"
+  message="A message should be a short, complete sentence."
   [buttons]="alertButtons"
   (didDismiss)="setOpen(false)"
 ></ion-alert>
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
index 789679a2ccc..82d1f17e457 100644
--- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
+++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 })
 export class ExampleComponent {
   isAlertOpen = false;
-  public alertButtons = ['OK'];
+  alertButtons = ['Action'];
 
   setOpen(isOpen: boolean) {
     this.isAlertOpen = isOpen;
diff --git a/static/usage/v7/alert/presenting/isOpen/demo.html b/static/usage/v7/alert/presenting/isOpen/demo.html
index ef694832be4..23c17609177 100644
--- a/static/usage/v7/alert/presenting/isOpen/demo.html
+++ b/static/usage/v7/alert/presenting/isOpen/demo.html
@@ -15,7 +15,11 @@
       <ion-content>
         <div class="container">
           <ion-button onclick="alert.isOpen = true">Click Me</ion-button>
-          <ion-alert header="Alert" sub-header="Important message" message="This is an alert!"></ion-alert>
+          <ion-alert
+            header="A Short Title Is Best"
+            sub-header="A Sub Header Is Optional"
+            message="A message should be a short, complete sentence."
+          ></ion-alert>
         </div>
       </ion-content>
     </ion-app>
@@ -23,7 +27,7 @@
     <script>
       const alert = document.querySelector('ion-alert');
 
-      alert.buttons = ['OK'];
+      alert.buttons = ['Action'];
       alert.addEventListener('ionAlertDidDismiss', () => {
         alert.isOpen = false;
       });
diff --git a/static/usage/v7/alert/presenting/isOpen/javascript.md b/static/usage/v7/alert/presenting/isOpen/javascript.md
index 21f310c1904..67ae47c5770 100644
--- a/static/usage/v7/alert/presenting/isOpen/javascript.md
+++ b/static/usage/v7/alert/presenting/isOpen/javascript.md
@@ -1,11 +1,15 @@
 ```html
 <ion-button onclick="alert.isOpen = true">Click Me</ion-button>
-<ion-alert header="Alert" sub-header="Important message" message="This is an alert!"></ion-alert>
+<ion-alert
+  header="A Short Title Is Best"
+  sub-header="A Sub Header Is Optional"
+  message="A message should be a short, complete sentence."
+></ion-alert>
 
 <script>
   const alert = document.querySelector('ion-alert');
 
-  alert.buttons = ['OK'];
+  alert.buttons = ['Action'];
   alert.addEventListener('ionAlertDidDismiss', () => {
     alert.isOpen = false;
   });
diff --git a/static/usage/v7/alert/presenting/isOpen/react.md b/static/usage/v7/alert/presenting/isOpen/react.md
index 5ce08ffe1d0..e55bf79f93b 100644
--- a/static/usage/v7/alert/presenting/isOpen/react.md
+++ b/static/usage/v7/alert/presenting/isOpen/react.md
@@ -10,10 +10,10 @@ function Example() {
       <IonButton onClick={() => setIsOpen(true)}>Click Me</IonButton>
       <IonAlert
         isOpen={isOpen}
-        header="Alert"
-        subHeader="Important message"
-        message="This is an alert!"
-        buttons={['OK']}
+        header="A Short Title Is Best"
+        subHeader="A Sub Header Is Optional"
+        message="A message should be a short, complete sentence."
+        buttons={['Action']}
         onDidDismiss={() => setIsOpen(false)}
       ></IonAlert>
     </>
diff --git a/static/usage/v7/alert/presenting/isOpen/vue.md b/static/usage/v7/alert/presenting/isOpen/vue.md
index d86afe31101..1d23990668b 100644
--- a/static/usage/v7/alert/presenting/isOpen/vue.md
+++ b/static/usage/v7/alert/presenting/isOpen/vue.md
@@ -3,9 +3,9 @@
   <ion-button @click="setOpen(true)">Click Me</ion-button>
   <ion-alert
     :is-open="isOpen"
-    header="Alert"
-    sub-header="Important message"
-    message="This is an alert!"
+    header="A Short Title Is Best"
+    sub-header="A Sub Header Is Optional"
+    message="A message should be a short, complete sentence."
     :buttons="alertButtons"
     @didDismiss="setOpen(false)"
   ></ion-alert>
@@ -16,7 +16,7 @@
   import { IonAlert, IonButton } from '@ionic/vue';
 
   const isOpen = ref(false);
-  const alertButtons = ['OK'];
+  const alertButtons = ['Action'];
 
   const setOpen = (state: boolean) => {
     isOpen.value = state;
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
index b067763d8fc..91260b30c52 100644
--- a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
@@ -2,9 +2,9 @@
 <ion-button id="present-alert">Click Me</ion-button>
 <ion-alert
   trigger="present-alert"
-  header="Alert"
-  subHeader="Important message"
-  message="This is an alert!"
+  header="A Short Title Is Best"
+  sub-header="A Sub Header Is Optional"
+  message="A message should be a short, complete sentence."
   [buttons]="alertButtons"
 ></ion-alert>
 ```
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
index c63ce5858e4..9526ebdde8f 100644
--- a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
@@ -6,6 +6,6 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public alertButtons = ['OK'];
+  alertButtons = ['Action'];
 }
 ```
diff --git a/static/usage/v7/alert/presenting/trigger/demo.html b/static/usage/v7/alert/presenting/trigger/demo.html
index f2a52d21568..4b8f28df3db 100644
--- a/static/usage/v7/alert/presenting/trigger/demo.html
+++ b/static/usage/v7/alert/presenting/trigger/demo.html
@@ -17,9 +17,9 @@
           <ion-button id="present-alert">Click Me</ion-button>
           <ion-alert
             trigger="present-alert"
-            header="Alert"
-            sub-header="Important message"
-            message="This is an alert!"
+            header="A Short Title Is Best"
+            sub-header="A Sub Header Is Optional"
+            message="A message should be a short, complete sentence."
           ></ion-alert>
         </div>
       </ion-content>
@@ -27,7 +27,7 @@
 
     <script>
       const alert = document.querySelector('ion-alert');
-      alert.buttons = ['OK'];
+      alert.buttons = ['Action'];
     </script>
   </body>
 </html>
diff --git a/static/usage/v7/alert/presenting/trigger/javascript.md b/static/usage/v7/alert/presenting/trigger/javascript.md
index 82d43db4267..9496421db5b 100644
--- a/static/usage/v7/alert/presenting/trigger/javascript.md
+++ b/static/usage/v7/alert/presenting/trigger/javascript.md
@@ -2,13 +2,13 @@
 <ion-button id="present-alert">Click Me</ion-button>
 <ion-alert
   trigger="present-alert"
-  header="Alert"
-  sub-header="Important message"
-  message="This is an alert!"
+  header="A Short Title Is Best"
+  sub-header="A Sub Header Is Optional"
+  message="A message should be a short, complete sentence."
 ></ion-alert>
 
 <script>
   const alert = document.querySelector('ion-alert');
-  alert.buttons = ['OK'];
+  alert.buttons = ['Action'];
 </script>
 ```
diff --git a/static/usage/v7/alert/presenting/trigger/react.md b/static/usage/v7/alert/presenting/trigger/react.md
index d096665527b..cc5a89576c6 100644
--- a/static/usage/v7/alert/presenting/trigger/react.md
+++ b/static/usage/v7/alert/presenting/trigger/react.md
@@ -8,10 +8,10 @@ function Example() {
       <IonButton id="present-alert">Click Me</IonButton>
       <IonAlert
         trigger="present-alert"
-        header="Alert"
-        subHeader="Important message"
-        message="This is an alert!"
-        buttons={['OK']}
+        header="A Short Title Is Best"
+        sub-header="A Sub Header Is Optional"
+        message="A message should be a short, complete sentence."
+        buttons={['Action']}
       ></IonAlert>
     </>
   );
diff --git a/static/usage/v7/alert/presenting/trigger/vue.md b/static/usage/v7/alert/presenting/trigger/vue.md
index f645a91fe1e..344797317dc 100644
--- a/static/usage/v7/alert/presenting/trigger/vue.md
+++ b/static/usage/v7/alert/presenting/trigger/vue.md
@@ -3,9 +3,9 @@
   <ion-button id="present-alert">Click Me</ion-button>
   <ion-alert
     trigger="present-alert"
-    header="Alert"
-    sub-header="Important message"
-    message="This is an alert!"
+    header="A Short Title Is Best"
+    sub-header="A Sub Header Is Optional"
+    message="A message should be a short, complete sentence."
     :buttons="alertButtons"
   ></ion-alert>
 </template>
@@ -13,6 +13,6 @@
 <script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  const alertButtons = ['OK'];
+  const alertButtons = ['Action'];
 </script>
 ```

From f9e407546842ae0148c8bc5184e3ad29ffad379c Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Thu, 9 Nov 2023 20:28:32 -0500
Subject: [PATCH 2/3] Update static/usage/v7/alert/presenting/trigger/react.md

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
---
 static/usage/v7/alert/presenting/trigger/react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/alert/presenting/trigger/react.md b/static/usage/v7/alert/presenting/trigger/react.md
index cc5a89576c6..4d10a5ad085 100644
--- a/static/usage/v7/alert/presenting/trigger/react.md
+++ b/static/usage/v7/alert/presenting/trigger/react.md
@@ -9,7 +9,7 @@ function Example() {
       <IonAlert
         trigger="present-alert"
         header="A Short Title Is Best"
-        sub-header="A Sub Header Is Optional"
+        subHeader="A Sub Header Is Optional"
         message="A message should be a short, complete sentence."
         buttons={['Action']}
       ></IonAlert>

From 71bd7c09278cc783fa5217126dbd11b81499f6da Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Thu, 9 Nov 2023 20:29:22 -0500
Subject: [PATCH 3/3] Update
 static/usage/v7/alert/presenting/trigger/angular/example_component_html.md

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
---
 .../alert/presenting/trigger/angular/example_component_html.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
index 91260b30c52..65d165d2173 100644
--- a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
@@ -3,7 +3,7 @@
 <ion-alert
   trigger="present-alert"
   header="A Short Title Is Best"
-  sub-header="A Sub Header Is Optional"
+  subHeader="A Sub Header Is Optional"
   message="A message should be a short, complete sentence."
   [buttons]="alertButtons"
 ></ion-alert>