refactor(action-sheet): renamed elements to divs with classes

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;

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>' +
+    '<div (click)="cancel()" tappable disable-activated class="backdrop"></div>' +
-    '<action-sheet-wrapper>' +
+    '<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 backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    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 backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    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 backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    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 backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.26, 0);
     wrapper.fromTo('translateY', '0%', '100%');

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;

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();
 });

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;