feat(snack-bar): set snack bar to be responsive. (#7485)

Author: josephperrott

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

@@ -33,7 +33,7 @@ export class SnackBarDemo {
     let config = new MatSnackBarConfig();
     config.verticalPosition = this.verticalPosition;
     config.horizontalPosition = this.horizontalPosition;
-    config.duration = this.autoHide;
+    config.duration = this.setAutoHide ? this.autoHide : 0;
     config.extraClasses = this.addExtraClass ? ['party'] : undefined;
     config.direction = this.dir.value;
     this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);

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

@@ -8,7 +8,7 @@ $mat-snack-bar-spacing-margin: 24px !default;
 
 .mat-snack-bar-container {
   border-radius: 2px;
-  box-sizing: content-box;
+  box-sizing: border-box;
   display: block;
   margin: $mat-snack-bar-spacing-margin;
   max-width: $mat-snack-bar-max-width;
@@ -44,3 +44,17 @@ $mat-snack-bar-spacing-margin: 24px !default;
     border: solid 1px;
   }
 }
+
+/**
+ * The mat-snack-bar-handset class will be applied to the overlay
+ * element causing styling to both it and the snack bar container.
+ */
+.mat-snack-bar-handset {
+  width: 100%;
+
+  .mat-snack-bar-container {
+    margin: 0;
+    max-width: inherit;
+    width: 100%;
+  }
+}

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

@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {LIVE_ANNOUNCER_PROVIDER} from '@angular/cdk/a11y';
+import {LayoutModule} from '@angular/cdk/layout';
 import {MatCommonModule} from '@angular/material/core';
 import {MatSnackBar} from './snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
@@ -23,6 +24,7 @@ import {SimpleSnackBar} from './simple-snack-bar';
     PortalModule,
     CommonModule,
     MatCommonModule,
+    LayoutModule,
   ],
   exports: [MatSnackBarContainer, MatCommonModule],
   declarations: [MatSnackBarContainer, SimpleSnackBar],

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

@@ -15,6 +15,8 @@ import {SimpleSnackBar} from './simple-snack-bar';
 import {MAT_SNACK_BAR_DATA, MatSnackBarConfig} from './snack-bar-config';
 import {MatSnackBarContainer} from './snack-bar-container';
 import {MatSnackBarRef} from './snack-bar-ref';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {RxChain, takeUntil, first} from '@angular/cdk/rxjs';
 
 
 /**
@@ -47,6 +49,7 @@ export class MatSnackBar {
       private _overlay: Overlay,
       private _live: LiveAnnouncer,
       private _injector: Injector,
+      private _breakpointObserver: BreakpointObserver,
       @Optional() @SkipSelf() private _parentSnackBar: MatSnackBar) {}
 
   /**
@@ -145,6 +148,19 @@ export class MatSnackBar {
     // We can't pass this via the injector, because the injector is created earlier.
     snackBarRef.instance = contentRef.instance;
 
+    // Subscribe to the breakpoint observer and attach the mat-snack-bar-handset class as
+    // appropriate. This class is applied to the overlay element because the overlay must expand to
+    // fill the width of the screen for full width snackbars.
+    RxChain.from(this._breakpointObserver.observe(Breakpoints.Handset))
+      .call(takeUntil, first.call(overlayRef.detachments()))
+      .subscribe(state => {
+        if (state.matches) {
+          overlayRef.overlayElement.classList.add('mat-snack-bar-handset');
+        } else {
+          overlayRef.overlayElement.classList.remove('mat-snack-bar-handset');
+        }
+      });
+
     return snackBarRef;
   }