feat(overlay): support setting multiple panel classes (#6326)

Allows for more than one class to be added via the `panelClass` option. Fixes #6318.
angular · Aug 7, 2017 · a190de7 · a190de7
1 parent 18c6689
commit a190de7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts
@@ -60,7 +60,12 @@ export class OverlayRef implements PortalHost {
     }
 
     if (this._state.panelClass) {
-      this._pane.classList.add(this._state.panelClass);
+      // We can't do a spread here, because IE doesn't support setting multiple classes.
+      if (Array.isArray(this._state.panelClass)) {
+        this._state.panelClass.forEach(cls => this._pane.classList.add(cls));
+      } else {
+        this._pane.classList.add(this._state.panelClass);
+      }
     }
 
     // Only emit the `attachments` event once all other setup is done.

diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts
@@ -24,7 +24,7 @@ export class OverlayState {
   scrollStrategy: ScrollStrategy = new NoopScrollStrategy();
 
   /** Custom class to add to the overlay pane. */
-  panelClass?: string = '';
+  panelClass?: string | string[] = '';
 
   /** Whether the overlay has a backdrop. */
   hasBackdrop?: boolean = false;

diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts
@@ -395,18 +395,29 @@ describe('Overlay', () => {
   });
 
   describe('panelClass', () => {
-    let config: OverlayState;
-    config = new OverlayState();
-    config.panelClass = 'custom-panel-class';
-
     it('should apply a custom overlay pane class', () => {
-      let overlayRef = overlay.create(config);
-      overlayRef.attach(componentPortal);
+      const config = new OverlayState();
+
+      config.panelClass = 'custom-panel-class';
+      overlay.create(config).attach(componentPortal);
       viewContainerFixture.detectChanges();
 
-      let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.classList).toContain('custom-panel-class');
     });
+
+    it('should be able to apply multiple classes', () => {
+      const config = new OverlayState();
+
+      config.panelClass = ['custom-class-one', 'custom-class-two'];
+      overlay.create(config).attach(componentPortal);
+      viewContainerFixture.detectChanges();
+
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+      expect(pane.classList).toContain('custom-class-one');
+      expect(pane.classList).toContain('custom-class-two');
+    });
   });
 
   describe('scroll strategy', () => {

diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
@@ -40,7 +40,7 @@ export class MdDialogConfig {
   role?: DialogRole = 'dialog';
 
   /** Custom class for the overlay pane. */
-  panelClass?: string = '';
+  panelClass?: string | string[] = '';
 
   /** Whether the dialog has a backdrop. */
   hasBackdrop?: boolean = true;