fix(grid-list): hide overflow on tiles (#1299)

Author: kara

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

@@ -2,11 +2,13 @@ <h1>SnackBar demo</h1>
 <div>
   <div>Message: <md-input type="text" [(ngModel)]="message"></md-input></div>
   <div>
-    <md-checkbox [(ngModel)]="action">Show button</md-checkbox>
-    <md-input type="text" class="button-label-input"
-              placeholder="Snack bar action label"
-              [disabled]="!action"
-              [(ngModel)]="actionButtonLabel"></md-input>
+    <md-checkbox [(ngModel)]="action">
+      <p *ngIf="!action">Show button on snack bar</p>
+      <md-input type="text" class="button-label-input"
+                *ngIf="action"
+                placeholder="Snack bar action label"
+                [(ngModel)]="actionButtonLabel"></md-input>
+    </md-checkbox>
   </div>
 </div>
 

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

@@ -1,5 +1,5 @@
 import {Component, ViewContainerRef} from '@angular/core';
-import {MdSnackBar, MdSnackBarConfig} from '@angular2-material/snack-bar';
+import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
 
 @Component({
   moduleId: module.id,

src/lib/index.ts

@@ -18,6 +18,7 @@ export * from './select/index';
 export * from './sidenav/index';
 export * from './slider/index';
 export * from './slide-toggle/index';
+export * from './snack-bar/index';
 export * from './tabs/index';
 export * from './toolbar/index';
 export * from './tooltip/index';

src/lib/module.ts

@@ -23,7 +23,7 @@ import {MdIconModule} from './icon/index';
 import {MdProgressCircleModule} from './progress-circle/index';
 import {MdProgressBarModule} from './progress-bar/index';
 import {MdInputModule} from './input/index';
-import {MdSnackBarModule} from '@angular2-material/snack-bar';
+import {MdSnackBarModule} from './snack-bar/snack-bar';
 import {MdTabsModule} from './tabs/index';
 import {MdToolbarModule} from './toolbar/index';
 import {MdTooltipModule} from './tooltip/index';

src/lib/snack-bar/README.md

@@ -0,0 +1,38 @@
+# MdSnackBar
+`MdSnackBar` is a service, which opens snack bar notifications in the view.
+
+### Methods
+
+| Name |  Description |
+| --- | --- |
+| `open(message: string,<br>  actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef<SimpleSnackBar>` | Creates and opens a simple snack bar noticiation matching material spec. |
+| `openFromComponent(component: ComponentType<T>, config: MdSnackBarConfig): MdSnackBarRef<T>` | Creates and opens a snack bar noticiation with a custom component as content. |
+
+### Config
+
+| Key |  Description |
+| --- | --- |
+| `viewContainerRef: ViewContainerRef` | The view container ref to attach the snack bar to. |
+| `role: AriaLivePoliteness = 'assertive'` | The politeness level to announce the snack bar with. |
+| `announcementMessage: string` | The message to announce with the snack bar. |
+
+
+### Example
+The service can be injected in a component.
+```ts
+@Component({
+  selector: 'my-component'
+  providers: [MdSnackBar]
+})
+export class MyComponent {
+
+ constructor(snackBar: MdSnackBar
+             viewContainerRef: ViewContainerRef) {}
+
+ failedAttempt() {
+   config = new MdSnackBarConfig(this.viewContainerRef);
+   this.snackBar.open('It didn\'t quite work!', 'Try Again', config);
+ }
+
+}
+```

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

@@ -1,6 +1,6 @@
 md-simple-snackbar {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .md-simple-snackbar-message {

src/lib/snack-bar/package.json

@@ -1,20 +1,32 @@
 import {Component} from '@angular/core';
-import {BaseSnackBarContent} from './base-snack-bar';
+import {MdSnackBarRef} from './snack-bar-ref';
 
 
+/**
+ * A component used to open as the default snack bar, matching material spec.
+ * This should only be used internally by the snack bar service.
+ */
 @Component({
   moduleId: module.id,
   selector: 'simple-snack-bar',
   templateUrl: 'simple-snack-bar.html',
   styleUrls: ['simple-snack-bar.css'],
 })
-export class SimpleSnackBar extends BaseSnackBarContent<SimpleSnackBar> {
+export class SimpleSnackBar {
   /** The message to be shown in the snack bar. */
   message: string;
 
   /** The label for the button in the snack bar. */
   action: string;
 
+  /** The instance of the component making up the content of the snack bar. */
+  snackBarRef: MdSnackBarRef<SimpleSnackBar>;
+
+  /** Dismisses the snack bar. */
+  dismiss(): void {
+    this.snackBarRef.dismiss();
+  }
+
   /** If the action button should be shown. */
   get hasAction(): boolean { return !!this.action; }
 }

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

@@ -1,11 +1,13 @@
 import {ViewContainerRef} from '@angular/core';
+import {AriaLivePoliteness} from '../core';
 
 
-export type SnackBarRole = 'alert' | 'polite';
-
 export class MdSnackBarConfig {
-  /** The aria-role of the snack bar. */
-  role: SnackBarRole = 'alert';
+  /** The politeness level for the MdAriaLiveAnnouncer announcement. */
+  politeness: AriaLivePoliteness = 'assertive';
+
+  /** Message to be announced by the MdAriaLiveAnnouncer */
+  announcementMessage: string;
 
   /** The view container to place the overlay for the snack bar into. */
   viewContainerRef: ViewContainerRef;