feat(toast): added toastClass property

- toastClass sets a given class on the `md-toast` element

fixes #2878

Closes #8951

Author: EladBezalel

src/components/toast/toast.js

@@ -155,6 +155,10 @@ function MdToastDirective($mdToast) {
   *        <td>`.theme(string)`</td>
   *        <td>Sets the theme on the toast to the requested theme. Default is `$mdThemingProvider`'s default.</td>
   *      </tr>
+  *      <tr>
+  *        <td>`.toastClass(string)`</td>
+  *        <td>Sets a class on the toast element</td>
+  *      </tr>
   *    </tbody>
   * </table>
   *
@@ -206,6 +210,7 @@ function MdToastDirective($mdToast) {
   *     Available: any combination of `'bottom'`, `'left'`, `'top'`, `'right'`, `'end'` and `'start'`.
   *     The properties `'end'` and `'start'` are dynamic and can be used for RTL support.<br/>
   *     Default combination: `'bottom left'`.
+  *   - `toastClass` - `{string=}`: A class to set on the toast element.
   *   - `controller` - `{string=}`: The controller to associate with this toast.
   *     The controller will be injected the local `$mdToast.hide( )`, which is a function
   *     used to hide the toast.
@@ -267,7 +272,7 @@ function MdToastProvider($$interimElementProvider) {
   var activeToastContent;
   var $mdToast = $$interimElementProvider('$mdToast')
     .setDefaults({
-      methods: ['position', 'hideDelay', 'capsule', 'parent', 'position' ],
+      methods: ['position', 'hideDelay', 'capsule', 'parent', 'position', 'toastClass'],
       options: toastDefaultOptions
     })
     .addPreset('simple', {
@@ -326,6 +331,7 @@ function MdToastProvider($$interimElementProvider) {
     return {
       onShow: onShow,
       onRemove: onRemove,
+      toastClass: '',
       position: 'bottom left',
       themable: true,
       hideDelay: 3000,
@@ -388,10 +394,12 @@ function MdToastProvider($$interimElementProvider) {
         }
 
         element.addClass('_md-' + swipe);
+
         $mdUtil.nextTick($mdToast.cancel);
       };
       options.openClass = toastOpenClass(options.position);
 
+      element.addClass(options.toastClass);
 
       // 'top left' -> 'md-top md-left'
       options.parent.addClass(options.openClass);

src/components/toast/toast.spec.js

@@ -26,7 +26,7 @@ describe('$mdToast service', function() {
 
   describe('simple()', function() {
 
-    hasConfigMethods(['content', 'action', 'capsule', 'highlightAction', 'theme']);
+    hasConfigMethods(['content', 'action', 'capsule', 'highlightAction', 'theme', 'toastClass']);
 
     it('should have `._md` class indicator', inject(function($mdToast, $material) {
       var parent = angular.element('<div>');
@@ -121,6 +121,19 @@ describe('$mdToast service', function() {
       expect(button).toHaveClass('md-warn');
     }));
 
+    it('adds the specified class to md-toast when using toastClass', inject(function($mdToast, $material) {
+      var parent = angular.element('<div>');
+
+      $mdToast.show(
+        $mdToast.simple()
+          .parent(parent)
+          .toastClass('test')
+      );
+      $material.flushOutstandingAnimations();
+
+      expect(parent.find('md-toast').hasClass('test')).toBe(true);
+    }));
+
     describe('when using custom interpolation symbols', function() {
       beforeEach(module(function($interpolateProvider) {
         $interpolateProvider.startSymbol('[[').endSymbol(']]');