From e53f0241e2bf91461c55097fde271ae85ca644ea Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Fri, 22 May 2020 21:32:12 +0200
Subject: [PATCH] feat(alert): add destructive role to alert buttons (#21269)

---
 core/src/components/alert/alert.ios.scss        | 9 +++++++++
 core/src/components/alert/alert.ios.vars.scss   | 3 +++
 core/src/components/alert/alert.tsx             | 1 +
 core/src/components/alert/test/basic/index.html | 9 ++++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index 5f8756b149..e22eadeeb2 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/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;
+}
diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss
index 15c968754c..d98a4821b5 100644
--- a/core/src/components/alert/alert.ios.vars.scss
+++ b/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;
 
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 9795008e56..3654c67ee1 100644
--- a/core/src/components/alert/alert.tsx
+++ b/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)
   };
 };
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 8404a91018..2c593674a7 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/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',
+        ]
       });
     }