feat(snack-bar): allow setting the layout direction (#4726)

* feat(snack-bar): allow setting the layout direction

* Allows the consumer to set the layout direction of a snack bar.
* Fixes some bad indentation in the snack bar tests.

Fixes #4721.

* fix: turn off view encapsulation

* chore: revert capitalization

Author: crisbeto

src/lib/snack-bar/simple-snack-bar.scss

@@ -4,7 +4,7 @@
 
 $mat-snack-bar-button-margin: 48px !default;
 
-:host {
+.mat-simple-snackbar {
   display: flex;
   justify-content: space-between;
   color: white;
@@ -28,4 +28,9 @@ $mat-snack-bar-button-margin: 48px !default;
     size: inherit;
     weight: 600;
   }
+
+  [dir='rtl'] & {
+    margin-right: $mat-snack-bar-button-margin;
+    margin-left: 0;
+  }
 }

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MdSnackBarRef} from './snack-bar-ref';
 
 
@@ -11,6 +11,7 @@ import {MdSnackBarRef} from './snack-bar-ref';
   selector: 'simple-snack-bar',
   templateUrl: 'simple-snack-bar.html',
   styleUrls: ['simple-snack-bar.css'],
+  encapsulation: ViewEncapsulation.None,
   host: {
     '[class.mat-simple-snackbar]': 'true',
   }
@@ -31,5 +32,7 @@ export class SimpleSnackBar {
   }
 
   /** If the action button should be shown. */
-  get hasAction(): boolean { return !!this.action; }
+  get hasAction(): boolean {
+    return !!this.action;
+  }
 }

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

@@ -1,5 +1,5 @@
 import {ViewContainerRef} from '@angular/core';
-import {AriaLivePoliteness} from '../core';
+import {AriaLivePoliteness, LayoutDirection} from '../core';
 
 /**
  * Configuration used when opening a snack-bar.
@@ -19,4 +19,7 @@ export class MdSnackBarConfig {
 
   /** Extra CSS classes to be added to the snack bar container. */
   extraClasses?: string[];
+
+  /** Text layout direction for the snack bar. */
+  direction?: LayoutDirection = 'ltr';
 }

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

@@ -309,36 +309,45 @@ describe('MdSnackBar', () => {
       tick(500);
     }));
 
-    it('should dismiss automatically after a specified timeout', fakeAsync(() => {
-      let dismissObservableCompleted = false;
-      let config = new MdSnackBarConfig();
-      config.duration = 250;
-      let snackBarRef = snackBar.open('content', 'test', config);
-      snackBarRef.afterDismissed().subscribe(() => {
-        dismissObservableCompleted = true;
-      });
+  it('should dismiss automatically after a specified timeout', fakeAsync(() => {
+    let dismissObservableCompleted = false;
+    let config = new MdSnackBarConfig();
+    config.duration = 250;
+    let snackBarRef = snackBar.open('content', 'test', config);
+    snackBarRef.afterDismissed().subscribe(() => {
+      dismissObservableCompleted = true;
+    });
 
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
-      expect(dismissObservableCompleted).toBeFalsy('Expected the snack bar not to be dismissed');
+    viewContainerFixture.detectChanges();
+    flushMicrotasks();
+    expect(dismissObservableCompleted).toBeFalsy('Expected the snack bar not to be dismissed');
 
-      tick(1000);
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
-      expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
-    }));
+    tick(1000);
+    viewContainerFixture.detectChanges();
+    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']
-      });
+  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;
+    let containerClasses = overlayContainerElement.querySelector('snack-bar-container').classList;
+
+    expect(containerClasses).toContain('one');
+    expect(containerClasses).toContain('two');
+  });
+
+  it('should set the layout direction', () => {
+    snackBar.open(simpleMessage, simpleActionLabel, { direction: 'rtl' });
+
+    let pane = overlayContainerElement.querySelector('.cdk-overlay-pane');
+
+    expect(pane.getAttribute('dir')).toBe('rtl', 'Expected the pane to be in RTL mode.');
+  });
 
-      expect(containerClasses).toContain('one');
-      expect(containerClasses).toContain('two');
-    });
 });
 
 describe('MdSnackBar with parent MdSnackBar', () => {

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

@@ -54,7 +54,7 @@ export class MdSnackBar {
    */
   openFromComponent<T>(component: ComponentType<T>, config?: MdSnackBarConfig): MdSnackBarRef<T> {
     config = _applyConfigDefaults(config);
-    let overlayRef = this._createOverlay();
+    let overlayRef = this._createOverlay(config);
     let snackBarContainer = this._attachSnackBarContainer(overlayRef, config);
     let snackBarRef = this._attachSnackbarContent(component, snackBarContainer, overlayRef);
 
@@ -139,12 +139,12 @@ export class MdSnackBar {
 
   /**
    * Creates a new overlay and places it in the correct location.
+   * @param config The user-specified snack bar config.
    */
-  private _createOverlay(): OverlayRef {
+  private _createOverlay(config: MdSnackBarConfig): OverlayRef {
     let state = new OverlayState();
-    state.positionStrategy = this._overlay.position().global()
-        .centerHorizontally()
-        .bottom('0');
+    state.direction = config.direction;
+    state.positionStrategy = this._overlay.position().global().centerHorizontally().bottom('0');
     return this._overlay.create(state);
   }
 }