From 9cbb5895945e799f3438d182be0485a74bb2c543 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 3 Dec 2015 16:37:20 -0500
Subject: [PATCH] refactor(action-sheet): renamed elements to divs with classes

---
 .../components/action-sheet/action-sheet.scss |  2 +-
 ionic/components/action-sheet/action-sheet.ts | 30 ++++++++++---------
 ionic/components/action-sheet/modes/ios.scss  | 22 +++++++-------
 .../components/action-sheet/test/basic/e2e.ts |  2 +-
 ionic/util/util.scss                          |  2 +-
 5 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index 4a293b2c86..c73f8fb5af 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -24,7 +24,7 @@ ion-action-sheet {
   z-index: $z-index-overlay;
 }
 
-action-sheet-wrapper {
+.action-sheet-wrapper {
   position: absolute;
   z-index: $z-index-overlay-wrapper;
   bottom: 0;
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index 8c55137457..44b80682ea 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -17,8 +17,8 @@ import {extend} from '../../util/util';
 @Component({
   selector: 'ion-action-sheet',
   template:
-    '<backdrop (click)="cancel()" tappable disable-activated></backdrop>' +
-    '<action-sheet-wrapper>' +
+    '<div (click)="cancel()" tappable disable-activated class="backdrop"></div>' +
+    '<div class="action-sheet-wrapper">' +
       '<div class="action-sheet-container">' +
         '<div class="action-sheet-group action-sheet-options">' +
           '<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
@@ -28,15 +28,17 @@ import {extend} from '../../util/util';
           '</button>' +
           '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-destructive disable-hover">' +
             '<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon"></icon> ' +
-            '{{d.destructiveText}}</button>' +
+            '{{d.destructiveText}}' +
+          '</button>' +
         '</div>' +
         '<div class="action-sheet-group action-sheet-cancel" *ng-if="d.cancelText">' +
           '<button (click)="cancel()" class="disable-hover">' +
             '<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon"></icon> ' +
-            '{{d.cancelText}}</button>' +
+            '{{d.cancelText}}' +
+          '</button>' +
         '</div>' +
       '</div>' +
-    '</action-sheet-wrapper>',
+    '</div>',
   host: {
     'role': 'dialog'
   },
@@ -121,7 +123,7 @@ export class ActionSheet {
    *
    * @param {Object} [opts={}]  An object containing optional settings.
    * @param {String} [opts.pageType='action-sheet'] The page type that determines how the page renders and animates.
-   * @param {String} [opts.enterAnimation='action-sheet-slide-in'] The class used to animate an actionSheet that is entering. 
+   * @param {String} [opts.enterAnimation='action-sheet-slide-in'] The class used to animate an actionSheet that is entering.
    * @param {String} [opts.leaveAnimation='action-sheet-slide-out'] The class used to animate an actionSheet that is leaving.
    * @return {Promise} Promise that resolves when the action sheet is open.
    */
@@ -161,8 +163,8 @@ class ActionSheetSlideIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.01, 0.4);
     wrapper.fromTo('translateY', '100%', '0%');
@@ -178,8 +180,8 @@ class ActionSheetSlideOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.4, 0);
     wrapper.fromTo('translateY', '0%', '100%');
@@ -195,8 +197,8 @@ class ActionSheetMdSlideIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.01, 0.26);
     wrapper.fromTo('translateY', '100%', '0%');
@@ -212,8 +214,8 @@ class ActionSheetMdSlideOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.26, 0);
     wrapper.fromTo('translateY', '0%', '100%');
diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index bbce0a734e..352a889ff4 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -26,17 +26,6 @@ ion-action-sheet {
   text-align: center;
 }
 
-.action-sheet-container {
-  padding: 0 $action-sheet-ios-group-margin;
-
-  button.activated {
-    box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    color: $action-sheet-options-text-color;
-    background: $action-sheet-options-background-active-color;
-  }
-}
-
 ion-action-sheet button {
   min-height: $action-sheet-ios-height;
   padding: $action-sheet-ios-padding;
@@ -51,6 +40,17 @@ ion-action-sheet button {
   }
 }
 
+.action-sheet-container {
+  padding: 0 $action-sheet-ios-group-margin;
+
+  button.activated {
+    box-shadow: none;
+    border-color: $action-sheet-options-border-color;
+    color: $action-sheet-options-text-color;
+    background: $action-sheet-options-background-active-color;
+  }
+}
+
 .action-sheet-group {
   margin-bottom: $action-sheet-ios-group-margin - 2;
   border-radius: $action-sheet-ios-border-radius;
diff --git a/ionic/components/action-sheet/test/basic/e2e.ts b/ionic/components/action-sheet/test/basic/e2e.ts
index 40d0efab03..cffef5a0be 100644
--- a/ionic/components/action-sheet/test/basic/e2e.ts
+++ b/ionic/components/action-sheet/test/basic/e2e.ts
@@ -4,5 +4,5 @@ it('should open action sheet', function() {
 });
 
 it('should close with backdrop click', function() {
-  element(by.css('backdrop')).click();
+  element(by.css('.backdrop')).click();
 });
diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index 2534094725..cd70584b19 100755
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -141,7 +141,7 @@ focus-ctrl {
 
 $backdrop-color:      #000 !default;
 
-backdrop {
+.backdrop {
   position: absolute;
   z-index: $z-index-backdrop;
   top: 0;