Add support for additional CSS class on paper-toast (#820)

* paper-toast: Add support for additional CSS class

Adds support for supplying additional CSS classes on paper-toasts, including via the `toastClass` option in the `paper-toaster` service.

* Demo - paper-toast: add toastClass to toaster service demo

Includes some additional (S)CSS to set the toast background colour when md-accent or md-warn class is applied.

addon/templates/components/paper-toast.hbs

@@ -1,5 +1,5 @@
 {{#ember-wormhole to=destinationId}}
-  {{#paper-toast-inner swipe=swipe swipeToClose=swipeToClose onClose=onClose top=top left=left capsule=capsule}}
+  {{#paper-toast-inner swipe=swipe swipeToClose=swipeToClose onClose=onClose top=top left=left capsule=capsule class=class}}
     {{yield (hash
       text=(component "paper-toast-text")
     )}}

addon/templates/components/paper-toaster.hbs

@@ -4,6 +4,7 @@
     onClose=(action onClose activeToast)
     position=activeToast.position
     duration=activeToast.duration
+    class=activeToast.toastClass
     parent=parent as |toast|}}
     {{#if activeToast.componentName}}
       {{component activeToast.componentName}}

tests/dummy/app/controllers/demo/toast.js

@@ -7,6 +7,7 @@ export default Controller.extend({
   positionX: 'left',
   positionY: 'bottom',
   toastText: 'Hello world',
+  toastClass: '',
 
   paperToaster: inject.service(),
 
@@ -21,13 +22,15 @@ export default Controller.extend({
     // BEGIN-SNIPPET toaster
     openServiceToast() {
       this.get('paperToaster').show(this.get('toastText'), {
-        duration: 4000
+        duration: 4000,
+        toastClass: this.get('toastClass')
       });
     },
 
     openServiceActionToast() {
       this.get('paperToaster').show(this.get('toastText'), {
         duration: 4000,
+        toastClass: this.get('toastClass'),
         action: {
           label: 'Undo',
           accent: true,

tests/dummy/app/styles/demo.scss

@@ -1505,4 +1505,14 @@ md-input-container .hint {
 
 md-tabs.md-primary {
   border-radius: 0px;
-}
+}
+
+/* toast demo */
+md-toast {
+  &.md-accent > .md-toast-content {
+    background: color($accent, '400');
+  }
+  &.md-warn > .md-toast-content {
+    background: color($warn, '400');
+  }
+}

tests/dummy/app/templates/demo/toast.hbs

@@ -110,7 +110,17 @@
 
         <div class="layout-column">
           {{paper-input label="Toast text" value=toastText onChange=(action (mut toastText))}}
+
+          <strong>Toast class</strong>
+          <div>
+            {{#paper-radio-group class="layout-row" groupValue=toastClass onChange=(action (mut toastClass)) as |group|}}
+              {{#group.radio value=""}}[none]{{/group.radio}}
+              {{#group.radio value="md-accent"}}md-accent{{/group.radio}}
+              {{#group.radio value="md-warn"}}md-warn{{/group.radio}}
+            {{/paper-radio-group}}
+          </div>
         </div>
+
         <div class="layout-row">
           {{#paper-button raised=true primary=true onClick=(action "openServiceToast")}}
             Open toast
@@ -151,6 +161,7 @@
             (p-row "duration" "number or `false`" "Timeout in milliseconds. Defaults to `3000`. Use `false` to keep it open until a `cancelToast` is used.")
             (p-row "onClose" "function" "You can pass in a function the will be called back after the toast closes.")
             (p-row "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
+            (p-row "toastClass" "string" "CSS class to be applied to the md-toast element")
             (p-row "action.label" "string" "The label of the action button.")
             (p-row "action.accent" "boolean" "Wether or not you want the action button to be higlighted with the accent color.")
             (p-row "action.onClick" "function" "This function gets called when the button is pressed.")