feat(overlay): add custom classes for backdrop (#1532)

Author: kara

src/demo-app/overlay/overlay-demo.html

@@ -25,3 +25,5 @@
 <template portal>
   <p class="demo-fusilli"> Fusilli </p>
 </template>
+
+<button (click)="openPanelWithBackdrop()">Backdrop panel</button>

src/demo-app/overlay/overlay-demo.ts

@@ -74,6 +74,21 @@ export class OverlayDemo {
     let overlayRef = this.overlay.create(config);
     overlayRef.attach(new ComponentPortal(SpagettiPanel, this.viewContainerRef));
   }
+
+  openPanelWithBackdrop() {
+    let config = new OverlayState();
+
+    config.positionStrategy = this.overlay.position()
+      .global()
+      .centerHorizontally();
+    config.hasBackdrop = true;
+    config.backdropClass = 'md-overlay-transparent-backdrop';
+
+    let overlayRef = this.overlay.create(config);
+    overlayRef.attach(this.templatePortals.first);
+    overlayRef.backdropClick().subscribe(() => overlayRef.detach());
+  }
+
 }
 
 /** Simple component to load into an overlay */

src/lib/core/overlay/overlay-ref.ts

@@ -62,6 +62,8 @@ export class OverlayRef implements PortalHost {
   private _attachBackdrop() {
     this._backdropElement = document.createElement('div');
     this._backdropElement.classList.add('md-overlay-backdrop');
+    this._backdropElement.classList.add(this._state.backdropClass);
+
     this._pane.parentElement.appendChild(this._backdropElement);
 
     // Forward backdrop clicks such that the consumer of the overlay can perform whatever
@@ -82,6 +84,7 @@ export class OverlayRef implements PortalHost {
 
     if (backdropToDetach) {
       backdropToDetach.classList.remove('md-overlay-backdrop-showing');
+      backdropToDetach.classList.remove(this._state.backdropClass);
       backdropToDetach.addEventListener('transitionend', () => {
         backdropToDetach.parentNode.removeChild(backdropToDetach);
 

src/lib/core/overlay/overlay-state.ts

@@ -12,6 +12,8 @@ export class OverlayState {
   /** Whether the overlay has a backdrop. */
   hasBackdrop: boolean = false;
 
+  backdropClass: string = 'md-overlay-dark-backdrop';
+
   // TODO(jelbourn): configuration still to add
   // - overlay size
   // - focus trap

src/lib/core/overlay/overlay.scss

@@ -4,7 +4,7 @@
 
 
 @mixin md-overlay() {
-  $md-backdrop-color: md-color($md-grey, 900);
+  $md-dark-backdrop-color: md-color($md-grey, 900);
 
   // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit.
 
@@ -45,11 +45,18 @@
     // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark
     // themes here. Currently using the values from Angular Material 1.
     transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
-    background: $md-backdrop-color;
     opacity: 0;
   }
 
   .md-overlay-backdrop.md-overlay-backdrop-showing {
     opacity: 0.48;
   }
+
+  .md-overlay-dark-backdrop {
+    background: $md-dark-backdrop-color;
+  }
+
+  .md-overlay-transparent-backdrop {
+    background: none;
+  }
 }

src/lib/core/overlay/overlay.spec.ts

@@ -99,24 +99,49 @@ describe('Overlay', () => {
   });
 
   describe('backdrop', () => {
-    it('should create and destroy an overlay backdrop', () => {
-      let config = new OverlayState();
+    let config: OverlayState;
+
+    beforeEach(() => {
+      config = new OverlayState();
       config.hasBackdrop = true;
+    });
 
+    it('should create and destroy an overlay backdrop', () => {
       let overlayRef = overlay.create(config);
       overlayRef.attach(componentPortal);
 
       viewContainerFixture.detectChanges();
       let backdrop = <HTMLElement> overlayContainerElement.querySelector('.md-overlay-backdrop');
       expect(backdrop).toBeTruthy();
-      expect(backdrop.classList).not.toContain('.md-overlay-backdrop-showing');
+      expect(backdrop.classList).not.toContain('md-overlay-backdrop-showing');
 
       let backdropClickHandler = jasmine.createSpy('backdropClickHander');
       overlayRef.backdropClick().subscribe(backdropClickHandler);
 
       backdrop.click();
       expect(backdropClickHandler).toHaveBeenCalled();
     });
+
+    it('should apply the default overlay backdrop class', () => {
+      let overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+      viewContainerFixture.detectChanges();
+
+      let backdrop = <HTMLElement> overlayContainerElement.querySelector('.md-overlay-backdrop');
+      expect(backdrop.classList).toContain('md-overlay-dark-backdrop');
+    });
+
+    it('should apply a custom overlay backdrop class', () => {
+      config.backdropClass = 'md-overlay-transparent-backdrop';
+
+      let overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+      viewContainerFixture.detectChanges();
+
+      let backdrop = <HTMLElement> overlayContainerElement.querySelector('.md-overlay-backdrop');
+      expect(backdrop.classList).toContain('md-overlay-transparent-backdrop');
+    });
+
   });
 });