feat(actionSheet): add custom cssClass in component and buttons

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

@@ -2,6 +2,33 @@ import { Component, Listen, Method } from '@stencil/core';
 import { ActionSheetEvent, ActionSheetOptions  } from '../../index';
 
 
+/**
+ * @name ActionSheetController
+ * @description
+ * An Action Sheet is a dialog that lets the user choose from a set of
+ * options. It appears on top of the app's content, and must be manually
+ * dismissed by the user before they can resume interaction with the app.
+ * Dangerous (destructive) options are made obvious in `ios` mode. There are easy
+ * ways to cancel out of the action sheet, such as tapping the backdrop or
+ * hitting the escape key on desktop.
+ *
+ * An action sheet is created from an array of `buttons`, with each button
+ * including properties for its `text`, and optionally a `handler` and `role`.
+ * If a handler returns `false` then the action sheet will not be dismissed. An
+ * action sheet can also optionally have a `title`, `subTitle` and an `icon`.
+ *
+ * A button's `role` property can either be `destructive` or `cancel`. Buttons
+ * without a role property will have the default look for the platform. Buttons
+ * with the `cancel` role will always load as the bottom button, no matter where
+ * they are in the array. All other buttons will be displayed in the order they
+ * have been added to the `buttons` array. Note: We recommend that `destructive`
+ * buttons are always the first button in the array, making them the top button.
+ * Additionally, if the action sheet is dismissed by tapping the backdrop, then
+ * it will fire the handler from the button with the cancel role.
+ *
+ * You can pass all of the action sheet's options in the first argument of
+ * the create method: `ActionSheet.create(opts)`.
+ */
 @Component({
   tag: 'ion-action-sheet-controller'
 })
@@ -10,6 +37,10 @@ export class ActionSheetController {
   private actionSheetResolves: { [actionSheetId: string]: Function } = {};
   private actionSheets: HTMLIonActionSheetElement[] = [];
 
+  /**
+   * Open an action sheet with a title, subTitle, and an array of buttons
+   * @param {ActionSheetOptions} opts Action sheet options
+   */
   @Method()
   create(opts?: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
     // create ionic's wrapping ion-action-sheet component

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

@@ -127,7 +127,6 @@ export class ActionSheet {
     this.ionActionSheetDidLoad.emit();
   }
 
-
   componentDidUnload() {
     this.ionActionSheetDidUnload.emit();
   }
@@ -147,9 +146,12 @@ export class ActionSheet {
   }
 
   buttonClass(button: ActionSheetButton): CssClassMap {
+    let customClass = button.cssClass.split(' ').filter(b => b.trim() !== '').join(' ');
+
     let buttonClass: string[] = !button.role
-      ? ['action-sheet-button']
-      : [`action-sheet-button`, `action-sheet-${button.role}`];
+      ? ['action-sheet-button', customClass]
+      : [`action-sheet-button`, `action-sheet-${button.role}`, customClass];
+
     return buttonClass.reduce((prevValue: any, cssClass: any) => {
       prevValue[cssClass] = true;
       return prevValue;
@@ -181,9 +183,10 @@ export class ActionSheet {
   }
 
   render() {
-    let userCssClass = 'action-sheet-content';
     if (this.cssClass) {
-      userCssClass += ' ' + this.cssClass;
+      this.cssClass.split(' ').forEach(cssClass => {
+        if (cssClass.trim() !== '') this.el.classList.add(cssClass);
+      });
     }
 
     let cancelButton: ActionSheetButton;

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

@@ -26,6 +26,7 @@
         <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
         <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
         <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+        <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
 
       </ion-content>
     </ion-page>
@@ -289,6 +290,26 @@
       });
       await actionSheetElement.present();
     }
+
+    async function presentWithCssClass() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        title: "Custom Css Class",
+        cssClass: "my-class my-custom-class",
+        buttons: [
+          {
+            text: 'Test',
+            cssClass: 'my-cancel-button, my-custom-button customClass',
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
   </script>
 </body>