From b6ebbde54b7ef32b98d76b5fc37058adaba0411e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 8 Jan 2016 00:11:23 -0600
Subject: [PATCH] feat(alert): md alert radio button group

Related: 890
---
 ionic/components/alert/alert.ios.scss      | 15 +++--
 ionic/components/alert/alert.md.scss       | 70 ++++++++++++++++++++++
 ionic/components/alert/test/basic/index.ts |  2 +-
 3 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss
index a47f392e45..144a17e97d 100644
--- a/ionic/components/alert/alert.ios.scss
+++ b/ionic/components/alert/alert.ios.scss
@@ -81,6 +81,12 @@ ion-alert {
   -webkit-appearance: none;
 }
 
+.alert-radio-group {
+  border-top: 1px solid $alert-ios-button-border-color;
+  max-height: 200px;
+  overflow: scroll;
+}
+
 .alert-radio {
   display: flex;
   min-height: $alert-ios-button-min-height;
@@ -112,17 +118,14 @@ ion-alert {
 
 }
 
-.alert-radio-group {
-  border-top: 1px solid $alert-ios-button-border-color;
-  max-height: 200px;
-  overflow: scroll;
-}
-
 .alert-radio-label {
   flex: 1;
   order: 0;
   text-align: auto;
   padding: 13px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .alert-radio-icon {
diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss
index f562ba4b04..355d24408f 100644
--- a/ionic/components/alert/alert.md.scss
+++ b/ionic/components/alert/alert.md.scss
@@ -67,6 +67,76 @@ $alert-md-buttons-justify-content:        flex-end !default;
   }
 }
 
+.alert-radio-group {
+  position: relative;
+  border-top: 1px solid $alert-md-input-border-color;
+  border-bottom: 1px solid $alert-md-input-border-color;
+  max-height: 200px;
+  overflow: scroll;
+}
+
+.alert-radio {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  min-height: 44px;
+  border-top: 1px solid $alert-md-input-border-color;
+  cursor: pointer;
+
+  &[aria-checked=true] {
+    color: $alert-md-button-text-color;
+
+    .alert-radio-icon {
+      border-color: $alert-md-button-text-color;
+    }
+
+    .alert-radio-icon:after {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  &:first-child {
+    border-top: 0;
+  }
+
+}
+
+.alert-radio-label {
+  flex: 1;
+  text-align: auto;
+  padding: 13px 26px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.alert-radio-icon {
+  position: relative;
+  top: 13px;
+  left: 13px;
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border-width: 2px;
+  border-style: solid;
+  border-color: darken($list-md-border-color, 40%);
+  border-radius: 50%;
+
+  &:after {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 8px;
+    height: 8px;
+    background-color: $alert-md-button-text-color;
+    border-radius: 50%;
+    content: '';
+    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
+    transform: scale3d(0, 0, 0);
+  }
+}
+
 .alert-buttons {
   padding: $alert-md-buttons-padding;
   justify-content: $alert-md-buttons-justify-content;
diff --git a/ionic/components/alert/test/basic/index.ts b/ionic/components/alert/test/basic/index.ts
index 13d646fc0a..ee044c8509 100644
--- a/ionic/components/alert/test/basic/index.ts
+++ b/ionic/components/alert/test/basic/index.ts
@@ -129,7 +129,7 @@ class E2EPage {
 
     alert.addInput({
       type: 'radio',
-      label: 'Radio 6',
+      label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
       value: 'value6'
     });