docs(alert): update content in playground examples (#3235)

Author: sean-perkins

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();

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();

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();

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'],
         })
       }
     >

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();

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>

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;

static/usage/v7/alert/presenting/isOpen/demo.html

@@ -15,15 +15,19 @@
       <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>
 
     <script>
       const alert = document.querySelector('ion-alert');
 
-      alert.buttons = ['OK'];
+      alert.buttons = ['Action'];
       alert.addEventListener('ionAlertDidDismiss', () => {
         alert.isOpen = false;
       });

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;
   });

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>
     </>

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;

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"
+  subHeader="A Sub Header Is Optional"
+  message="A message should be a short, complete sentence."
   [buttons]="alertButtons"
 ></ion-alert>
 ```

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'];
 }
 ```

static/usage/v7/alert/presenting/trigger/demo.html

@@ -17,17 +17,17 @@
           <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>
     </ion-app>
 
     <script>
       const alert = document.querySelector('ion-alert');
-      alert.buttons = ['OK'];
+      alert.buttons = ['Action'];
     </script>
   </body>
 </html>

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>
 ```

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"
+        subHeader="A Sub Header Is Optional"
+        message="A message should be a short, complete sentence."
+        buttons={['Action']}
       ></IonAlert>
     </>
   );

static/usage/v7/alert/presenting/trigger/vue.md

@@ -3,16 +3,16 @@
   <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>
 
 <script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  const alertButtons = ['OK'];
+  const alertButtons = ['Action'];
 </script>
 ```