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