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

devinshoemaker · liamdebeasi · web-flow · commit 9e24a0b49357 · 2021-06-29T14:17:19.000-04:00
resolves #22959 Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')
               },

Original file line number	Diff line number	Diff line change
`@@ -21,5 +21,6 @@ export interface ActionSheetButton {`
`21`	`21`	`role?: 'cancel' \| 'destructive' \| 'selected' \| string;`
`22`	`22`	`icon?: string;`
`23`	`23`	`cssClass?: string \| string[];`
	`24`	`+ id?: string;`
`24`	`25`	`handler?: () => boolean \| void \| Promise<boolean \| void>;`
`25`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -264,7 +264,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {`
`264`	`264`	`</div>`
`265`	`265`	`}`
`266`	`266`	`{buttons.map(b =>`
`267`		`- <button type="button" class={buttonClass(b)} onClick={() => this.buttonClick(b)}>`
	`267`	`+ <button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>`
`268`	`268`	`<span class="action-sheet-button-inner">`
`269`	`269`	`{b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}`
`270`	`270`	`{b.text}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export class ActionSheetExample {`
`19`	`19`	`text: 'Delete',`
`20`	`20`	`role: 'destructive',`
`21`	`21`	`icon: 'trash',`
	`22`	`+ id: 'delete-button',`
`22`	`23`	`handler: () => {`
`23`	`24`	`console.log('Delete clicked');`
`24`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ async function presentActionSheet() {`
`8`	`8`	`text: 'Delete',`
`9`	`9`	`role: 'destructive',`
`10`	`10`	`icon: 'trash',`
	`11`	`+ id: 'delete-button',`
`11`	`12`	`handler: () => {`
`12`	`13`	`console.log('Delete clicked');`
`13`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,7 @@ export const ActionSheetExample: React.FC = () => {`
`72`	`72`	`text: 'Delete',`
`73`	`73`	`role: 'destructive',`
`74`	`74`	`icon: trash,`
	`75`	`+ id: 'delete-button',`
`75`	`76`	`handler: () => {`
`76`	`77`	`console.log('Delete clicked');`
`77`	`78`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export class ActionSheetExample {`
`16`	`16`	`text: 'Delete',`
`17`	`17`	`role: 'destructive',`
`18`	`18`	`icon: 'trash',`
	`19`	`+ id: 'delete-button',`
`19`	`20`	`handler: () => {`
`20`	`21`	`console.log('Delete clicked');`
`21`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,5 +46,6 @@ export interface AlertButton {`
`46`	`46`	`text: string;`
`47`	`47`	`role?: string;`
`48`	`48`	`cssClass?: string \| string[];`
	`49`	`+ id?: string;`
`49`	`50`	`handler?: (value: any) => boolean \| void \| {[key: string]: any};`
`50`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -185,6 +185,7 @@`
`185`	`185`	`text: 'Cancel',`
`186`	`186`	`role: 'cancel',`
`187`	`187`	`cssClass: 'secondary',`
	`188`	`+ id: 'cancel-id',`
`188`	`189`	`handler: () => {`
`189`	`190`	`console.log('Confirm Cancel')`
`190`	`191`	`}`
Original file line number	Diff line number	Diff line change
`@@ -165,6 +165,7 @@`
`165`	`165`	`text: 'Cancel',`
`166`	`166`	`role: 'cancel',`
`167`	`167`	`cssClass: 'secondary',`
	`168`	`+ id: 'cancel-id',`
`168`	`169`	`handler: () => {`
`169`	`170`	`console.log('Confirm Cancel')`
`170`	`171`	`}`
Original file line number	Diff line number	Diff line change
`@@ -48,11 +48,13 @@ export class AlertExample {`
`48`	`48`	`text: 'Cancel',`
`49`	`49`	`role: 'cancel',`
`50`	`50`	`cssClass: 'secondary',`
	`51`	`+ id: 'cancel-button',`
`51`	`52`	`handler: (blah) => {`
`52`	`53`	`console.log('Confirm Cancel: blah');`
`53`	`54`	`}`
`54`	`55`	`}, {`
`55`	`56`	`text: 'Okay',`
	`57`	`+ id: 'confirm-button',`
`56`	`58`	`handler: () => {`
`57`	`59`	`console.log('Confirm Okay');`
`58`	`60`	`}`