feat(alert): add destructive role to alert buttons (#21269)

core/src/components/alert/alert.ios.scss

@@ -301,3 +301,12 @@
 .alert-button.ion-activated {
   background-color: $alert-ios-button-background-color-activated;
 }
+
+// iOS Action Sheet Button: Destructive
+// ---------------------------------------------------
+
+.alert-button-role-destructive,
+.alert-button-role-destructive.ion-activated,
+.alert-button-role-destructive.ion-focused {
+  color: $alert-ios-button-destructive-text-color;
+}

core/src/components/alert/alert.ios.vars.scss

@@ -145,6 +145,9 @@ $alert-ios-button-font-size:                            17px !default;
 /// @prop - Color of the text in the alert button
 $alert-ios-button-text-color:                           ion-color(primary, base) !default;
 
+/// @prop - Destructive text color of the alert button
+$alert-ios-button-destructive-text-color:               ion-color(danger, base) !default;
+
 /// @prop - Background color of the alert button
 $alert-ios-button-background-color:                     transparent !default;
 

core/src/components/alert/alert.tsx

@@ -505,6 +505,7 @@ const buttonClass = (button: AlertButton): CssClassMap => {
     'alert-button': true,
     'ion-focusable': true,
     'ion-activatable': true,
+    [`alert-button-role-${button.role}`]: button.role !== undefined,
     ...getClassMap(button.cssClass)
   };
 };

core/src/components/alert/test/basic/index.html

@@ -75,7 +75,14 @@
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
-        buttons: ['Cancel', 'Open Modal', 'Delete']
+        buttons: [
+          'Open Modal',
+          {
+            text: 'Delete',
+            role: 'destructive',
+          },
+          'Cancel',
+        ]
       });
     }