From 199cb0044451e041e56145c116de1e23c751ce7e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 6 Oct 2017 05:45:49 -0400 Subject: [PATCH] fix(action-sheet): fix action sheet so it will scroll when the options exceed the screen (#13049) * fix(action-sheet): add ability to scroll buttons in an action sheet * fix(action-sheet): add scroll to buttons for all modes * fix(select): add support for more than 6 options in action-sheet * style(sass): fix linter error * 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 * style(sass): fix linter errors * refactor(action-sheet): remove duplicated overflow styles * fix(action-sheet): get scroll working properly without cancel button * fix(action-sheet): remove pointer events from wrapper --- .../action-sheet/action-sheet-component.ts | 2 +- .../action-sheet/action-sheet.ios.scss | 16 +- .../action-sheet/action-sheet.md.scss | 22 ++- src/components/action-sheet/action-sheet.scss | 29 ++- .../action-sheet/action-sheet.wp.scss | 18 +- .../test/basic/pages/page-one/page-one.html | 9 +- .../test/basic/pages/page-one/page-one.ts | 170 +++++++++++++++++- src/components/select/select.ts | 4 - .../single-value/pages/page-one/page-one.html | 18 ++ 9 files changed, 262 insertions(+), 26 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}}' + '' + '' + - '
' + + '
' + ' - - + + + + + + 
     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..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,4 +150,168 @@ export class PageOne {
     actionSheet.present();
   }
 
+  presentScroll() {
+    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();
+  }
+
+  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();
+  }
+
 }
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 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 @@
     
   
 
+  
+    Edit
+    
+      Add Reaction
+      Copy Text
+      Share Text
+      Copy Link to Message
+      Remind Me
+      Pin File
+      Star File
+      Mark Unread
+      Edit Title
+      Save Image
+      Copy Image
+      Delete File
+    
+  
+
   
     Music