From 55839e27d5630ca8de6084e8abc13095ef387ae1 Mon Sep 17 00:00:00 2001
From: mhartington <mikehartington@gmail.com>
Date: Thu, 30 Nov 2017 12:34:20 -0500
Subject: [PATCH] feat(alert): cssClass for buttons and component

---
 packages/core/src/components/alert/alert.tsx  | 12 +++++++++--
 .../components/alert/test/basic/index.html    | 21 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index 7361f45576..32adf1bdce 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -241,9 +241,10 @@ export class Alert {
   }
 
   buttonClass(button: AlertButton): CssClassMap {
+    let customClass = button.cssClass.split(' ').filter(b => b.trim() !== '').join(' ');
     let buttonClass: string[] = !button.cssClass
-      ? ['alert-button']
-      : [`alert-button`, `${button.cssClass}`];
+      ? ['alert-button', customClass]
+      : [`alert-button`, `${button.cssClass}`, customClass];
 
     return buttonClass.reduce((prevValue: any, cssClass: any) => {
       prevValue[cssClass] = true;
@@ -330,6 +331,13 @@ export class Alert {
     const subHdrId = `${this.alertId}-sub-hdr`;
     const msgId = `${this.alertId}-msg`;
 
+    if (this.cssClass) {
+      this.cssClass.split(' ').forEach(cssClass => {
+        if (cssClass.trim() !== '') this.el.classList.add(cssClass);
+      });
+    }
+
+
     if (this.title || !this.subTitle) {
       this.hdrId = hdrId;
 
diff --git a/packages/core/src/components/alert/test/basic/index.html b/packages/core/src/components/alert/test/basic/index.html
index 1a9f92b98c..9675446533 100644
--- a/packages/core/src/components/alert/test/basic/index.html
+++ b/packages/core/src/components/alert/test/basic/index.html
@@ -28,6 +28,7 @@
         <ion-button expand="block" onclick="presentAlertPrompt()">Prompt</ion-button>
         <ion-button expand="block" onclick="presentAlertRadio()">Radio</ion-button>
         <ion-button expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+        <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
       </ion-content>
     </ion-page>
   </ion-app>
@@ -289,8 +290,26 @@
       return await alert.present();
     }
 
+    async function presentWithCssClass() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        cssClass: 'my-class my-customClass   ',
+        message: 'This is an alert message.',
+        buttons: [ {
+            text: 'Ok',
+            cssClass: 'my-class my-customClass   ',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }]
+      });
+      return await alert.present();
+    }
 
 </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>