fix(snack-bar): allow multi-line text (#3626)

* Wraps multi-line text, instead of truncating it, inside of snack bars. **Note:** While the spec only mentions multi-line text on mobile, this seems to be a better approach than cutting it off at ~500px. We can revisit this if we start using media queries.
* Aligns the snack bar button margin to the spec.
* Simplifies some of the CSS to remove the need for a hardcoded height and negative margins.

Fixes #1951.

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

@@ -1,2 +1,2 @@
-<span class="mat-simple-snackbar-message">{{message}}</span>
+{{message}}
 <button class="mat-simple-snackbar-action" *ngIf="hasAction" (click)="dismiss()">{{action}}</button>

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

@@ -2,6 +2,8 @@
 @import '../core/style/button-common';
 @import '../core/style/list-common';
 
+$mat-snack-bar-button-margin: 48px !default;
+
 :host {
   display: flex;
   justify-content: space-between;
@@ -13,20 +15,15 @@
   }
 }
 
-.mat-simple-snackbar-message {
-  @include mat-truncate-line;
-}
-
 .mat-simple-snackbar-action {
   @include mat-button-reset;
 
   background: none;
-  margin: -5px 0 0;
-  padding: 5px;
   text-transform: uppercase;
   color: inherit;
-  line-height: inherit;
+  line-height: 1;
   flex-shrink: 0;
+  margin-left: $mat-snack-bar-button-margin;
   font: {
     family: inherit;
     size: inherit;

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

@@ -2,7 +2,6 @@
 @import '../core/a11y/a11y';
 
 $mat-snack-bar-padding: 14px 24px !default;
-$mat-snack-bar-height: 20px !default;
 $mat-snack-bar-min-width: 288px !default;
 $mat-snack-bar-max-width: 568px !default;
 
@@ -13,10 +12,8 @@ $mat-snack-bar-max-width: 568px !default;
   border-radius: 2px;
   box-sizing: content-box;
   display: block;
-  height: $mat-snack-bar-height;
   max-width: $mat-snack-bar-max-width;
   min-width: $mat-snack-bar-min-width;
-  overflow: hidden;
   padding: $mat-snack-bar-padding;
   // Initial transformation is applied to start snack bar out of view.
   transform: translateY(100%);

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

@@ -70,9 +70,9 @@ describe('MdSnackBar', () => {
      let snackBarRef = snackBar.open('Snack time!', 'CHEW');
      viewContainerFixture.detectChanges();
 
-     let messageElement = overlayContainerElement.querySelector('.mat-simple-snackbar-message');
-     expect(messageElement.textContent)
-         .toBe('Snack time!', 'Expected snack bar to show a message without a ViewContainerRef');
+     let messageElement = overlayContainerElement.querySelector('snack-bar-container');
+     expect(messageElement.textContent).toContain('Snack time!',
+         'Expected snack bar to show a message without a ViewContainerRef');
 
      snackBarRef.dismiss();
      viewContainerFixture.detectChanges();
@@ -95,10 +95,9 @@ describe('MdSnackBar', () => {
     expect(snackBarRef.instance.snackBarRef)
       .toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance');
 
-    let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message');
-    expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be <span>');
+    let messageElement = overlayContainerElement.querySelector('snack-bar-container');
     expect(messageElement.textContent)
-        .toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
+        .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
 
     let buttonElement = overlayContainerElement.querySelector('button.mat-simple-snackbar-action');
     expect(buttonElement.tagName)
@@ -120,10 +119,9 @@ describe('MdSnackBar', () => {
     expect(snackBarRef.instance.snackBarRef)
       .toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance');
 
-    let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message');
-    expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be <span>');
+    let messageElement = overlayContainerElement.querySelector('snack-bar-container');
     expect(messageElement.textContent)
-        .toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
+        .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
     expect(overlayContainerElement.querySelector('button.mat-simple-snackbar-action'))
         .toBeNull('Expected the query selection for action label to be null');
   });