From 753e97691c6422b12404a69d67096911defca5da Mon Sep 17 00:00:00 2001
From: Austin <amcdaniel2@gmail.com>
Date: Thu, 26 Oct 2017 14:27:35 -0500
Subject: [PATCH] fix(overlay): overlay class audits #6372

---
 src/demo-app/snack-bar/snack-bar-demo.ts   |  2 +-
 src/lib/datepicker/datepicker-content.html |  1 +
 src/lib/datepicker/datepicker.ts           |  3 +++
 src/lib/menu/menu-directive.ts             | 11 ++++++++++-
 src/lib/snack-bar/snack-bar-config.ts      |  8 +++++++-
 src/lib/snack-bar/snack-bar-container.ts   |  4 ++--
 src/lib/snack-bar/snack-bar.spec.ts        |  2 +-
 7 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts
index 91bc1aae67da..6b1160720fc2 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.ts
+++ b/src/demo-app/snack-bar/snack-bar-demo.ts
@@ -34,7 +34,7 @@ export class SnackBarDemo {
     config.verticalPosition = this.verticalPosition;
     config.horizontalPosition = this.horizontalPosition;
     config.duration = this.setAutoHide ? this.autoHide : 0;
-    config.extraClasses = this.addExtraClass ? ['party'] : undefined;
+    config.panelClass = 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/datepicker/datepicker-content.html b/src/lib/datepicker/datepicker-content.html
index ec6461ce7484..60c0cc747809 100644
--- a/src/lib/datepicker/datepicker-content.html
+++ b/src/lib/datepicker/datepicker-content.html
@@ -1,5 +1,6 @@
 <mat-calendar cdkTrapFocus
     [id]="datepicker.id"
+    [ngClass]="datepicker.panelClass"
     [startAt]="datepicker.startAt"
     [startView]="datepicker.startView"
     [minDate]="datepicker._minDate"
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 5663e0526202..c81ff89a5645 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -167,6 +167,9 @@ export class MatDatepicker<D> implements OnDestroy {
    */
   @Output() selectedChanged = new EventEmitter<D>();
 
+  /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */
+  @Input() panelClass: string|string[]|Set<string>|{[key: string]: any};
+
   /** Whether the calendar is open. */
   opened = false;
 
diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index b7d2fbd29b65..7a68a7ba20a8 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -129,7 +129,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
    * @param classes list of class names
    */
   @Input('class')
-  set classList(classes: string) {
+  set panelClass(classes: string) {
     if (classes && classes.length) {
       this._classList = classes.split(' ').reduce((obj: any, className: string) => {
         obj[className] = true;
@@ -141,6 +141,15 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
     }
   }
 
+  /**
+   * This method takes classes set on the host mat-menu element and applies them on the
+   * menu template that displays in the overlay container.  Otherwise, it's difficult
+   * to style the containing menu from outside the component.
+   * @deprecated Use `panelClass` instead.
+   * @param classes list of class names
+   */
+  @Input() classList = this.panelClass;
+
   /** Event emitted when the menu is closed. */
   @Output() close = new EventEmitter<void | 'click' | 'keydown'>();
 
diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts
index 67eabd078b51..616601b642ae 100644
--- a/src/lib/snack-bar/snack-bar-config.ts
+++ b/src/lib/snack-bar/snack-bar-config.ts
@@ -35,7 +35,13 @@ export class MatSnackBarConfig {
   duration?: number = 0;
 
   /** Extra CSS classes to be added to the snack bar container. */
-  extraClasses?: string[];
+  panelClass?: string[];
+
+  /**
+   * Extra CSS classes to be added to the snack bar container.
+   * @deprecated Use `panelClass` instead.
+   */
+ extraClasses?: string[] = this.panelClass;
 
   /** Text layout direction for the snack bar. */
   direction?: Direction = 'ltr';
diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts
index 0e355b3887e2..1b6b166fb465 100644
--- a/src/lib/snack-bar/snack-bar-container.ts
+++ b/src/lib/snack-bar/snack-bar-container.ts
@@ -104,10 +104,10 @@ export class MatSnackBarContainer extends BasePortalHost implements OnDestroy {
       throw Error('Attempting to attach snack bar content after content is already attached');
     }
 
-    if (this.snackBarConfig.extraClasses) {
+    if (this.snackBarConfig.panelClass) {
       // Not the most efficient way of adding classes, but the renderer doesn't allow us
       // to pass in an array or a space-separated list.
-      for (let cssClass of this.snackBarConfig.extraClasses) {
+      for (let cssClass of this.snackBarConfig.panelClass) {
         this._renderer.addClass(this._elementRef.nativeElement, cssClass);
       }
     }
diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts
index 6041b9c28ea5..8459ee0c46f2 100644
--- a/src/lib/snack-bar/snack-bar.spec.ts
+++ b/src/lib/snack-bar/snack-bar.spec.ts
@@ -363,7 +363,7 @@ describe('MatSnackBar', () => {
   }));
 
   it('should add extra classes to the container', () => {
-    snackBar.open(simpleMessage, simpleActionLabel, { extraClasses: ['one', 'two'] });
+    snackBar.open(simpleMessage, simpleActionLabel, { panelClass: ['one', 'two'] });
     viewContainerFixture.detectChanges();
 
     let containerClasses = overlayContainerElement.querySelector('snack-bar-container')!.classList;