From 804faf0694b7ea92d4fb8d21e997a7aa89cd7d66 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 4 Oct 2017 16:02:04 -0400
Subject: [PATCH 1/9] fix(action-sheet): add ability to scroll buttons in an
 action sheet

---
 .../action-sheet/action-sheet.ios.scss        | 18 ++++-
 src/components/action-sheet/action-sheet.scss | 11 +++
 .../test/basic/pages/page-one/page-one.html   |  1 +
 .../test/basic/pages/page-one/page-one.ts     | 77 +++++++++++++++++++
 4 files changed, 106 insertions(+), 1 deletion(-)

diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index 32703bb35e3..e9e051ad15c 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -21,6 +21,9 @@ $action-sheet-ios-padding-bottom:                       $action-sheet-ios-paddin
 /// @prop - Padding start of the action sheet
 $action-sheet-ios-padding-start:                        $action-sheet-ios-padding-end !default;
 
+/// @prop - Top margin of the action sheet button group
+$action-sheet-ios-group-margin-top:                     10px !default;
+
 /// @prop - Bottom margin of the action sheet button group
 $action-sheet-ios-group-margin-bottom:                  10px !default;
 
@@ -90,6 +93,8 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-wrapper {
+  @include position(0, 0, 0, 0);
+
   @include margin(auto, auto, constant(safe-area-inset-bottom), auto);
 }
 
@@ -103,13 +108,24 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   @include border-radius($action-sheet-ios-border-radius);
   @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
 
-  overflow: hidden;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
 
   background: $action-sheet-ios-background;
 }
 
+.action-sheet-ios .action-sheet-group:first-child {
+  @include margin($action-sheet-ios-group-margin-top, null, null, null);
+
+  flex-shrink: 2;
+}
+
 .action-sheet-ios .action-sheet-group:last-child {
   @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
+
+  overflow: hidden;
+
+  flex-shrink: 0;
 }
 
 .action-sheet-ios .action-sheet-title {
diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss
index 57c14655ac3..8e43f00f9f0 100644
--- a/src/components/action-sheet/action-sheet.scss
+++ b/src/components/action-sheet/action-sheet.scss
@@ -37,3 +37,14 @@ ion-action-sheet {
 .action-sheet-button {
   width: $action-sheet-width;
 }
+
+.action-sheet-container {
+  display: flex;
+
+  flex-flow: column;
+
+  justify-content: flex-end;
+
+  height: 100%;
+  max-height: 100%;
+}
diff --git a/src/components/action-sheet/test/basic/pages/page-one/page-one.html b/src/components/action-sheet/test/basic/pages/page-one/page-one.html
index 9e601979f20..d06c9854f03 100644
--- a/src/components/action-sheet/test/basic/pages/page-one/page-one.html
+++ b/src/components/action-sheet/test/basic/pages/page-one/page-one.html
@@ -12,6 +12,7 @@
   <button ion-button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
   <button ion-button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
   <button ion-button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
+  <button ion-button block (click)="presentActionSheetScroll()">Present Scroll</button>
 
   <pre>
     Result: {{result}}
diff --git a/src/components/action-sheet/test/basic/pages/page-one/page-one.ts b/src/components/action-sheet/test/basic/pages/page-one/page-one.ts
index 3ec51bad28b..79b9e1c6007 100644
--- a/src/components/action-sheet/test/basic/pages/page-one/page-one.ts
+++ b/src/components/action-sheet/test/basic/pages/page-one/page-one.ts
@@ -150,4 +150,81 @@ export class PageOne {
     actionSheet.present();
   }
 
+  presentActionSheetScroll() {
+    let actionSheet = this.actionSheetCtrl.create({
+      buttons: [
+        {
+          text: 'Add Reaction',
+          handler: () => {
+            console.log('Add Reaction clicked');
+          }
+        }, {
+          text: 'Copy Text',
+          handler: () => {
+            console.log('Copy Text clicked');
+          }
+        }, {
+          text: 'Share Text',
+          handler: () => {
+            console.log('Share Text clicked');
+          }
+        }, {
+          text: 'Copy Link to Message',
+          handler: () => {
+            console.log('Copy Link to Message clicked');
+          }
+        }, {
+          text: 'Remind Me',
+          handler: () => {
+            console.log('Remind Me clicked');
+          }
+        }, {
+          text: 'Pin File',
+          handler: () => {
+            console.log('Pin File clicked');
+          }
+        }, {
+          text: 'Star File',
+          handler: () => {
+            console.log('Star File clicked');
+          }
+        }, {
+          text: 'Mark Unread',
+          handler: () => {
+            console.log('Mark Unread clicked');
+          }
+        }, {
+          text: 'Edit Title',
+          handler: () => {
+            console.log('Edit Title clicked');
+          }
+        }, {
+          text: 'Save Image',
+          handler: () => {
+            console.log('Save Image clicked');
+          }
+        }, {
+          text: 'Copy Image',
+          handler: () => {
+            console.log('Copy Image clicked');
+          }
+        }, {
+          text: 'Delete File',
+          role: 'destructive',
+          handler: () => {
+            console.log('Delete File clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel', // will always sort to be on the bottom
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }
+      ]
+    });
+
+    actionSheet.present();
+  }
+
 }

From f0517b25755cfba1e49837af80a217cb91bffc28 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 4 Oct 2017 16:56:57 -0400
Subject: [PATCH 2/9] fix(action-sheet): add scroll to buttons for all modes

---
 .../action-sheet/action-sheet.ios.scss          |  4 +---
 .../action-sheet/action-sheet.md.scss           | 17 +++++++++++------
 src/components/action-sheet/action-sheet.scss   |  2 +-
 .../action-sheet/action-sheet.wp.scss           | 14 +++++++++++---
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index e9e051ad15c..4fcb5bf9d6d 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -93,9 +93,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-wrapper {
-  @include position(0, 0, 0, 0);
-
-  @include margin(auto, auto, constant(safe-area-inset-bottom), auto);
+  @include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
 }
 
 .action-sheet-ios .action-sheet-container {
diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
index e9a820c92fe..2b79b40ed81 100644
--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/src/components/action-sheet/action-sheet.md.scss
@@ -90,11 +90,6 @@ $action-sheet-md-icon-margin-bottom:                    0 !default;
 /// @prop - Margin start of the icon in the action sheet button
 $action-sheet-md-icon-margin-start:                     0 !default;
 
-.action-sheet-md .action-sheet-container {
-  @include padding(.8rem, 0);
-
-  background: $action-sheet-md-background;
-}
 
 .action-sheet-md .action-sheet-title {
   @include text-align($action-sheet-md-text-align);
@@ -144,7 +139,17 @@ $action-sheet-md-icon-margin-start:                     0 !default;
 }
 
 .action-sheet-md .action-sheet-group {
-  overflow: hidden;
+  overflow: scroll;
+
+  background: $action-sheet-md-background;
+}
+
+.action-sheet-md .action-sheet-group:first-child {
+  @include padding(.8rem, 0, 0, 0);
+}
+
+.action-sheet-md .action-sheet-group:last-child {
+  @include padding(0, 0, .8rem, 0);
 }
 
 .action-sheet-md .action-sheet-group .button-inner {
diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss
index 8e43f00f9f0..71a28339fba 100644
--- a/src/components/action-sheet/action-sheet.scss
+++ b/src/components/action-sheet/action-sheet.scss
@@ -22,7 +22,7 @@ ion-action-sheet {
 }
 
 .action-sheet-wrapper {
-  @include position(null, 0, 0, 0);
+  @include position(0, 0, 0, 0);
   @include margin(auto);
   @include transform(translate3d(0, 100%, 0));
 
diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
index 2a18a4dc178..b8cc5c719d7 100644
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/src/components/action-sheet/action-sheet.wp.scss
@@ -147,10 +147,18 @@ $action-sheet-wp-icon-margin-start:               0 !default;
   }
 }
 
-.action-sheet-wp .action-sheet-container {
-  @include padding(.8rem, 0);
-
+.action-sheet-wp .action-sheet-group {
   background: $action-sheet-wp-background;
+
+  overflow: scroll;
+}
+
+.action-sheet-wp .action-sheet-group:first-child {
+  @include padding(.8rem, 0, 0, 0);
+}
+
+.action-sheet-wp .action-sheet-group:last-child {
+  @include padding(0, 0, .8rem, 0);
 }
 
 .action-sheet-wp .action-sheet-group .button-inner {

From a5b54e59f1c183a90da44acdc2f81fdaf53e7ae4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 4 Oct 2017 16:57:55 -0400
Subject: [PATCH 3/9] fix(select): add support for more than 6 options in
 action-sheet

---
 src/components/select/select.ts                |  4 ----
 .../single-value/pages/page-one/page-one.html  | 18 ++++++++++++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 1c37f89e465..69f10754285 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -293,10 +293,6 @@ export class Select extends BaseInput<any> implements OnDestroy {
     }
 
     let options = this._options.toArray();
-    if (this.interface === 'action-sheet' && options.length > 6) {
-      console.warn('Interface cannot be "action-sheet" with more than 6 options. Using the "alert" interface.');
-      this.interface = 'alert';
-    }
 
     if ((this.interface === 'action-sheet' || this.interface === 'popover') && this._multi) {
       console.warn('Interface cannot be "' + this.interface + '" with a multi-value select. Using the "alert" interface.');
diff --git a/src/components/select/test/single-value/pages/page-one/page-one.html b/src/components/select/test/single-value/pages/page-one/page-one.html
index 566fab14781..803be074f6a 100644
--- a/src/components/select/test/single-value/pages/page-one/page-one.html
+++ b/src/components/select/test/single-value/pages/page-one/page-one.html
@@ -61,6 +61,24 @@
     </ion-select>
   </ion-item>
 
+  <ion-item>
+    <ion-label>Edit</ion-label>
+    <ion-select [(ngModel)]="edit" interface="action-sheet">
+      <ion-option value="add_reaction">Add Reaction</ion-option>
+      <ion-option value="copy_text">Copy Text</ion-option>
+      <ion-option value="share_text">Share Text</ion-option>
+      <ion-option value="copy_link">Copy Link to Message</ion-option>
+      <ion-option value="remind_me">Remind Me</ion-option>
+      <ion-option value="pin_file">Pin File</ion-option>
+      <ion-option value="star_file">Star File</ion-option>
+      <ion-option value="mark_unread">Mark Unread</ion-option>
+      <ion-option value="edit_title">Edit Title</ion-option>
+      <ion-option value="save_image">Save Image</ion-option>
+      <ion-option value="copy_image">Copy Image</ion-option>
+      <ion-option value="delete_file">Delete File</ion-option>
+    </ion-select>
+  </ion-item>
+
   <ion-item>
     <ion-label>Music</ion-label>
     <ion-select [(ngModel)]="music" [selectOptions]="musicSelectOpts" placeholder="Select Music">

From 258c2d7358944d4bd8d22dc6dee1eb261089c00d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 4 Oct 2017 17:09:56 -0400
Subject: [PATCH 4/9] style(sass): fix linter error

---
 src/components/action-sheet/action-sheet.ios.scss | 3 ++-
 src/components/action-sheet/action-sheet.wp.scss  | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index 4fcb5bf9d6d..e0885617c7d 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -107,9 +107,10 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
 
   overflow: scroll;
-  -webkit-overflow-scrolling: touch;
 
   background: $action-sheet-ios-background;
+
+  -webkit-overflow-scrolling: touch;
 }
 
 .action-sheet-ios .action-sheet-group:first-child {
diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
index b8cc5c719d7..0e39fb10799 100644
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/src/components/action-sheet/action-sheet.wp.scss
@@ -148,9 +148,9 @@ $action-sheet-wp-icon-margin-start:               0 !default;
 }
 
 .action-sheet-wp .action-sheet-group {
-  background: $action-sheet-wp-background;
-
   overflow: scroll;
+
+  background: $action-sheet-wp-background;
 }
 
 .action-sheet-wp .action-sheet-group:first-child {

From 19d2177d6c238ccc0ea46bec8a4ac5b55d9ec8b5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 5 Oct 2017 11:12:54 -0400
Subject: [PATCH 5/9] fix(action-sheet): add flex-shrink to all modes and fix
 border bleed

also adds variables for md and wp mode padding and removes unused
$action-sheet-md-group-margin-bottom var
---
 src/components/action-sheet/action-sheet.ios.scss | 10 ++--------
 src/components/action-sheet/action-sheet.md.scss  | 11 +++++++----
 src/components/action-sheet/action-sheet.scss     | 14 ++++++++++++++
 src/components/action-sheet/action-sheet.wp.scss  | 10 ++++++++--
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index e0885617c7d..39cc04b085d 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -106,25 +106,19 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   @include border-radius($action-sheet-ios-border-radius);
   @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
 
-  overflow: scroll;
-
   background: $action-sheet-ios-background;
 
   -webkit-overflow-scrolling: touch;
+  // Prevents borders from going outside of the container
+  -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000);
 }
 
 .action-sheet-ios .action-sheet-group:first-child {
   @include margin($action-sheet-ios-group-margin-top, null, null, null);
-
-  flex-shrink: 2;
 }
 
 .action-sheet-ios .action-sheet-group:last-child {
   @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
-
-  overflow: hidden;
-
-  flex-shrink: 0;
 }
 
 .action-sheet-ios .action-sheet-title {
diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
index 2b79b40ed81..e329bf7d5af 100644
--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/src/components/action-sheet/action-sheet.md.scss
@@ -9,8 +9,11 @@ $action-sheet-md-text-align:                            start !default;
 /// @prop - Background color of the action sheet
 $action-sheet-md-background:                            #fafafa !default;
 
-/// @prop - Bottom margin of the action sheet button group
-$action-sheet-md-group-margin-bottom:                   8px !default;
+/// @prop - Padding top of the action sheet
+$action-sheet-md-padding-top:                           .8rem !default;
+
+/// @prop - Padding bottom of the action sheet
+$action-sheet-md-padding-bottom:                        .8rem !default;
 
 /// @prop - Color of the action sheet title
 $action-sheet-md-title-color:                           #757575 !default;
@@ -145,11 +148,11 @@ $action-sheet-md-icon-margin-start:                     0 !default;
 }
 
 .action-sheet-md .action-sheet-group:first-child {
-  @include padding(.8rem, 0, 0, 0);
+  @include padding($action-sheet-md-padding-top, null, null, null);
 }
 
 .action-sheet-md .action-sheet-group:last-child {
-  @include padding(0, 0, .8rem, 0);
+  @include padding(null, null, $action-sheet-md-padding-bottom, null);
 }
 
 .action-sheet-md .action-sheet-group .button-inner {
diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss
index 71a28339fba..69fe9384a35 100644
--- a/src/components/action-sheet/action-sheet.scss
+++ b/src/components/action-sheet/action-sheet.scss
@@ -48,3 +48,17 @@ ion-action-sheet {
   height: 100%;
   max-height: 100%;
 }
+
+.action-sheet-group {
+  overflow: scroll;
+}
+
+.action-sheet-group:first-child {
+  flex-shrink: 2;
+}
+
+.action-sheet-group:last-child {
+  overflow: hidden;
+
+  flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
index 0e39fb10799..cc1974041dc 100644
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/src/components/action-sheet/action-sheet.wp.scss
@@ -9,6 +9,12 @@ $action-sheet-wp-text-align:                      start !default;
 /// @prop - Background color of the action sheet
 $action-sheet-wp-background:                      #fff !default;
 
+/// @prop - Padding top of the action sheet
+$action-sheet-wp-padding-top:                     .8rem !default;
+
+/// @prop - Padding bottom of the action sheet
+$action-sheet-wp-padding-bottom:                  .8rem !default;
+
 /// @prop - Box shadow color of the action sheet
 $action-sheet-wp-box-shadow-color:                rgba(0, 0, 0, .2) !default;
 
@@ -154,11 +160,11 @@ $action-sheet-wp-icon-margin-start:               0 !default;
 }
 
 .action-sheet-wp .action-sheet-group:first-child {
-  @include padding(.8rem, 0, 0, 0);
+  @include padding($action-sheet-wp-padding-top, null, null, null);
 }
 
 .action-sheet-wp .action-sheet-group:last-child {
-  @include padding(0, 0, .8rem, 0);
+  @include padding(null, null, $action-sheet-wp-padding-bottom, null);
 }
 
 .action-sheet-wp .action-sheet-group .button-inner {

From 8df6c26e28d0b5c4e46cf8bd5d45d6f55ecdcbf5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 5 Oct 2017 11:15:39 -0400
Subject: [PATCH 6/9] style(sass): fix linter errors

---
 src/components/action-sheet/action-sheet.ios.scss | 1 +
 src/components/action-sheet/action-sheet.scss     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index 39cc04b085d..31a70c6ef5f 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -108,6 +108,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
   background: $action-sheet-ios-background;
 
+  // scss-lint:disable VendorPrefix
   -webkit-overflow-scrolling: touch;
   // Prevents borders from going outside of the container
   -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000);
diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss
index 69fe9384a35..6616d85d208 100644
--- a/src/components/action-sheet/action-sheet.scss
+++ b/src/components/action-sheet/action-sheet.scss
@@ -61,4 +61,4 @@ ion-action-sheet {
   overflow: hidden;
 
   flex-shrink: 0;
-}
\ No newline at end of file
+}

From f7e5bd187660ee27d6c24852456ea2bb647ed669 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 5 Oct 2017 11:18:41 -0400
Subject: [PATCH 7/9] refactor(action-sheet): remove duplicated overflow styles

---
 src/components/action-sheet/action-sheet.md.scss | 2 --
 src/components/action-sheet/action-sheet.wp.scss | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
index e329bf7d5af..2c2cb42ae15 100644
--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/src/components/action-sheet/action-sheet.md.scss
@@ -142,8 +142,6 @@ $action-sheet-md-icon-margin-start:                     0 !default;
 }
 
 .action-sheet-md .action-sheet-group {
-  overflow: scroll;
-
   background: $action-sheet-md-background;
 }
 
diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
index cc1974041dc..616558b373f 100644
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/src/components/action-sheet/action-sheet.wp.scss
@@ -154,8 +154,6 @@ $action-sheet-wp-icon-margin-start:               0 !default;
 }
 
 .action-sheet-wp .action-sheet-group {
-  overflow: scroll;
-
   background: $action-sheet-wp-background;
 }
 

From fb46cf0ec8a6bcaddf3c1b865f476db57b316d02 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 5 Oct 2017 16:52:17 -0400
Subject: [PATCH 8/9] fix(action-sheet): get scroll working properly without
 cancel button

---
 .../action-sheet/action-sheet-component.ts    |  2 +-
 src/components/action-sheet/action-sheet.scss |  4 +-
 .../test/basic/pages/page-one/page-one.html   | 10 +-
 .../test/basic/pages/page-one/page-one.ts     | 95 ++++++++++++++++++-
 4 files changed, 99 insertions(+), 12 deletions(-)

diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts
index 09240908b8e..6c51dbc3773 100644
--- a/src/components/action-sheet/action-sheet-component.ts
+++ b/src/components/action-sheet/action-sheet-component.ts
@@ -26,7 +26,7 @@ import { ViewController } from '../../navigation/view-controller';
             '{{b.text}}' +
           '</button>' +
         '</div>' +
-        '<div class="action-sheet-group" *ngIf="cancelButton">' +
+        '<div class="action-sheet-group action-sheet-group-cancel" *ngIf="cancelButton">' +
           '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
             '<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
             '{{cancelButton.text}}' +
diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss
index 6616d85d208..364dbaf7971 100644
--- a/src/components/action-sheet/action-sheet.scss
+++ b/src/components/action-sheet/action-sheet.scss
@@ -51,13 +51,11 @@ ion-action-sheet {
 
 .action-sheet-group {
   overflow: scroll;
-}
 
-.action-sheet-group:first-child {
   flex-shrink: 2;
 }
 
-.action-sheet-group:last-child {
+.action-sheet-group-cancel {
   overflow: hidden;
 
   flex-shrink: 0;
diff --git a/src/components/action-sheet/test/basic/pages/page-one/page-one.html b/src/components/action-sheet/test/basic/pages/page-one/page-one.html
index d06c9854f03..d0ada36fe7f 100644
--- a/src/components/action-sheet/test/basic/pages/page-one/page-one.html
+++ b/src/components/action-sheet/test/basic/pages/page-one/page-one.html
@@ -9,10 +9,12 @@
 
 <ion-content padding>
 
-  <button ion-button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
-  <button ion-button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
-  <button ion-button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
-  <button ion-button block (click)="presentActionSheetScroll()">Present Scroll</button>
+  <button ion-button block class="e2eOpenActionSheet" (click)="presentBasic()">Basic</button>
+  <button ion-button block (click)="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+  <button ion-button block (click)="presentAlert()">Alert from Action Sheet</button>
+  <button ion-button block (click)="presentScroll()">Scrollable Options</button>
+  <button ion-button block (click)="presentScrollNoCancel()">Scroll Without Cancel</button>
+  <button ion-button block (click)="presentCancelOnly()">Cancel Only</button>
 
   <pre>
     Result: {{result}}
diff --git a/src/components/action-sheet/test/basic/pages/page-one/page-one.ts b/src/components/action-sheet/test/basic/pages/page-one/page-one.ts
index 79b9e1c6007..d4e9b5e4325 100644
--- a/src/components/action-sheet/test/basic/pages/page-one/page-one.ts
+++ b/src/components/action-sheet/test/basic/pages/page-one/page-one.ts
@@ -12,7 +12,7 @@ export class PageOne {
 
   constructor(public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public modalCtrl: ModalController, public plt: Platform) {}
 
-  presentActionSheet1() {
+  presentBasic() {
     this.result = '';
 
     this.actionSheetCtrl.create()
@@ -66,7 +66,7 @@ export class PageOne {
       .present();
   }
 
-  presentActionSheet2() {
+  presentNoBackdropDismiss() {
     this.result = '';
 
     let actionSheet = this.actionSheetCtrl.create({
@@ -102,7 +102,7 @@ export class PageOne {
     actionSheet.present(actionSheet);
   }
 
-  presentActionSheet3() {
+  presentAlert() {
     this.result = '';
 
     let actionSheet = this.actionSheetCtrl.create({
@@ -150,7 +150,7 @@ export class PageOne {
     actionSheet.present();
   }
 
-  presentActionSheetScroll() {
+  presentScroll() {
     let actionSheet = this.actionSheetCtrl.create({
       buttons: [
         {
@@ -227,4 +227,91 @@ export class PageOne {
     actionSheet.present();
   }
 
+  presentScrollNoCancel() {
+    let actionSheet = this.actionSheetCtrl.create({
+      buttons: [
+        {
+          text: 'Add Reaction',
+          handler: () => {
+            console.log('Add Reaction clicked');
+          }
+        }, {
+          text: 'Copy Text',
+          handler: () => {
+            console.log('Copy Text clicked');
+          }
+        }, {
+          text: 'Share Text',
+          handler: () => {
+            console.log('Share Text clicked');
+          }
+        }, {
+          text: 'Copy Link to Message',
+          handler: () => {
+            console.log('Copy Link to Message clicked');
+          }
+        }, {
+          text: 'Remind Me',
+          handler: () => {
+            console.log('Remind Me clicked');
+          }
+        }, {
+          text: 'Pin File',
+          handler: () => {
+            console.log('Pin File clicked');
+          }
+        }, {
+          text: 'Star File',
+          handler: () => {
+            console.log('Star File clicked');
+          }
+        }, {
+          text: 'Mark Unread',
+          handler: () => {
+            console.log('Mark Unread clicked');
+          }
+        }, {
+          text: 'Edit Title',
+          handler: () => {
+            console.log('Edit Title clicked');
+          }
+        }, {
+          text: 'Save Image',
+          handler: () => {
+            console.log('Save Image clicked');
+          }
+        }, {
+          text: 'Copy Image',
+          handler: () => {
+            console.log('Copy Image clicked');
+          }
+        }, {
+          text: 'Delete File',
+          role: 'destructive',
+          handler: () => {
+            console.log('Delete File clicked');
+          }
+        }
+      ]
+    });
+
+    actionSheet.present();
+  }
+
+  presentCancelOnly() {
+    let actionSheet = this.actionSheetCtrl.create({
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel', // will always sort to be on the bottom
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }
+      ]
+    });
+
+    actionSheet.present();
+  }
+
 }

From c118c83faf25f2d352686d9e1df4fdd104720618 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 5 Oct 2017 17:07:01 -0400
Subject: [PATCH 9/9] fix(action-sheet): remove pointer events from wrapper

---
 src/components/action-sheet/action-sheet.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss
index 364dbaf7971..b4dbb310692 100644
--- a/src/components/action-sheet/action-sheet.scss
+++ b/src/components/action-sheet/action-sheet.scss
@@ -32,6 +32,8 @@ ion-action-sheet {
 
   width: $action-sheet-width;
   max-width: $action-sheet-max-width;
+
+  pointer-events: none;
 }
 
 .action-sheet-button {
@@ -53,6 +55,8 @@ ion-action-sheet {
   overflow: scroll;
 
   flex-shrink: 2;
+
+  pointer-events: all;
 }
 
 .action-sheet-group-cancel {