fix(action-sheet): add scrolling for options

packages/core/src/components/action-sheet/action-sheet.ios.scss

@@ -19,6 +19,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;
 
@@ -105,6 +108,10 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   @include text-align($action-sheet-ios-text-align);
 }
 
+.action-sheet-ios .action-sheet-wrapper {
+  @include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
+}
+
 .action-sheet-ios .action-sheet-container {
   @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
 }
@@ -113,9 +120,16 @@ $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;
-
   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);
+}
+
+.action-sheet-ios .action-sheet-group:first-child {
+  @include margin($action-sheet-ios-group-margin-top, null, null, null);
 }
 
 .action-sheet-ios .action-sheet-group:last-child {

packages/core/src/components/action-sheet/action-sheet.md.scss

@@ -10,8 +10,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
+/// @prop - Padding top of the action sheet
-$action-sheet-md-group-margin-bottom:                   8px !default;
+$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;
@@ -82,11 +85,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,
 .action-sheet-md .action-sheet-sub-title {
@@ -131,7 +129,15 @@ $action-sheet-md-icon-margin-start:                     0 !default;
 }
 
 .action-sheet-md .action-sheet-group {
-  overflow: hidden;
+  background: $action-sheet-md-background;
+}
+
+.action-sheet-md .action-sheet-group:first-child {
+  @include padding($action-sheet-md-padding-top, null, null, null);
+}
+
+.action-sheet-md .action-sheet-group:last-child {
+  @include padding(null, null, $action-sheet-md-padding-bottom, null);
 }
 
 .action-sheet-md .action-sheet-group .button-inner {

packages/core/src/components/action-sheet/action-sheet.scss

@@ -9,6 +9,7 @@ $action-sheet-width: 100% !default;
 /// @prop - Maximum width of the action sheet
 $action-sheet-max-width:                         500px !default;
 
+
 ion-action-sheet {
   @include position(0, null, null, 0);
 
@@ -21,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));
 
@@ -31,12 +32,35 @@ ion-action-sheet {
 
   width: $action-sheet-width;
   max-width: $action-sheet-max-width;
+
+  pointer-events: none;
 }
 
 .action-sheet-button {
   width: $action-sheet-width;
 }
 
-ion-action-sheet-controller {
+.action-sheet-container {
-  display: none;
+  display: flex;
+
+  flex-flow: column;
+
+  justify-content: flex-end;
+
+  height: 100%;
+  max-height: 100%;
+}
+
+.action-sheet-group {
+  overflow: scroll;
+
+  flex-shrink: 2;
+
+  pointer-events: all;
+}
+
+.action-sheet-group-cancel {
+  overflow: hidden;
+
+  flex-shrink: 0;
 }

packages/core/src/components/action-sheet/action-sheet.tsx

@@ -199,7 +199,7 @@ export class ActionSheet {
             )}
           </div>
           {cancelButton
-            ? <div class='action-sheet-group'>
+            ? <div class='action-sheet-group action-sheet-group-cancel'>
                 <button
                   class={this.buttonClass(cancelButton)}
                   onClick={() => this.click(cancelButton)}

packages/core/src/components/action-sheet/action-sheet.wp.scss

@@ -10,6 +10,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;
 
@@ -134,12 +140,18 @@ $action-sheet-wp-icon-margin-start:               0 !default;
   vertical-align: $action-sheet-wp-icon-vertical-align;
 }
 
-.action-sheet-wp .action-sheet-container {
+.action-sheet-wp .action-sheet-group {
-  @include padding(.8rem, 0);
-
   background: $action-sheet-wp-background;
 }
 
+.action-sheet-wp .action-sheet-group:first-child {
+  @include padding($action-sheet-wp-padding-top, null, null, null);
+}
+
+.action-sheet-wp .action-sheet-group:last-child {
+  @include padding(null, null, $action-sheet-wp-padding-bottom, null);
+}
+
 .action-sheet-wp .action-sheet-group .button-inner {
   justify-content: flex-start;
 }

packages/core/src/components/action-sheet/test/basic.html

@@ -19,15 +19,19 @@
     <ion-content padding>
       <ion-action-sheet-controller></ion-action-sheet-controller>
 
-      <ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button>
+      <ion-button block onclick="presentBasic()">Basic</ion-button>
-      <ion-button block onclick="presentActionSheet2()">Present Action Sheet 2</ion-button>
+      <ion-button block onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
-      <ion-button block onclick="presentActionSheet3()">Present Action Sheet 3</ion-button>
+      <ion-button block onclick="presentAlert()">Alert from Action Sheet</ion-button>
+      <ion-button block onclick="presentScroll()">Scrollable Options</ion-button>
+      <ion-button block onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
+      <ion-button block onclick="presentCancelOnly()">Cancel Only</ion-button>
+
     </ion-content>
   </ion-app>
 
   <script>
 
-    function presentActionSheet1() {
+    function presentBasic() {
       var mode = Ionic.mode;
 
       var actionSheetController = document.querySelector('ion-action-sheet-controller');
@@ -72,7 +76,7 @@
       });
     }
 
-    function presentActionSheet2() {
+    function presentNoBackdropDismiss() {
       var actionSheetController = document.querySelector('ion-action-sheet-controller');
       actionSheetController.create({
         buttons: [{
@@ -99,7 +103,7 @@
       });
     }
 
-    function presentActionSheet3() {
+    function presentAlert() {
       var actionSheetController = document.querySelector('ion-action-sheet-controller');
       actionSheetController.create({
         buttons: [{
@@ -119,6 +123,179 @@
         actionSheet.present()
       });
     }
+
+    function presentScroll() {
+      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+
+      actionSheetController.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');
+            }
+          }
+        ]
+      })
+      .then(actionSheet => {
+        actionSheet.present()
+      });
+    }
+
+    function presentScrollNoCancel() {
+      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+
+      actionSheetController.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');
+            }
+          }
+        ]
+      })
+      .then(actionSheet => {
+        actionSheet.present()
+      });
+    }
+
+    function presentCancelOnly() {
+      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+
+      actionSheetController.create({
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      })
+      .then(actionSheet => {
+        actionSheet.present()
+      });
+    }
   </script>
 </body>
 

packages/core/src/components/select/select.tsx

@@ -193,11 +193,6 @@ export class Select {
   resetInterface(ev: Event): string {
     let selectInterface = this.interface;
 
-    if (selectInterface === 'action-sheet' && this.options.length > 6) {
-      console.warn('Interface cannot be "' + selectInterface + '" with more than 6 options. Using the "alert" interface instead.');
-      selectInterface = 'alert';
-    }
-
     if ((selectInterface === 'action-sheet' || selectInterface === 'popover') && this.multiple) {
       console.warn('Interface cannot be "' + selectInterface + '" with a multi-value select. Using the "alert" interface instead.');
       selectInterface = 'alert';