rename ActionMenu to ActionSheet

demos/action-menu/main.html

@@ -1,3 +0,0 @@
-<ion-content class="padding">
-  <button (click)="openMenu()">Open Action Menu</button>
-</ion-content>

demos/action-sheet/index.ts

@@ -1,4 +1,4 @@
-import {App, ActionMenu} from 'ionic/ionic';
+import {App, ActionSheet} from 'ionic/ionic';
 
 
 @App({
@@ -6,13 +6,13 @@ import {App, ActionMenu} from 'ionic/ionic';
 })
 class IonicApp {
 
-  constructor(actionMenu: ActionMenu) {
+  constructor(actionSheet: ActionSheet) {
-    this.actionMenu = actionMenu;
+    this.actionSheet = actionSheet;
   }
 
   openMenu() {
 
-    this.actionMenu.open({
+    this.actionSheet.open({
       buttons: [
         { text: 'Share This' },
         { text: 'Move' }
@@ -32,8 +32,8 @@ class IonicApp {
         return true;
       }
 
-    }).then(actionMenuRef => {
+    }).then(actionSheetRef => {
-      this.actionMenuRef = actionMenuRef;
+      this.actionSheetRef = actionSheetRef;
     });
 
   }

demos/action-sheet/main.html

@@ -0,0 +1,3 @@
+<ion-content class="padding">
+  <button (click)="openMenu()">Open Action Sheet</button>
+</ion-content>

demos/material/index.ts

@@ -1,6 +1,6 @@
 import {Component, Directive} from 'angular2/angular2';
 
-import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
+import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
 
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
@@ -48,12 +48,12 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
   '</ion-content>'
 })
 export class FirstPage {
-  constructor(app: IonicApp, actionMenu: ActionMenu) {
+  constructor(app: IonicApp, actionSheet: ActionSheet) {
     this.app = app;
-    this.actionMenu = actionMenu;
+    this.actionSheet = actionSheet;
   }
   showMoreMenu() {
-    this.actionMenu.open({
+    this.actionSheet.open({
       buttons: [
         { icon: 'ion-android-share-alt', text: 'Share' },
         { icon: 'ion-arrow-move', text: 'Move' }
@@ -72,8 +72,8 @@ export class FirstPage {
         if(index == 1) { return false; }
         return true;
       }
-    }).then(actionMenuRef => {
+    }).then(actionSheetRef => {
-      this.actionMenuRef = actionMenuRef;
+      this.actionSheetRef = actionSheetRef;
     });
 
   }

demos/modal/index.ts

@@ -1,5 +1,5 @@
 import {App, IonicView, IonicApp, IonicConfig, IonicPlatform} from 'ionic/ionic';
-import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
+import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ionic';
 
 
 @App({
@@ -81,7 +81,7 @@ export class ContactModal {
         <button (click)="push()">Push (Go to 2nd)</button>
       </p>
       <p>
-        <button (click)="openActionMenu()">Open Action Menu</button>
+        <button (click)="openActionSheet()">Open Action Sheet</button>
       </p>
       <p>
         <button (click)="closeByHandeModal()">Close By Handle</button>
@@ -95,11 +95,11 @@ export class ModalFirstPage {
   constructor(
     nav: NavController,
     modal: Modal,
-    actionMenu: ActionMenu
+    actionSheet: ActionSheet
   ) {
     this.nav = nav;
     this.modal = modal;
-    this.actionMenu = actionMenu;
+    this.actionSheet = actionSheet;
   }
 
   push() {
@@ -116,8 +116,8 @@ export class ModalFirstPage {
     modal.close();
   }
 
-  openActionMenu() {
+  openActionSheet() {
-    this.actionMenu.open({
+    this.actionSheet.open({
       buttons: [
         { text: 'Share This' },
         { text: 'Move' }
@@ -136,8 +136,8 @@ export class ModalFirstPage {
         if(index == 1) { return false; }
         return true;
       }
-    }).then(actionMenuRef => {
+    }).then(actionSheetRef => {
-      this.actionMenuRef = actionMenuRef;
+      this.actionSheetRef = actionSheetRef;
     });
   }
 }

demos/sink/index.ts

@@ -15,7 +15,7 @@ import {TabsPage} from './pages/tabs'
 import {MenuPage} from './pages/menu'
 import {AnimationPage} from './pages/animation'
 import {SlidePage} from './pages/slides'
-import {ActionMenuPage} from './pages/action-menu'
+import {ActionSheetPage} from './pages/action-sheet'
 import {ModalPage} from './pages/modal'
 
 
@@ -66,8 +66,8 @@ import {ModalPage} from './pages/modal'
       path: '/slides',
       component: SlidePage
     }, {
-      path: '/action-menu',
+      path: '/action-sheet',
-      component: ActionMenuPage
+      component: ActionSheetPage
     }
   ]
 })
@@ -92,7 +92,7 @@ class MyApp {
       { title: 'Menu', component: MenuPage },
       { title: 'Animation', component: AnimationPage },
       { title: 'Slides', component: SlidePage},
-      { title: 'Action Menu', component: ActionMenuPage },
+      { title: 'Action Sheet', component: ActionSheetPage },
     ];
   }
 

demos/sink/pages/action-sheet.ts

@@ -1,38 +1,38 @@
-import {IonicApp, IonicView, NavController, ActionMenu} from 'ionic/ionic';
+import {IonicApp, IonicView, NavController, ActionSheet} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
 
 @IonicView({
   template: `
-  <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Menu</ion-title></ion-navbar>
+  <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Sheet</ion-title></ion-navbar>
 
   <ion-content class="padding">
-    <h2>Action Menu</h2>
+    <h2>Action Sheet</h2>
     <p>
-      The Action Menu, similar to Action Sheet's on iOS, is a slide-up prompt
+      The Action Sheet, similar to Action Sheet's on iOS, is a slide-up prompt
       that displays several options for the user to choose from before an action is performed.
     </p>
     <p>
-      Action Menu's are great for prompting for dangerous actions (like deleting a photo album),
+      Action Sheet's are great for prompting for dangerous actions (like deleting a photo album),
       or showing a "context menu" with multiple actions the user can perform on something.
     </p>
     <button (click)="openMenu()">Open Menu</button>
   </ion-content>
   `
 })
-export class ActionMenuPage extends SinkPage {
+export class ActionSheetPage extends SinkPage {
-  constructor(app: IonicApp, nav: NavController, actionMenu: ActionMenu) {
+  constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet) {
     super(app);
 
     this.nav = nav;
-    this.actionMenu = actionMenu;
+    this.actionSheet = actionSheet;
   }
 
   openMenu() {
-    console.log('Opening ActionMenu')
+    console.log('Opening ActionSheet')
 
-    this.actionMenu.open({
+    this.actionSheet.open({
       buttons: [
         { text: 'Share This' },
         { text: 'Move' }
@@ -52,8 +52,8 @@ export class ActionMenuPage extends SinkPage {
         if(index == 1) { return false; }
         return true;
       }
-    }).then(actionMenuRef => {
+    }).then(actionSheetRef => {
-      this.actionMenuRef = actionMenuRef;
+      this.actionSheetRef = actionSheetRef;
     })
   }
 

ionic/components.ts

@@ -1,7 +1,7 @@
 
 export * from 'ionic/components/app/app'
 export * from 'ionic/components/app/id'
-export * from 'ionic/components/action-menu/action-menu'
+export * from 'ionic/components/action-sheet/action-sheet'
 export * from 'ionic/components/button/button'
 export * from 'ionic/components/card/card'
 export * from 'ionic/components/checkbox/checkbox'

ionic/components/action-menu/action-menu.scss

@@ -1,100 +0,0 @@
-
-// Action Menu
-// --------------------------------------------------
-
-$action-menu-width:                     100% !default;
-$action-menu-max-width:                 520px !default;
-$action-menu-background-color:          rgba(243,243,243,.95) !default;
-$action-menu-button-text-color:         #007aff !default;
-
-$action-menu-options-bg-color:          #f1f2f3 !default;
-$action-menu-options-bg-active-color:   #e4e5e7 !default;
-$action-menu-options-text-color:        #007aff !default;
-$action-menu-options-border-color:      #d1d3d6 !default;
-
-
-ion-action-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  z-index: $z-index-overlay;
-}
-
-action-menu-wrapper {
-  position: absolute;
-  z-index: $z-index-overlay-wrapper;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  display: block;
-  max-width: 500px;
-  margin: auto;
-
-  transform: translate3d(0, 100%, 0);
-}
-
-.action-menu-container {
-  width: auto;
-  overflow: hidden;
-
-  button {
-    display: block;
-    padding: 1px;
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-    border-color: $action-menu-options-border-color;
-    background-color: transparent;
-
-    color: $action-menu-options-text-color;
-    font-size: 21px;
-
-    &:hover {
-      color: $action-menu-options-text-color;
-    }
-  }
-
-  button.activated {
-    box-shadow: none;
-    border-color: $action-menu-options-border-color;
-    color: $action-menu-options-text-color;
-    background: $action-menu-options-bg-active-color;
-  }
-}
-
-.action-menu-has-icons .icon {
-  position: absolute;
-  left: 16px;
-}
-
-.action-menu-title {
-  padding: 10px;
-  color: #8f8f8f;
-  text-align: center;
-  font-size: 13px;
-}
-
-.action-menu-group {
-  background-color: #fff;
-  overflow: hidden;
-
-  button {
-    border-width: 1px 0px 0px 0px;
-  }
-
-  button:first-child:last-child {
-    border-width: 0;
-  }
-}
-
-.action-menu-options {
-  background: $action-menu-options-bg-color;
-}
-
-.action-menu-cancel button {
-  font-weight: 500;
-}

ionic/components/action-menu/modes/ios.scss

@@ -1,98 +0,0 @@
-
-// iOS Action Menu
-// --------------------------------------------------
-
-$action-menu-ios-group-margin:             10px !default;
-$action-menu-ios-background-color:         rgba(243,243,243,.95) !default;
-
-$action-menu-ios-height:                   5.6rem !default;
-$action-menu-ios-padding:                  1.8rem !default;
-$action-menu-ios-border-color:             #d2d2d6 !default;
-$action-menu-ios-border-radius:            1.3rem !default;
-
-$action-menu-ios-title-color:              #5f5f5f !default;
-$action-menu-ios-title-font-size:          1.2rem !default;
-
-$action-menu-ios-button-text-color:        #007aff !default;
-$action-menu-ios-button-font-size:         2rem !default;
-$action-menu-ios-background-active:        #ebebeb !default;
-
-$action-menu-ios-icon-font-size:           1.4em !default;
-
-
-ion-action-menu {
-  text-align: center;
-}
-
-.action-menu-container {
-  padding: 0 $action-menu-ios-group-margin;
-}
-
-ion-action-menu button {
-  min-height: $action-menu-ios-height;
-  padding: $action-menu-ios-padding;
-
-  margin: 0;
-  border: 0;
-
-  background: transparent;
-
-  &.activated {
-    background: $action-menu-ios-background-active;
-  }
-}
-
-.action-menu-group {
-  margin-bottom: $action-menu-ios-group-margin - 2;
-  border-radius: $action-menu-ios-border-radius;
-}
-
-.action-menu-group:last-child {
-  margin-bottom: $action-menu-ios-group-margin;
-}
-
-.action-menu-title,
-.action-menu-option {
-  min-height: $action-menu-ios-height;
-
-  background: $action-menu-ios-background-color;
-  font-weight: 400;
-
-  border-bottom: 1px solid $action-menu-ios-border-color;
-}
-
-.action-menu-title {
-  padding: 2rem;
-  font-size: $action-menu-ios-title-font-size;
-  font-weight: 500;
-  color: $action-menu-ios-title-color;
-  border-radius: 0;
-}
-
-.action-menu-option {
-  font-size: $action-menu-ios-button-font-size;
-  color: $action-menu-ios-button-text-color;
-  border-radius: 0;
-}
-
-.action-menu-title:first-child,
-.action-menu-button:first-child,
-.action-menu-group button:first-child {
-  border-top-left-radius: $action-menu-ios-border-radius;
-  border-top-right-radius: $action-menu-ios-border-radius;
-}
-
-.action-menu-title:last-child,
-.action-menu-button:last-child,
-.action-menu-group button:last-child {
-  border-bottom-left-radius: $action-menu-ios-border-radius;
-  border-bottom-right-radius: $action-menu-ios-border-radius;
-}
-
-
-&.hairlines .action-menu {
-  .action-menu-title,
-  .action-menu-option {
-    border-bottom-width: 0.55px;
-  }
-}

ionic/components/action-menu/modes/md.scss

@@ -1,82 +0,0 @@
-
-// Material Design Action Menu
-// --------------------------------------------------
-
-$action-menu-md-background-color:         #fafafa !default;
-
-$action-menu-md-height:                   4.8rem !default;
-
-$action-menu-md-title-color:              #757575 !default;
-$action-menu-md-title-font-size:          1.6rem !default;
-$action-menu-md-title-padding:            1.9rem 1.6rem 1.7rem !default;
-
-$action-menu-md-button-text-color:        #222 !default;
-$action-menu-md-button-font-size:         1.6rem !default;
-$action-menu-md-background-active:        #f1f1f1 !default;
-
-$action-menu-md-icon-font-size:           2.4rem !default;
-$action-menu-md-icon-margin:              0 28px 0 0 !default;
-
-
-ion-action-menu {
-  margin: 0;
-}
-
-.action-menu-container {
-  margin: 0;
-}
-
-.action-menu-title,
-.action-menu-option,
-.action-menu-destructive,
-.action-menu-cancel button {
-  text-align: left;
-  border-color: transparent;
-  font-size: $action-menu-md-button-font-size;
-  color: $action-menu-md-button-text-color;
-  box-shadow: none;
-  text-transform: none;
-}
-
-ion-action-menu icon {
-  display: inline-block;
-  margin: $action-menu-md-icon-margin;
-  min-width: 24px;
-  text-align: center;
-  vertical-align: middle;
-  font-size: $action-menu-md-icon-font-size;
-}
-
-.action-menu-title {
-  padding: $action-menu-md-title-padding;
-  font-size: $action-menu-md-title-font-size;
-  color: $action-menu-md-title-color;
-}
-
-ion-action-menu button {
-  font-weight: normal;
-  min-height: $action-menu-md-height;
-
-  &.activated {
-    background: $action-menu-md-background-active;
-    border-radius: 0;
-    box-shadow: none;
-  }
-}
-
-.action-menu-group {
-  margin: 0;
-  border-radius: 0;
-  background-color: $action-menu-md-background-color;
-
-  &:last-child button {
-    margin-bottom: 8px;
-  }
-}
-
-.action-menu-cancel {
-  background-color: $action-menu-md-background-color;
-  width: auto;
-  border: none;
-}
-

ionic/components/action-menu/test/basic/main.html

@@ -1,3 +0,0 @@
-<ion-content class="padding">
-  <button (click)="openMenu()">Open Action Menu</button>
-</ion-content>

ionic/components/action-sheet/action-sheet.scss

@@ -0,0 +1,100 @@
+
+// Action Sheet
+// --------------------------------------------------
+
+$action-sheet-width:                     100% !default;
+$action-sheet-max-width:                 520px !default;
+$action-sheet-background-color:          rgba(243,243,243,.95) !default;
+$action-sheet-button-text-color:         #007aff !default;
+
+$action-sheet-options-bg-color:          #f1f2f3 !default;
+$action-sheet-options-bg-active-color:   #e4e5e7 !default;
+$action-sheet-options-text-color:        #007aff !default;
+$action-sheet-options-border-color:      #d1d3d6 !default;
+
+
+ion-action-sheet {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  z-index: $z-index-overlay;
+}
+
+action-sheet-wrapper {
+  position: absolute;
+  z-index: $z-index-overlay-wrapper;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  display: block;
+  max-width: 500px;
+  margin: auto;
+
+  transform: translate3d(0, 100%, 0);
+}
+
+.action-sheet-container {
+  width: auto;
+  overflow: hidden;
+
+  button {
+    display: block;
+    padding: 1px;
+    width: 100%;
+    margin: 0;
+    border-radius: 0;
+    border-color: $action-sheet-options-border-color;
+    background-color: transparent;
+
+    color: $action-sheet-options-text-color;
+    font-size: 21px;
+
+    &:hover {
+      color: $action-sheet-options-text-color;
+    }
+  }
+
+  button.activated {
+    box-shadow: none;
+    border-color: $action-sheet-options-border-color;
+    color: $action-sheet-options-text-color;
+    background: $action-sheet-options-bg-active-color;
+  }
+}
+
+.action-sheet-has-icons .icon {
+  position: absolute;
+  left: 16px;
+}
+
+.action-sheet-title {
+  padding: 10px;
+  color: #8f8f8f;
+  text-align: center;
+  font-size: 13px;
+}
+
+.action-sheet-group {
+  background-color: #fff;
+  overflow: hidden;
+
+  button {
+    border-width: 1px 0px 0px 0px;
+  }
+
+  button:first-child:last-child {
+    border-width: 0;
+  }
+}
+
+.action-sheet-options {
+  background: $action-sheet-options-bg-color;
+}
+
+.action-sheet-cancel button {
+  font-weight: 500;
+}

ionic/components/action-sheet/action-sheet.ts

@@ -1,9 +1,9 @@
 /**
 * @ngdoc service
-* @name ActionMenu
+* @name ActionSheet
 * @module ionic
 * @description
-* The ActionMenu is a modal menu with options to select based on an action.
+* The ActionSheet is a modal menu with options to select based on an action.
 */
 
 import {View, Injectable, NgFor, NgIf} from 'angular2/angular2';
@@ -15,9 +15,9 @@ import * as util from 'ionic/util';
 
 
 /**
- * @name ActionMenu
+ * @name ActionSheet
  * @description
- * The Action Menu is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious.
+ * The Action Sheet is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious.
  *
  * There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even hitting escape on the keyboard for desktop testing.
  *
@@ -25,7 +25,7 @@ import * as util from 'ionic/util';
  * ```ts
  * openMenu() {
  *
- *   this.actionMenu.open({
+ *   this.actionSheet.open({
  *     buttons: [
  *       { text: 'Share This' },
  *       { text: 'Move' }
@@ -45,8 +45,8 @@ import * as util from 'ionic/util';
  *       return true;
  *     }
  *
- *   }).then(actionMenuRef => {
+ *   }).then(actionSheetRef => {
- *     this.actionMenuRef = actionMenuRef;
+ *     this.actionSheetRef = actionSheetRef;
  *   });
  *
  * }
@@ -55,28 +55,28 @@ import * as util from 'ionic/util';
 @View({
   template:
     '<backdrop (click)="_cancel()" tappable></backdrop>' +
-    '<action-menu-wrapper>' +
+    '<action-sheet-wrapper>' +
-      '<div class="action-menu-container">' +
+      '<div class="action-sheet-container">' +
-        '<div class="action-menu-group action-menu-options">' +
+        '<div class="action-sheet-group action-sheet-options">' +
-          '<div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>' +
+          '<div class="action-sheet-title" *ng-if="titleText">{{titleText}}</div>' +
-          '<button (click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option">' +
+          '<button (click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-sheet-option">' +
             '<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
             '{{b.text}}' +
           '</button>' +
-          '<button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive">' +
+          '<button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-sheet-destructive">' +
             '<icon [name]="destructiveIcon" *ng-if="destructiveIcon"></icon> ' +
             '{{destructiveText}}</button>' +
         '</div>' +
-        '<div class="action-menu-group action-menu-cancel" *ng-if="cancelText">' +
+        '<div class="action-sheet-group action-sheet-cancel" *ng-if="cancelText">' +
           '<button (click)="_cancel()">' +
             '<icon [name]="cancelIcon"></icon> ' +
             '{{cancelText}}</button>' +
         '</div>' +
       '</div>' +
-    '</action-menu-wrapper>',
+    '</action-sheet-wrapper>',
   directives: [NgFor, NgIf, Icon]
 })
-class ActionMenuDirective {
+class ActionSheetDirective {
 
   _cancel() {
     this.cancel && this.cancel();
@@ -99,10 +99,10 @@ class ActionMenuDirective {
 }
 
 @Injectable()
-export class ActionMenu extends Overlay {
+export class ActionSheet extends Overlay {
   /**
-   * Create and open a new Action Menu. This is the
+   * Create and open a new Action Sheet. This is the
-   * public API, and most often you will only use ActionMenu.open()
+   * public API, and most often you will only use ActionSheet.open()
    *
    * @param {Object} [opts={}]  TODO
    * @return {Promise} Promise that resolves when the action menu is open.
@@ -110,15 +110,15 @@ export class ActionMenu extends Overlay {
   open(opts={}) {
     let config = this.config;
     let defaults = {
-      enterAnimation: config.setting('actionMenuEnter'),
+      enterAnimation: config.setting('actionSheetEnter'),
-      leaveAnimation: config.setting('actionMenuLeave'),
+      leaveAnimation: config.setting('actionSheetLeave'),
-      cancelIcon: config.setting('actionMenuCancelIcon'),
+      cancelIcon: config.setting('actionSheetCancelIcon'),
-      destructiveIcon: config.setting('actionMenuDestructiveIcon')
+      destructiveIcon: config.setting('actionSheetDestructiveIcon')
     };
 
     let context = util.extend(defaults, opts);
 
-    return this.create(OVERLAY_TYPE, ActionMenuDirective, context, context);
+    return this.create(OVERLAY_TYPE, ActionSheetDirective, context, context);
   }
 
   /**
@@ -131,55 +131,55 @@ export class ActionMenu extends Overlay {
 
 }
 
-const OVERLAY_TYPE = 'action-menu';
+const OVERLAY_TYPE = 'action-sheet';
 
 
 /**
  * Animations for action sheet
  */
-class ActionMenuAnimation extends Animation {
+class ActionSheetAnimation extends Animation {
   constructor(element) {
     super(element);
     this.easing('cubic-bezier(.36, .66, .04, 1)').duration(450);
 
     this.backdrop = new Animation(element.querySelector('backdrop'));
-    this.wrapper = new Animation(element.querySelector('action-menu-wrapper'));
+    this.wrapper = new Animation(element.querySelector('action-sheet-wrapper'));
 
     this.add(this.backdrop, this.wrapper);
   }
 }
 
-class ActionMenuSlideIn extends ActionMenuAnimation {
+class ActionSheetSlideIn extends ActionSheetAnimation {
   constructor(element) {
     super(element);
     this.backdrop.fromTo('opacity', 0.01, 0.4);
     this.wrapper.fromTo('translateY', '100%', '0%');
   }
 }
-Animation.register('action-menu-slide-in', ActionMenuSlideIn);
+Animation.register('action-sheet-slide-in', ActionSheetSlideIn);
 
-class ActionMenuSlideOut extends ActionMenuAnimation {
+class ActionSheetSlideOut extends ActionSheetAnimation {
   constructor(element) {
     super(element);
     this.backdrop.fromTo('opacity', 0.4, 0.01);
     this.wrapper.fromTo('translateY', '0%', '100%');
   }
 }
-Animation.register('action-menu-slide-out', ActionMenuSlideOut);
+Animation.register('action-sheet-slide-out', ActionSheetSlideOut);
 
 
-class ActionMenuMdSlideIn extends ActionMenuSlideIn {
+class ActionSheetMdSlideIn extends ActionSheetSlideIn {
   constructor(element) {
     super(element);
     this.backdrop.fromTo('opacity', 0.01, 0.26);
   }
 }
-Animation.register('action-menu-md-slide-in', ActionMenuMdSlideIn);
+Animation.register('action-sheet-md-slide-in', ActionSheetMdSlideIn);
 
-class ActionMenuMdSlideOut extends ActionMenuSlideOut {
+class ActionSheetMdSlideOut extends ActionSheetSlideOut {
   constructor(element) {
     super(element);
     this.backdrop.fromTo('opacity', 0.26, 0.01);
   }
 }
-Animation.register('action-menu-md-slide-out', ActionMenuMdSlideOut);
+Animation.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);

ionic/components/action-sheet/modes/ios.scss

@@ -0,0 +1,98 @@
+
+// iOS Action Sheet
+// --------------------------------------------------
+
+$action-sheet-ios-group-margin:             10px !default;
+$action-sheet-ios-background-color:         rgba(243,243,243,.95) !default;
+
+$action-sheet-ios-height:                   5.6rem !default;
+$action-sheet-ios-padding:                  1.8rem !default;
+$action-sheet-ios-border-color:             #d2d2d6 !default;
+$action-sheet-ios-border-radius:            1.3rem !default;
+
+$action-sheet-ios-title-color:              #5f5f5f !default;
+$action-sheet-ios-title-font-size:          1.2rem !default;
+
+$action-sheet-ios-button-text-color:        #007aff !default;
+$action-sheet-ios-button-font-size:         2rem !default;
+$action-sheet-ios-background-active:        #ebebeb !default;
+
+$action-sheet-ios-icon-font-size:           1.4em !default;
+
+
+ion-action-sheet {
+  text-align: center;
+}
+
+.action-sheet-container {
+  padding: 0 $action-sheet-ios-group-margin;
+}
+
+ion-action-sheet button {
+  min-height: $action-sheet-ios-height;
+  padding: $action-sheet-ios-padding;
+
+  margin: 0;
+  border: 0;
+
+  background: transparent;
+
+  &.activated {
+    background: $action-sheet-ios-background-active;
+  }
+}
+
+.action-sheet-group {
+  margin-bottom: $action-sheet-ios-group-margin - 2;
+  border-radius: $action-sheet-ios-border-radius;
+}
+
+.action-sheet-group:last-child {
+  margin-bottom: $action-sheet-ios-group-margin;
+}
+
+.action-sheet-title,
+.action-sheet-option {
+  min-height: $action-sheet-ios-height;
+
+  background: $action-sheet-ios-background-color;
+  font-weight: 400;
+
+  border-bottom: 1px solid $action-sheet-ios-border-color;
+}
+
+.action-sheet-title {
+  padding: 2rem;
+  font-size: $action-sheet-ios-title-font-size;
+  font-weight: 500;
+  color: $action-sheet-ios-title-color;
+  border-radius: 0;
+}
+
+.action-sheet-option {
+  font-size: $action-sheet-ios-button-font-size;
+  color: $action-sheet-ios-button-text-color;
+  border-radius: 0;
+}
+
+.action-sheet-title:first-child,
+.action-sheet-button:first-child,
+.action-sheet-group button:first-child {
+  border-top-left-radius: $action-sheet-ios-border-radius;
+  border-top-right-radius: $action-sheet-ios-border-radius;
+}
+
+.action-sheet-title:last-child,
+.action-sheet-button:last-child,
+.action-sheet-group button:last-child {
+  border-bottom-left-radius: $action-sheet-ios-border-radius;
+  border-bottom-right-radius: $action-sheet-ios-border-radius;
+}
+
+
+&.hairlines .action-sheet {
+  .action-sheet-title,
+  .action-sheet-option {
+    border-bottom-width: 0.55px;
+  }
+}

ionic/components/action-sheet/modes/md.scss

@@ -0,0 +1,82 @@
+
+// Material Design Action Sheet
+// --------------------------------------------------
+
+$action-sheet-md-background-color:         #fafafa !default;
+
+$action-sheet-md-height:                   4.8rem !default;
+
+$action-sheet-md-title-color:              #757575 !default;
+$action-sheet-md-title-font-size:          1.6rem !default;
+$action-sheet-md-title-padding:            1.9rem 1.6rem 1.7rem !default;
+
+$action-sheet-md-button-text-color:        #222 !default;
+$action-sheet-md-button-font-size:         1.6rem !default;
+$action-sheet-md-background-active:        #f1f1f1 !default;
+
+$action-sheet-md-icon-font-size:           2.4rem !default;
+$action-sheet-md-icon-margin:              0 28px 0 0 !default;
+
+
+ion-action-sheet {
+  margin: 0;
+}
+
+.action-sheet-container {
+  margin: 0;
+}
+
+.action-sheet-title,
+.action-sheet-option,
+.action-sheet-destructive,
+.action-sheet-cancel button {
+  text-align: left;
+  border-color: transparent;
+  font-size: $action-sheet-md-button-font-size;
+  color: $action-sheet-md-button-text-color;
+  box-shadow: none;
+  text-transform: none;
+}
+
+ion-action-sheet icon {
+  display: inline-block;
+  margin: $action-sheet-md-icon-margin;
+  min-width: 24px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: $action-sheet-md-icon-font-size;
+}
+
+.action-sheet-title {
+  padding: $action-sheet-md-title-padding;
+  font-size: $action-sheet-md-title-font-size;
+  color: $action-sheet-md-title-color;
+}
+
+ion-action-sheet button {
+  font-weight: normal;
+  min-height: $action-sheet-md-height;
+
+  &.activated {
+    background: $action-sheet-md-background-active;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+.action-sheet-group {
+  margin: 0;
+  border-radius: 0;
+  background-color: $action-sheet-md-background-color;
+
+  &:last-child button {
+    margin-bottom: 8px;
+  }
+}
+
+.action-sheet-cancel {
+  background-color: $action-sheet-md-background-color;
+  width: auto;
+  border: none;
+}
+

ionic/components/action-sheet/test/basic/e2e.ts

@@ -1,5 +1,5 @@
 
-it('should open action menu', function() {
+it('should open action sheet', function() {
   element(by.css('button')).click();
 });
 

ionic/components/action-sheet/test/basic/index.ts

@@ -1,4 +1,4 @@
-import {App, ActionMenu} from 'ionic/ionic';
+import {App, ActionSheet} from 'ionic/ionic';
 
 
 @App({
@@ -6,13 +6,13 @@ import {App, ActionMenu} from 'ionic/ionic';
 })
 class IonicApp {
 
-  constructor(actionMenu: ActionMenu) {
+  constructor(actionSheet: ActionSheet) {
-    this.actionMenu = actionMenu;
+    this.actionSheet = actionSheet;
   }
 
   openMenu() {
 
-    this.actionMenu.open({
+    this.actionSheet.open({
       buttons: [
         { text: 'Share This' },
         { text: 'Move' }
@@ -32,8 +32,8 @@ class IonicApp {
         return true;
       }
 
-    }).then(actionMenuRef => {
+    }).then(actionSheetRef => {
-      this.actionMenuRef = actionMenuRef;
+      this.actionSheetRef = actionSheetRef;
     });
 
   }

ionic/components/action-sheet/test/basic/main.html

@@ -0,0 +1,3 @@
+<ion-content class="padding">
+  <button (click)="openMenu()">Open Action Sheet</button>
+</ion-content>

ionic/components/app/app.ts

@@ -8,7 +8,7 @@ import * as util from '../../util/util';
 
 // injectables
 import {Activator} from './activator';
-import {ActionMenu} from '../action-menu/action-menu';
+import {ActionSheet} from '../action-sheet/action-sheet';
 import {Modal} from '../modal/modal';
 import {Popup} from '../popup/popup';
 import {FocusHolder} from '../form/focus-holder';
@@ -80,7 +80,7 @@ export class IonicApp {
   /**
    * Sets if the app is currently enabled or not, meaning if it's
    * available to accept new user commands. For example, this is set to `false`
-   * while views transition, a modal slides up, an action-menu
+   * while views transition, a modal slides up, an action-sheet
    * slides up, etc. After the transition completes it is set back to `true`.
    * @param {bool} isEnabled
    * @param {bool} fallback  When `isEnabled` is set to `false`, this argument
@@ -280,7 +280,7 @@ export function ionicBootstrap(rootComponentType, config) {
 
       // TODO: probs need a better way to inject global injectables
       let activator = new Activator(app, config, window, document);
-      let actionMenu = new ActionMenu(app, config);
+      let actionSheet = new ActionSheet(app, config);
       let modal = new Modal(app, config);
       let popup = new Popup(app, config);
 
@@ -290,7 +290,7 @@ export function ionicBootstrap(rootComponentType, config) {
         bind(IonicConfig).toValue(config),
         bind(IonicPlatform).toValue(platform),
         bind(Activator).toValue(activator),
-        bind(ActionMenu).toValue(actionMenu),
+        bind(ActionSheet).toValue(actionSheet),
         bind(Modal).toValue(modal),
         bind(Popup).toValue(popup),
         ROUTER_BINDINGS,

ionic/components/modal/test/basic/index.ts

@@ -1,5 +1,5 @@
 import {App, IonicView, IonicApp, IonicConfig, IonicPlatform} from 'ionic/ionic';
-import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
+import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ionic';
 
 
 @App({
@@ -81,7 +81,7 @@ export class ContactModal {
         <button (click)="push()">Push (Go to 2nd)</button>
       </p>
       <p>
-        <button (click)="openActionMenu()">Open Action Menu</button>
+        <button (click)="openActionSheet()">Open Action Sheet</button>
       </p>
       <p>
         <button (click)="closeByHandeModal()">Close By Handle</button>
@@ -95,11 +95,11 @@ export class ModalFirstPage {
   constructor(
     nav: NavController,
     modal: Modal,
-    actionMenu: ActionMenu
+    actionSheet: ActionSheet
   ) {
     this.nav = nav;
     this.modal = modal;
-    this.actionMenu = actionMenu;
+    this.actionSheet = actionSheet;
   }
 
   push() {
@@ -116,8 +116,8 @@ export class ModalFirstPage {
     modal.close();
   }
 
-  openActionMenu() {
+  openActionSheet() {
-    this.actionMenu.open({
+    this.actionSheet.open({
       buttons: [
         { text: 'Share This' },
         { text: 'Move' }
@@ -136,8 +136,8 @@ export class ModalFirstPage {
         if(index == 1) { return false; }
         return true;
       }
-    }).then(actionMenuRef => {
+    }).then(actionSheetRef => {
-      this.actionMenuRef = actionMenuRef;
+      this.actionSheetRef = actionSheetRef;
     });
   }
 }

ionic/config/modes.ts

@@ -5,10 +5,10 @@ import {IonicConfig} from './config';
 // iOS Mode Settings
 IonicConfig.modeConfig('ios', {
 
-  actionMenuEnter: 'action-menu-slide-in',
+  actionSheetEnter: 'action-sheet-slide-in',
-  actionMenuLeave: 'action-menu-slide-out',
+  actionSheetLeave: 'action-sheet-slide-out',
-  actionMenuCancelIcon: '',
+  actionSheetCancelIcon: '',
-  actionMenuDestructiveIcon: '',
+  actionSheetDestructiveIcon: '',
 
   backButtonText: 'Back',
   backButtonIcon: 'ion-ios-arrow-back',
@@ -25,10 +25,10 @@ IonicConfig.modeConfig('ios', {
 // Material Design Mode Settings
 IonicConfig.modeConfig('md', {
 
-  actionMenuEnter: 'action-menu-md-slide-in',
+  actionSheetEnter: 'action-sheet-md-slide-in',
-  actionMenuLeave: 'action-menu-md-slide-out',
+  actionSheetLeave: 'action-sheet-md-slide-out',
-  actionMenuCancelIcon: 'ion-md-close',
+  actionSheetCancelIcon: 'ion-md-close',
-  actionMenuDestructiveIcon: 'ion-md-trash',
+  actionSheetDestructiveIcon: 'ion-md-trash',
 
   backButtonText: '',
   backButtonIcon: 'ion-md-arrow-back',

ionic/ionic.core.scss

@@ -15,7 +15,7 @@
 // Core Components
 @import
   "components/toolbar/toolbar",
-  "components/action-menu/action-menu",
+  "components/action-sheet/action-sheet",
   "components/badge/badge",
   "components/button/button",
   "components/button/button-clear",

ionic/ionic.ios.scss

@@ -5,7 +5,7 @@
 @import
   "components/item/modes/ios",
   "components/toolbar/modes/ios",
-  "components/action-menu/modes/ios",
+  "components/action-sheet/modes/ios",
   "components/card/modes/ios",
   "components/content/modes/ios",
   "components/list/modes/ios",

ionic/ionic.md.scss

@@ -5,7 +5,7 @@
 @import
   "components/material/ripple",
   "components/toolbar/modes/md",
-  "components/action-menu/modes/md",
+  "components/action-sheet/modes/md",
   "components/button/modes/md",
   "components/content/modes/md",
   "components/item/modes/md",