Skip to content

Commit 7428c49

Browse files
YeomansIIImmalerba
authored andcommitted
feat(dialog): add hasBackdrop and backdropClass options to dialog config (#2822)
* 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 * rebase master and fix conflicts
1 parent d19d43a commit 7428c49

File tree

5 files changed

+70
-1
lines changed

5 files changed

+70
-1
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,16 @@ <h2>Dialog position</h2>
4343
</md-input-container>
4444
</p>
4545

46+
<h2>Dialog backdrop</h2>
47+
48+
<p>
49+
<md-input-container>
50+
<input mdInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class">
51+
</md-input-container>
52+
</p>
53+
54+
<md-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</md-checkbox>
55+
4656
<h2>Other options</h2>
4757

4858
<p>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export class DialogDemo {
1515
actionsAlignment: string;
1616
config: MdDialogConfig = {
1717
disableClose: false,
18+
hasBackdrop: true,
19+
backdropClass: '',
1820
width: '',
1921
height: '',
2022
position: {

src/lib/dialog/dialog-config.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export class MdDialogConfig {
2727
/** The ARIA role of the dialog element. */
2828
role?: DialogRole = 'dialog';
2929

30+
/** Whether the dialog has a backdrop. */
31+
hasBackdrop?: boolean = true;
32+
33+
/** Custom class for the backdrop, */
34+
backdropClass?: string = '';
35+
3036
/** Whether the user can use escape or clicking outside to close a modal. */
3137
disableClose?: boolean = false;
3238

src/lib/dialog/dialog.spec.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,54 @@ describe('MdDialog', () => {
398398
});
399399
});
400400

401+
describe('hasBackdrop option', () => {
402+
it('should have a backdrop', () => {
403+
dialog.open(PizzaMsg, {
404+
hasBackdrop: true,
405+
viewContainerRef: testViewContainerRef
406+
});
407+
408+
viewContainerFixture.detectChanges();
409+
410+
expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
411+
});
412+
413+
it('should not have a backdrop', () => {
414+
dialog.open(PizzaMsg, {
415+
hasBackdrop: false,
416+
viewContainerRef: testViewContainerRef
417+
});
418+
419+
viewContainerFixture.detectChanges();
420+
421+
expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy();
422+
});
423+
});
424+
425+
describe('backdropClass option', () => {
426+
it('should have default backdrop class', () => {
427+
dialog.open(PizzaMsg, {
428+
backdropClass: '',
429+
viewContainerRef: testViewContainerRef
430+
});
431+
432+
viewContainerFixture.detectChanges();
433+
434+
expect(overlayContainerElement.querySelector('.cdk-overlay-dark-backdrop')).toBeTruthy();
435+
});
436+
437+
it('should have custom backdrop class', () => {
438+
dialog.open(PizzaMsg, {
439+
backdropClass: 'custom-backdrop-class',
440+
viewContainerRef: testViewContainerRef
441+
});
442+
443+
viewContainerFixture.detectChanges();
444+
445+
expect(overlayContainerElement.querySelector('.custom-backdrop-class')).toBeTruthy();
446+
});
447+
});
448+
401449
describe('focus management', () => {
402450

403451
// When testing focus, all of the elements must be in the DOM.

src/lib/dialog/dialog.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,10 @@ export class MdDialog {
108108
*/
109109
private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
110110
let overlayState = new OverlayState();
111-
overlayState.hasBackdrop = true;
111+
overlayState.hasBackdrop = dialogConfig.hasBackdrop;
112+
if (dialogConfig.backdropClass) {
113+
overlayState.backdropClass = dialogConfig.backdropClass;
114+
}
112115
overlayState.positionStrategy = this._overlay.position().global();
113116

114117
return overlayState;

0 commit comments

Comments
 (0)