feat(snack-bar): allow addition of extra css classes (#2804)

Fixes #2664.

Author: crisbeto

src/demo-app/snack-bar/snack-bar-demo.html

@@ -27,6 +27,10 @@ <h1>SnackBar demo</h1>
       </md-input-container>
     </md-checkbox>
   </div>
+
+  <p>
+    <md-checkbox [(ngModel)]="addExtraClass">Add extra class to container</md-checkbox>
+  </p>
 </div>
 
 <button md-raised-button (click)="open()">OPEN</button>

src/demo-app/snack-bar/snack-bar-demo.scss

@@ -1,3 +1,17 @@
-.demo-button-label-input {
-  display: inline-block;
-}
+.party {
+  animation: party 5000ms infinite;
+}
+
+@keyframes party {
+  0% { background: #00f; }
+  10% { background: #8e44ad; }
+  20% { background: #1abc9c; }
+  30% { background: #d35400; }
+  40% { background: #00f; }
+  50% { background: #34495e; }
+  60% { background: #00f; }
+  70% { background: #2980b9; }
+  80% { background: #f1c40f; }
+  90% { background: #2980b9; }
+  100% { background: #0ff; }
+}

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -1,24 +1,27 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
 
 @Component({
   moduleId: module.id,
   selector: 'snack-bar-demo',
+  styleUrls: ['snack-bar-demo.css'],
   templateUrl: 'snack-bar-demo.html',
+  encapsulation: ViewEncapsulation.None,
 })
 export class SnackBarDemo {
   message: string = 'Snack Bar opened.';
   actionButtonLabel: string = 'Retry';
   action: boolean = false;
   setAutoHide: boolean = true;
-  autoHide: number = 0;
+  autoHide: number = 10000;
+  addExtraClass: boolean = false;
 
-  constructor(
-      public snackBar: MdSnackBar) { }
+  constructor(public snackBar: MdSnackBar) { }
 
   open() {
     let config = new MdSnackBarConfig();
     config.duration = this.autoHide;
+    config.extraClasses = this.addExtraClass ? ['party'] : null;
     this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
   }
 }

src/lib/snack-bar/README.md

@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/snack-bar
+Please see the official documentation at https://material.angular.io/components/component/snack-bar

src/lib/snack-bar/snack-bar-config.ts

@@ -16,4 +16,7 @@ export class MdSnackBarConfig {
 
   /** The length of time in milliseconds to wait before automatically dismissing the snack bar. */
   duration?: number = 0;
+
+  /** Extra CSS classes to be added to the snack bar container. */
+  extraClasses?: string[];
 }

src/lib/snack-bar/snack-bar-container.ts

@@ -10,6 +10,8 @@ import {
   AnimationTransitionEvent,
   NgZone,
   OnDestroy,
+  Renderer,
+  ElementRef,
 } from '@angular/core';
 import {
   BasePortalHost,
@@ -71,7 +73,10 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
   /** The snack bar configuration. */
   snackBarConfig: MdSnackBarConfig;
 
-  constructor(private _ngZone: NgZone) {
+  constructor(
+    private _ngZone: NgZone,
+    private _renderer: Renderer,
+    private _elementRef: ElementRef) {
     super();
   }
 
@@ -81,6 +86,14 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
       throw new MdSnackBarContentAlreadyAttached();
     }
 
+    if (this.snackBarConfig.extraClasses) {
+      // Not the most efficient way of adding classes, but the renderer doesn't allow us
+      // to pass in an array or a space-separated list.
+      for (let cssClass of this.snackBarConfig.extraClasses) {
+        this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, true);
+      }
+    }
+
     return this._portalHost.attachComponentPortal(portal);
   }
 

src/lib/snack-bar/snack-bar.spec.ts

@@ -320,6 +320,18 @@ describe('MdSnackBar', () => {
       flushMicrotasks();
       expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
     }));
+
+    it('should add extra classes to the container', () => {
+      snackBar.open(simpleMessage, simpleActionLabel, {
+        viewContainerRef: testViewContainerRef,
+        extraClasses: ['one', 'two']
+      });
+
+      let containerClasses = overlayContainerElement.querySelector('snack-bar-container').classList;
+
+      expect(containerClasses).toContain('one');
+      expect(containerClasses).toContain('two');
+    });
 });
 
 describe('MdSbackBar with parent MdSnackBar', () => {