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

@@ -36,6 +36,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

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

src/lib/dialog/README.md

@@ -14,6 +14,8 @@ MdDialog is a service, which opens dialogs components in the view.
 | Key | Description  |
 | --- | ------------ |
 | `role: DialogRole = 'dialog'` | The ARIA role of the dialog element. Possible values are `dialog` and `alertdialog`. Optional. |
+| `hasBackdrop: boolean = true` | Whether the dialog has a backdrop. Optional. |
+| `backdropClass: string = ''` | A custom CSS class to apply to the backdrop to replace the default dark backdrop class. Optional. |
 | `disableClose: boolean = false` | Whether to prevent the user from closing a dialog by clicking on the backdrop or pressing escape. Optional. |
 | `width: string = ''` | Width of the dialog. Takes any valid CSS value. Optional. |
 | `height: string = ''` | Height of the dialog. Takes any valid CSS value. Optional. |

src/lib/dialog/dialog-config.ts

@@ -21,6 +21,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

@@ -275,6 +275,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

@@ -140,7 +140,10 @@ export class MdDialog {
     let strategy = this._overlay.position().global();
     let position = dialogConfig.position;
 
-    state.hasBackdrop = true;
+    state.hasBackdrop = dialogConfig.hasBackdrop;
+    if(dialogConfig.backdropClass && dialogConfig.backdropClass !== '') {
+      state.backdropClass = dialogConfig.backdropClass;
+    }
     state.positionStrategy = strategy;
 
     if (position && (position.left || position.right)) {