feat(action-sheet, alert): add id to AlertButton and ActionSheetButton (#18992)

resolves #22959

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>

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

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}

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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