feat(dialog): add hasBackdrop and backdropClass options to dialog config

Implement hasBackdrop as laid out in the MdDialog design document. Add backdropClass option to override default `cdk-overlay-dark-backdrop` class, allowing custom styling to be applied.

Closes #2806

Author: YeomansIII

src/demo-app/dialog/dialog-demo.html

@@ -43,6 +43,16 @@ <h2>Dialog position</h2>
       </md-input-container>
     </p>
 
+    <h2>Dialog backdrop</h2>
+
+    <p>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class">
+      </md-input-container>
+    </p>
+
+    <md-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</md-checkbox>
+
     <h2>Other options</h2>
 
     <p>

src/demo-app/dialog/dialog-demo.ts

@@ -15,6 +15,8 @@ export class DialogDemo {
   actionsAlignment: string;
   config: MdDialogConfig = {
     disableClose: false,
+    hasBackdrop: true,
+    backdropClass: '',
     width: '',
     height: '',
     position: {

src/lib/dialog/dialog-config.ts

@@ -27,6 +27,12 @@ export class MdDialogConfig {
   /** The ARIA role of the dialog element. */
   role?: DialogRole = 'dialog';
 
+  /** Whether the dialog has a backdrop. */
+  hasBackdrop?: boolean = true;
+
+  /** Custom class for the backdrop, */
+  backdropClass?: string = '';
+
   /** Whether the user can use escape or clicking outside to close a modal. */
   disableClose?: boolean = false;
 

src/lib/dialog/dialog.spec.ts

@@ -397,6 +397,54 @@ describe('MdDialog', () => {
     });
   });
 
+  describe('hasBackdrop option', () => {
+    it('should have a backdrop', () => {
+      dialog.open(PizzaMsg, {
+        hasBackdrop: true,
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
+    });
+
+    it('should not have a backdrop', () => {
+      dialog.open(PizzaMsg, {
+        hasBackdrop: false,
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy();
+    });
+  });
+
+  describe('backdropClass option', () => {
+    it('should have default backdrop class', () => {
+      dialog.open(PizzaMsg, {
+        backdropClass: '',
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-dark-backdrop')).toBeTruthy();
+    });
+
+    it('should have custom backdrop class', () => {
+      dialog.open(PizzaMsg, {
+        backdropClass: 'custom-backdrop-class',
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.custom-backdrop-class')).toBeTruthy();
+    });
+  });
+
   describe('focus management', () => {
 
     // When testing focus, all of the elements must be in the DOM.

src/lib/dialog/dialog.ts

@@ -108,7 +108,10 @@ export class MdDialog {
    */
   private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
     let overlayState = new OverlayState();
-    overlayState.hasBackdrop = true;
+    overlayState.hasBackdrop = dialogConfig.hasBackdrop;
+    if(dialogConfig.backdropClass) {
+      overlayState.backdropClass = dialogConfig.backdropClass;
+    }
     overlayState.positionStrategy = this._overlay.position().global();
 
     return overlayState;