Skip to content

Commit cb78009

Browse files
mmalerbammalerba
authored
docs(material/dialog): update examples to use MDC-based dialog (#25560)
1 parent 742d858 commit cb78009

24 files changed

+248
-252
lines changed

‎.github/CODEOWNERS

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,10 @@
184184
/src/dev-app/input/** @devversion @mmalerba
185185
/src/dev-app/layout/** @andrewseguin
186186
/src/dev-app/legacy-card/** @mmalerba
187+
/src/dev-app/legacy-checkbox/** @mmalerba
188+
/src/dev-app/legacy-dialog/** @devversion
187189
/src/dev-app/legacy-input/** @mmalerba
190+
/src/dev-app/legacy-list/** @mmalerba
188191
/src/dev-app/legacy-paginator/** @crisbeto
189192
/src/dev-app/legacy-select/** @crisbeto
190193
/src/dev-app/legacy-snack-bar/** @andrewseguin
@@ -194,10 +197,7 @@
194197
/src/dev-app/live-announcer/** @jelbourn
195198
/src/dev-app/mdc-autocomplete/** @crisbeto
196199
/src/dev-app/mdc-button/** @andrewseguin
197-
/src/dev-app/legacy-checkbox/** @mmalerba
198200
/src/dev-app/mdc-chips/** @mmalerba
199-
/src/dev-app/mdc-dialog/** @devversion
200-
/src/dev-app/legacy-list/** @mmalerba
201201
/src/dev-app/mdc-menu/** @crisbeto
202202
/src/dev-app/mdc-progress-bar/** @crisbeto
203203
/src/dev-app/mdc-progress-spinner/** @mmalerba

‎src/components-examples/material/dialog/BUILD.bazel

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18-
"//src/material/legacy-button",
19-
"//src/material/legacy-dialog",
20-
"//src/material/legacy-dialog/testing",
21-
"//src/material/legacy-input",
22-
"//src/material/legacy-menu",
18+
"//src/material/button",
19+
"//src/material/dialog",
20+
"//src/material/dialog/testing",
21+
"//src/material/input",
22+
"//src/material/menu",
2323
"@npm//@angular/forms",
2424
"@npm//@angular/platform-browser",
2525
"@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
4343
":dialog",
4444
"//src/cdk/testing",
4545
"//src/cdk/testing/testbed",
46-
"//src/material/legacy-dialog",
47-
"//src/material/legacy-dialog/testing",
46+
"//src/material/dialog",
47+
"//src/material/dialog/testing",
4848
"@npm//@angular/platform-browser",
4949
"@npm//@angular/platform-browser-dynamic",
5050
],

‎src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {MatLegacyDialog, MatLegacyDialogRef} from '@angular/material/legacy-dialog';
2+
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
33

44
/**
55
* @title Dialog Animations
@@ -10,7 +10,7 @@ import {MatLegacyDialog, MatLegacyDialogRef} from '@angular/material/legacy-dial
1010
templateUrl: 'dialog-animations-example.html',
1111
})
1212
export class DialogAnimationsExample {
13-
constructor(public dialog: MatLegacyDialog) {}
13+
constructor(public dialog: MatDialog) {}
1414

1515
openDialog(enterAnimationDuration: string, exitAnimationDuration: string): void {
1616
this.dialog.open(DialogAnimationsExampleDialog, {
@@ -26,5 +26,5 @@ export class DialogAnimationsExample {
2626
templateUrl: 'dialog-animations-example-dialog.html',
2727
})
2828
export class DialogAnimationsExampleDialog {
29-
constructor(public dialogRef: MatLegacyDialogRef<DialogAnimationsExampleDialog>) {}
29+
constructor(public dialogRef: MatDialogRef<DialogAnimationsExampleDialog>) {}
3030
}

‎src/components-examples/material/dialog/dialog-content/dialog-content-example.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {MatLegacyDialog} from '@angular/material/legacy-dialog';
2+
import {MatDialog} from '@angular/material/dialog';
33

44
/**
55
* @title Dialog with header, scrollable content and actions
@@ -9,7 +9,7 @@ import {MatLegacyDialog} from '@angular/material/legacy-dialog';
99
templateUrl: 'dialog-content-example.html',
1010
})
1111
export class DialogContentExample {
12-
constructor(public dialog: MatLegacyDialog) {}
12+
constructor(public dialog: MatDialog) {}
1313

1414
openDialog() {
1515
const dialogRef = this.dialog.open(DialogContentExampleDialog);

‎src/components-examples/material/dialog/dialog-data/dialog-data-example.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, Inject} from '@angular/core';
2-
import {MatLegacyDialog, MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
2+
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
33

44
export interface DialogData {
55
animal: 'panda' | 'unicorn' | 'lion';
@@ -13,7 +13,7 @@ export interface DialogData {
1313
templateUrl: 'dialog-data-example.html',
1414
})
1515
export class DialogDataExample {
16-
constructor(public dialog: MatLegacyDialog) {}
16+
constructor(public dialog: MatDialog) {}
1717

1818
openDialog() {
1919
this.dialog.open(DialogDataExampleDialog, {
@@ -29,5 +29,5 @@ export class DialogDataExample {
2929
templateUrl: 'dialog-data-example-dialog.html',
3030
})
3131
export class DialogDataExampleDialog {
32-
constructor(@Inject(MAT_LEGACY_DIALOG_DATA) public data: DialogData) {}
32+
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
3333
}

‎src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {MatLegacyDialog} from '@angular/material/legacy-dialog';
2+
import {MatDialog} from '@angular/material/dialog';
33

44
/**
55
* @title Dialog elements
@@ -9,7 +9,7 @@ import {MatLegacyDialog} from '@angular/material/legacy-dialog';
99
templateUrl: 'dialog-elements-example.html',
1010
})
1111
export class DialogElementsExample {
12-
constructor(public dialog: MatLegacyDialog) {}
12+
constructor(public dialog: MatDialog) {}
1313

1414
openDialog() {
1515
this.dialog.open(DialogElementsExampleDialog);

‎src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component, ViewChild} from '@angular/core';
2-
import {MatLegacyDialog} from '@angular/material/legacy-dialog';
3-
import {MatLegacyMenuTrigger} from '@angular/material/legacy-menu';
2+
import {MatDialog} from '@angular/material/dialog';
3+
import {MatMenuTrigger} from '@angular/material/menu';
44
/**
55
* @title Dialog launched from a menu
66
*/
@@ -9,9 +9,9 @@ import {MatLegacyMenuTrigger} from '@angular/material/legacy-menu';
99
templateUrl: 'dialog-from-menu-example.html',
1010
})
1111
export class DialogFromMenuExample {
12-
@ViewChild('menuTrigger') menuTrigger: MatLegacyMenuTrigger;
12+
@ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
1313

14-
constructor(public dialog: MatLegacyDialog) {}
14+
constructor(public dialog: MatDialog) {}
1515

1616
openDialog() {
1717
// #docregion focus-restoration

‎src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatLegacyDialogHarness} from '@angular/material/legacy-dialog/testing';
3+
import {MatDialogHarness} from '@angular/material/dialog/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
5+
import {MatDialogModule} from '@angular/material/dialog';
66
import {DialogHarnessExample} from './dialog-harness-example';
77
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
88

@@ -12,7 +12,7 @@ describe('DialogHarnessExample', () => {
1212

1313
beforeEach(waitForAsync(async () => {
1414
await TestBed.configureTestingModule({
15-
imports: [MatLegacyDialogModule, NoopAnimationsModule],
15+
imports: [MatDialogModule, NoopAnimationsModule],
1616
declarations: [DialogHarnessExample],
1717
}).compileComponents();
1818
fixture = TestBed.createComponent(DialogHarnessExample);
@@ -22,42 +22,42 @@ describe('DialogHarnessExample', () => {
2222

2323
it('should load harness for dialog', async () => {
2424
fixture.componentInstance.open();
25-
const dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
25+
const dialogs = await loader.getAllHarnesses(MatDialogHarness);
2626
expect(dialogs.length).toBe(1);
2727
});
2828

2929
it('should load harness for dialog with specific id', async () => {
3030
fixture.componentInstance.open({id: 'my-dialog'});
3131
fixture.componentInstance.open({id: 'other'});
32-
let dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
32+
let dialogs = await loader.getAllHarnesses(MatDialogHarness);
3333
expect(dialogs.length).toBe(2);
3434

35-
dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness.with({selector: '#my-dialog'}));
35+
dialogs = await loader.getAllHarnesses(MatDialogHarness.with({selector: '#my-dialog'}));
3636
expect(dialogs.length).toBe(1);
3737
});
3838

3939
it('should be able to get role of dialog', async () => {
4040
fixture.componentInstance.open({role: 'alertdialog'});
4141
fixture.componentInstance.open({role: 'dialog'});
42-
const dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
42+
const dialogs = await loader.getAllHarnesses(MatDialogHarness);
4343
expect(await dialogs[0].getRole()).toBe('alertdialog');
4444
expect(await dialogs[1].getRole()).toBe('dialog');
4545
});
4646

4747
it('should be able to close dialog', async () => {
4848
fixture.componentInstance.open({disableClose: true});
4949
fixture.componentInstance.open();
50-
let dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
50+
let dialogs = await loader.getAllHarnesses(MatDialogHarness);
5151

5252
expect(dialogs.length).toBe(2);
5353
await dialogs[0].close();
5454

55-
dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
55+
dialogs = await loader.getAllHarnesses(MatDialogHarness);
5656
expect(dialogs.length).toBe(1);
5757

5858
// should be a noop since "disableClose" is set to "true".
5959
await dialogs[0].close();
60-
dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
60+
dialogs = await loader.getAllHarnesses(MatDialogHarness);
6161
expect(dialogs.length).toBe(1);
6262
});
6363
});

‎src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, TemplateRef, ViewChild} from '@angular/core';
2-
import {MatLegacyDialog, MatLegacyDialogConfig} from '@angular/material/legacy-dialog';
2+
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
33

44
/**
55
* @title Testing with MatDialogHarness
@@ -11,9 +11,9 @@ import {MatLegacyDialog, MatLegacyDialogConfig} from '@angular/material/legacy-d
1111
export class DialogHarnessExample {
1212
@ViewChild(TemplateRef) dialogTemplate: TemplateRef<any>;
1313

14-
constructor(readonly dialog: MatLegacyDialog) {}
14+
constructor(readonly dialog: MatDialog) {}
1515

16-
open(config?: MatLegacyDialogConfig) {
16+
open(config?: MatDialogConfig) {
1717
return this.dialog.open(this.dialogTemplate, config);
1818
}
1919
}

‎src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import {Component, Inject} from '@angular/core';
2-
import {
3-
MatLegacyDialog,
4-
MAT_LEGACY_DIALOG_DATA,
5-
MatLegacyDialogRef,
6-
} from '@angular/material/legacy-dialog';
2+
import {MatDialog, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
73

84
export interface DialogData {
95
animal: string;
@@ -21,7 +17,7 @@ export class DialogOverviewExample {
2117
animal: string;
2218
name: string;
2319

24-
constructor(public dialog: MatLegacyDialog) {}
20+
constructor(public dialog: MatDialog) {}
2521

2622
openDialog(): void {
2723
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
@@ -42,8 +38,8 @@ export class DialogOverviewExample {
4238
})
4339
export class DialogOverviewExampleDialog {
4440
constructor(
45-
public dialogRef: MatLegacyDialogRef<DialogOverviewExampleDialog>,
46-
@Inject(MAT_LEGACY_DIALOG_DATA) public data: DialogData,
41+
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
42+
@Inject(MAT_DIALOG_DATA) public data: DialogData,
4743
) {}
4844

4945
onNoClick(): void {

‎src/components-examples/material/dialog/index.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {FormsModule} from '@angular/forms';
4-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
5-
import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
6-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
7-
import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
4+
import {MatButtonModule} from '@angular/material/button';
5+
import {MatDialogModule} from '@angular/material/dialog';
6+
import {MatInputModule} from '@angular/material/input';
7+
import {MatMenuModule} from '@angular/material/menu';
88
import {
99
DialogContentExample,
1010
DialogContentExampleDialog,
@@ -63,10 +63,10 @@ const EXAMPLES = [
6363
@NgModule({
6464
imports: [
6565
CommonModule,
66-
MatLegacyButtonModule,
67-
MatLegacyDialogModule,
68-
MatLegacyInputModule,
69-
MatLegacyMenuModule,
66+
MatButtonModule,
67+
MatDialogModule,
68+
MatInputModule,
69+
MatMenuModule,
7070
FormsModule,
7171
],
7272
declarations: EXAMPLES,

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ ng_module(
4949
"//src/dev-app/layout",
5050
"//src/dev-app/legacy-card",
5151
"//src/dev-app/legacy-checkbox",
52+
"//src/dev-app/legacy-dialog",
5253
"//src/dev-app/legacy-input",
5354
"//src/dev-app/legacy-list",
5455
"//src/dev-app/legacy-paginator",
@@ -61,7 +62,6 @@ ng_module(
6162
"//src/dev-app/mdc-autocomplete",
6263
"//src/dev-app/mdc-button",
6364
"//src/dev-app/mdc-chips",
64-
"//src/dev-app/mdc-dialog",
6565
"//src/dev-app/mdc-menu",
6666
"//src/dev-app/mdc-progress-bar",
6767
"//src/dev-app/mdc-progress-spinner",

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ export class DevAppLayout {
106106
{name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
107107
{name: 'MDC Button', route: '/mdc-button'},
108108
{name: 'MDC Chips', route: '/mdc-chips'},
109-
{name: 'MDC Dialog', route: '/mdc-dialog'},
110109
{name: 'MDC Menu', route: '/mdc-menu'},
111110
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
112111
{name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
@@ -116,6 +115,7 @@ export class DevAppLayout {
116115
{name: 'MDC Tabs', route: '/mdc-tabs'},
117116
{name: 'Legacy Card', route: '/legacy-card'},
118117
{name: 'Legacy Checkbox', route: '/legacy-checkbox'},
118+
{name: 'Legacy Dialog', route: '/legacy-dialog'},
119119
{name: 'Legacy Input', route: '/legacy-input'},
120120
{name: 'Legacy List', route: '/legacy-list'},
121121
{name: 'Legacy Paginator', route: '/legacy-paginator'},

‎src/dev-app/dialog/BUILD.bazel

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,18 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/cdk/drag-drop",
14-
"//src/material/legacy-button",
15-
"//src/material/legacy-card",
16-
"//src/material/legacy-checkbox",
17-
"//src/material/legacy-dialog",
18-
"//src/material/legacy-form-field",
19-
"//src/material/legacy-input",
20-
"//src/material/legacy-select",
14+
"//src/material/button",
15+
"//src/material/card",
16+
"//src/material/checkbox",
17+
"//src/material/dialog",
18+
"//src/material/form-field",
19+
"//src/material/input",
20+
"//src/material/select",
2121
],
2222
)
2323

2424
sass_binary(
2525
name = "dialog_demo_scss",
2626
src = "dialog-demo.scss",
27+
deps = ["//src/material-experimental:sass_lib"],
2728
)

0 commit comments

Comments
 (0)