fix(overlay): overlay class audits #6372

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);
   }

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"

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[];
+
   /** Whether the calendar is open. */
   opened = false;
 

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,16 @@ 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.
+   */
+  @Input()
+  set classList(classes: string) { this.panelClass = classes; }
+  get classList(): string { return this.panelClass; }
+
   /** Event emitted when the menu is closed. */
   @Output() close = new EventEmitter<void | 'click' | 'keydown'>();
 

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 | string[];
+
+  /**
+   * Extra CSS classes to be added to the snack bar container.
+   * @deprecated Use `panelClass` instead.
+   */
+ extraClasses?: string | string[];
 
   /** Text layout direction for the snack bar. */
   direction?: Direction = 'ltr';

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

@@ -104,10 +104,14 @@ 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 || this.snackBarConfig.extraClasses) {
+      const classes = [
+        ...this._getCssClasses(this.snackBarConfig.panelClass),
+        ...this._getCssClasses(this.snackBarConfig.extraClasses)
+      ];
       // 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 classes) {
         this._renderer.addClass(this._elementRef.nativeElement, cssClass);
       }
     }
@@ -178,4 +182,16 @@ export class MatSnackBarContainer extends BasePortalHost implements OnDestroy {
       this._onExit.complete();
     });
   }
+
+  /** Convert the class list to a array of classes it can apply to the dom */
+  private _getCssClasses(classList: undefined | string | string[]) {
+    if (classList) {
+      if (Array.isArray(classList)) {
+        return classList;
+      } else {
+        return [classList];
+      }
+    }
+    return [];
+  }
 }

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;