From 9e24a0b49357a3a39ca89f026ff23271a365d935 Mon Sep 17 00:00:00 2001
From: Devin Shoemaker <devinshoe@gmail.com>
Date: Tue, 29 Jun 2021 13:17:19 -0500
Subject: [PATCH] feat(action-sheet, alert): add id to AlertButton and
 ActionSheetButton (#18992)

resolves #22959

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
---
 .../components/action-sheet/action-sheet-interface.ts  |  1 +
 core/src/components/action-sheet/action-sheet.tsx      |  2 +-
 core/src/components/action-sheet/readme.md             |  5 +++++
 core/src/components/action-sheet/test/basic/index.html |  5 +++++
 core/src/components/action-sheet/usage/angular.md      |  1 +
 core/src/components/action-sheet/usage/javascript.md   |  1 +
 core/src/components/action-sheet/usage/react.md        |  1 +
 core/src/components/action-sheet/usage/stencil.md      |  1 +
 core/src/components/action-sheet/usage/vue.md          |  1 +
 core/src/components/alert/alert-interface.ts           |  1 +
 core/src/components/alert/alert.tsx                    |  2 +-
 core/src/components/alert/readme.md                    | 10 ++++++++++
 core/src/components/alert/test/basic/index.html        |  5 +++++
 core/src/components/alert/test/standalone/index.html   |  1 +
 core/src/components/alert/test/translucent/index.html  |  1 +
 core/src/components/alert/usage/angular.md             |  2 ++
 core/src/components/alert/usage/javascript.md          |  2 ++
 core/src/components/alert/usage/react.md               |  2 ++
 core/src/components/alert/usage/stencil.md             |  2 ++
 core/src/components/alert/usage/vue.md                 |  2 ++
 20 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts
index d7d8154b8b..d37aaa1f9a 100644
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -21,5 +21,6 @@ export interface ActionSheetButton {
   role?: 'cancel' | 'destructive' | 'selected' | string;
   icon?: string;
   cssClass?: string | string[];
+  id?: string;
   handler?: () => boolean | void | Promise<boolean | void>;
 }
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 84c7d81c0a..130dd09c92 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -264,7 +264,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                 </div>
               }
               {buttons.map(b =>
-                <button type="button" class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
+                <button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
                     {b.text}
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 775696c94a..8734dc1d83 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -63,6 +63,7 @@ export class ActionSheetExample {
         text: 'Delete',
         role: 'destructive',
         icon: 'trash',
+        id: 'delete-button',
         handler: () => {
           console.log('Delete clicked');
         }
@@ -120,6 +121,7 @@ async function presentActionSheet() {
     text: 'Delete',
     role: 'destructive',
     icon: 'trash',
+    id: 'delete-button',
     handler: () => {
       console.log('Delete clicked');
     }
@@ -234,6 +236,7 @@ export const ActionSheetExample: React.FC = () => {
           text: 'Delete',
           role: 'destructive',
           icon: trash,
+          id: 'delete-button',
           handler: () => {
             console.log('Delete clicked');
           }
@@ -291,6 +294,7 @@ export class ActionSheetExample {
         text: 'Delete',
         role: 'destructive',
         icon: 'trash',
+        id: 'delete-button',
         handler: () => {
           console.log('Delete clicked');
         }
@@ -363,6 +367,7 @@ export default defineComponent({
               text: 'Delete',
               role: 'destructive',
               icon: trash,
+              id: 'delete-button',
               handler: () => {
                 console.log('Delete clicked')
               },
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index af0ab90ffb..b5165a3a49 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -58,6 +58,10 @@
       --ion-backdrop-opacity: 1;
     }
 
+    #delete-button {
+      color: #eb445a;
+    }
+
   </style>
   <script>
     window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
@@ -75,6 +79,7 @@
           text: 'Delete',
           role: 'destructive',
           icon: 'trash',
+          id: 'delete-button',
           handler: () => {
             console.log('Delete clicked');
           }
diff --git a/core/src/components/action-sheet/usage/angular.md b/core/src/components/action-sheet/usage/angular.md
index 62bda29787..04f7fa536c 100644
--- a/core/src/components/action-sheet/usage/angular.md
+++ b/core/src/components/action-sheet/usage/angular.md
@@ -19,6 +19,7 @@ export class ActionSheetExample {
         text: 'Delete',
         role: 'destructive',
         icon: 'trash',
+        id: 'delete-button',
         handler: () => {
           console.log('Delete clicked');
         }
diff --git a/core/src/components/action-sheet/usage/javascript.md b/core/src/components/action-sheet/usage/javascript.md
index 7cc06603a4..40501f10e2 100644
--- a/core/src/components/action-sheet/usage/javascript.md
+++ b/core/src/components/action-sheet/usage/javascript.md
@@ -8,6 +8,7 @@ async function presentActionSheet() {
     text: 'Delete',
     role: 'destructive',
     icon: 'trash',
+    id: 'delete-button',
     handler: () => {
       console.log('Delete clicked');
     }
diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md
index 7259fed327..24db5d5d93 100644
--- a/core/src/components/action-sheet/usage/react.md
+++ b/core/src/components/action-sheet/usage/react.md
@@ -72,6 +72,7 @@ export const ActionSheetExample: React.FC = () => {
           text: 'Delete',
           role: 'destructive',
           icon: trash,
+          id: 'delete-button',
           handler: () => {
             console.log('Delete clicked');
           }
diff --git a/core/src/components/action-sheet/usage/stencil.md b/core/src/components/action-sheet/usage/stencil.md
index 286ea21dff..c35a6d61c2 100644
--- a/core/src/components/action-sheet/usage/stencil.md
+++ b/core/src/components/action-sheet/usage/stencil.md
@@ -16,6 +16,7 @@ export class ActionSheetExample {
         text: 'Delete',
         role: 'destructive',
         icon: 'trash',
+        id: 'delete-button',
         handler: () => {
           console.log('Delete clicked');
         }
diff --git a/core/src/components/action-sheet/usage/vue.md b/core/src/components/action-sheet/usage/vue.md
index a47d0f8bf5..95e35e3cdc 100644
--- a/core/src/components/action-sheet/usage/vue.md
+++ b/core/src/components/action-sheet/usage/vue.md
@@ -21,6 +21,7 @@ export default defineComponent({
               text: 'Delete',
               role: 'destructive',
               icon: trash,
+              id: 'delete-button',
               handler: () => {
                 console.log('Delete clicked')
               },
diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index 898ca322e8..d5e50f51c1 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -46,5 +46,6 @@ export interface AlertButton {
   text: string;
   role?: string;
   cssClass?: string | string[];
+  id?: string;
   handler?: (value: any) => boolean | void | {[key: string]: any};
 }
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 3aac3a0069..1c6bb6f706 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -538,7 +538,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     return (
       <div class={alertButtonGroupClass}>
         {buttons.map(button =>
-          <button type="button" class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
+          <button type="button" id={button.id} class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
             <span class="alert-button-inner">
               {button.text}
             </span>
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index d5904bbc15..ab2785989f 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -99,11 +99,13 @@ export class AlertExample {
           text: 'Cancel',
           role: 'cancel',
           cssClass: 'secondary',
+          id: 'cancel-button',
           handler: (blah) => {
             console.log('Confirm Cancel: blah');
           }
         }, {
           text: 'Okay',
+          id: 'confirm-button',
           handler: () => {
             console.log('Confirm Okay');
           }
@@ -412,11 +414,13 @@ function presentAlertConfirm() {
       text: 'Cancel',
       role: 'cancel',
       cssClass: 'secondary',
+      id: 'cancel-button',
       handler: (blah) => {
         console.log('Confirm Cancel: blah');
       }
     }, {
       text: 'Okay',
+      id: 'confirm-button',
       handler: () => {
         console.log('Confirm Okay')
       }
@@ -759,12 +763,14 @@ export const AlertExample: React.FC = () => {
               text: 'Cancel',
               role: 'cancel',
               cssClass: 'secondary',
+              id: 'cancel-button',
               handler: blah => {
                 console.log('Confirm Cancel: blah');
               }
             },
             {
               text: 'Okay',
+              id: 'confirm-button',
               handler: () => {
                 console.log('Confirm Okay');
               }
@@ -1064,11 +1070,13 @@ export class AlertExample {
           text: 'Cancel',
           role: 'cancel',
           cssClass: 'secondary',
+          id: 'cancel-button',
           handler: (blah) => {
             console.log('Confirm Cancel: blah');
           }
         }, {
           text: 'Okay',
+          id: 'confirm-button',
           handler: () => {
             console.log('Confirm Okay');
           }
@@ -1402,12 +1410,14 @@ export default defineComponent({
               text: 'Cancel',
               role: 'cancel',
               cssClass: 'secondary',
+              id: 'cancel-button',
               handler: blah => {
                 console.log('Confirm Cancel:', blah)
               },
             },
             {
               text: 'Okay',
+              id: 'confirm-button',
               handler: () => {
                 console.log('Confirm Okay')
               },
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index c8e3a62777..21c0c7a8ea 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -42,6 +42,9 @@
         --min-width: 0;
         --max-width: 200px;
       }
+      #delete-button {
+        color: #eb445a;
+      }
     </style>
   </ion-app>
 
@@ -79,6 +82,7 @@
           'Open Modal',
           {
             text: 'Delete',
+            id: 'delete-button',
             role: 'destructive',
           },
           'Cancel',
@@ -185,6 +189,7 @@
             text: 'Cancel',
             role: 'cancel',
             cssClass: 'secondary',
+            id: 'cancel-id',
             handler: () => {
               console.log('Confirm Cancel')
             }
diff --git a/core/src/components/alert/test/standalone/index.html b/core/src/components/alert/test/standalone/index.html
index db764193bb..cb893a1dc9 100644
--- a/core/src/components/alert/test/standalone/index.html
+++ b/core/src/components/alert/test/standalone/index.html
@@ -185,6 +185,7 @@
             text: 'Cancel',
             role: 'cancel',
             cssClass: 'secondary',
+            id: 'cancel-id',
             handler: () => {
               console.log('Confirm Cancel')
             }
diff --git a/core/src/components/alert/test/translucent/index.html b/core/src/components/alert/test/translucent/index.html
index 3ffce50200..0f826666ab 100644
--- a/core/src/components/alert/test/translucent/index.html
+++ b/core/src/components/alert/test/translucent/index.html
@@ -165,6 +165,7 @@
             text: 'Cancel',
             role: 'cancel',
             cssClass: 'secondary',
+            id: 'cancel-id',
             handler: () => {
               console.log('Confirm Cancel')
             }
diff --git a/core/src/components/alert/usage/angular.md b/core/src/components/alert/usage/angular.md
index f413bf34b2..c70f0c944f 100644
--- a/core/src/components/alert/usage/angular.md
+++ b/core/src/components/alert/usage/angular.md
@@ -48,11 +48,13 @@ export class AlertExample {
           text: 'Cancel',
           role: 'cancel',
           cssClass: 'secondary',
+          id: 'cancel-button',
           handler: (blah) => {
             console.log('Confirm Cancel: blah');
           }
         }, {
           text: 'Okay',
+          id: 'confirm-button',
           handler: () => {
             console.log('Confirm Okay');
           }
diff --git a/core/src/components/alert/usage/javascript.md b/core/src/components/alert/usage/javascript.md
index 6df575bcf6..7b8adc75b4 100644
--- a/core/src/components/alert/usage/javascript.md
+++ b/core/src/components/alert/usage/javascript.md
@@ -36,11 +36,13 @@ function presentAlertConfirm() {
       text: 'Cancel',
       role: 'cancel',
       cssClass: 'secondary',
+      id: 'cancel-button',
       handler: (blah) => {
         console.log('Confirm Cancel: blah');
       }
     }, {
       text: 'Okay',
+      id: 'confirm-button',
       handler: () => {
         console.log('Confirm Okay')
       }
diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md
index 6849a2b873..2f851a1455 100644
--- a/core/src/components/alert/usage/react.md
+++ b/core/src/components/alert/usage/react.md
@@ -92,12 +92,14 @@ export const AlertExample: React.FC = () => {
               text: 'Cancel',
               role: 'cancel',
               cssClass: 'secondary',
+              id: 'cancel-button',
               handler: blah => {
                 console.log('Confirm Cancel: blah');
               }
             },
             {
               text: 'Okay',
+              id: 'confirm-button',
               handler: () => {
                 console.log('Confirm Okay');
               }
diff --git a/core/src/components/alert/usage/stencil.md b/core/src/components/alert/usage/stencil.md
index 9fa323a457..2f24b2a726 100644
--- a/core/src/components/alert/usage/stencil.md
+++ b/core/src/components/alert/usage/stencil.md
@@ -45,11 +45,13 @@ export class AlertExample {
           text: 'Cancel',
           role: 'cancel',
           cssClass: 'secondary',
+          id: 'cancel-button',
           handler: (blah) => {
             console.log('Confirm Cancel: blah');
           }
         }, {
           text: 'Okay',
+          id: 'confirm-button',
           handler: () => {
             console.log('Confirm Okay');
           }
diff --git a/core/src/components/alert/usage/vue.md b/core/src/components/alert/usage/vue.md
index b683ccee35..1d9c3a6cb6 100644
--- a/core/src/components/alert/usage/vue.md
+++ b/core/src/components/alert/usage/vue.md
@@ -53,12 +53,14 @@ export default defineComponent({
               text: 'Cancel',
               role: 'cancel',
               cssClass: 'secondary',
+              id: 'cancel-button',
               handler: blah => {
                 console.log('Confirm Cancel:', blah)
               },
             },
             {
               text: 'Okay',
+              id: 'confirm-button',
               handler: () => {
                 console.log('Confirm Okay')
               },