From 5b7982f2784ae3816b50e81598a60294821e62d8 Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott.github@gmail.com>
Date: Fri, 6 Oct 2017 13:25:32 -0700
Subject: [PATCH] feat(snack-bar): set snack bar to be responsive. (#7485)

---
 src/demo-app/snack-bar/snack-bar-demo.ts   |  2 +-
 src/lib/snack-bar/snack-bar-container.scss | 16 +++++++++++++++-
 src/lib/snack-bar/snack-bar-module.ts      |  2 ++
 src/lib/snack-bar/snack-bar.ts             | 16 ++++++++++++++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts
index 94bffbcc0acf..91bc1aae67da 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.ts
+++ b/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);
diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss
index 1a4c966a3e5e..7a58a63c62dd 100644
--- a/src/lib/snack-bar/snack-bar-container.scss
+++ b/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%;
+  }
+}
diff --git a/src/lib/snack-bar/snack-bar-module.ts b/src/lib/snack-bar/snack-bar-module.ts
index 42bddfc1efc4..79cf441daa02 100644
--- a/src/lib/snack-bar/snack-bar-module.ts
+++ b/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],
diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts
index a2c875e519ae..44f19625f5ea 100644
--- a/src/lib/snack-bar/snack-bar.ts
+++ b/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;
   }