feat(material/dialog): Switch dialog implementation to use MDC (#25352)

* feat(material/dialog): Switch dialog implementation to use MDC Old implementation is still available under @angular/material/legacy-dialog BREAKING CHANGE: - DOM and CSS classes for mat-dialog have changes - Typescript API is largely the same but may have minor differences - See the MDC migration guide for more information about the changes and how to migrate your app (TODO: link when available) * fixup! feat(material/dialog): Switch dialog implementation to use MDC
angular · Aug 4, 2022 · 439852b · 439852b
1 parent 3041cda
commit 439852b
Show file tree

Hide file tree

Showing 114 changed files with 2,113 additions and 1,657 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -9,7 +9,7 @@
 /src/material/legacy-checkbox/**                          @andrewseguin @devversion
 /src/material/chips/**                             @andrewseguin
 /src/material/datepicker/**                        @mmalerba @crisbeto @zarend
-/src/material/dialog/**                            @andrewseguin @crisbeto
+/src/material/legacy-dialog/**                            @andrewseguin @crisbeto
 /src/material/divider/**                           @andrewseguin @crisbeto
 /src/material/expansion/**                         @andrewseguin
 /src/material/legacy-form-field/**                 @mmalerba
@@ -116,7 +116,7 @@
 /src/material/checkbox/**             @mmalerba
 /src/material-experimental/mdc-chips/**                @mmalerba
 /src/material-experimental/mdc-core/**                 @crisbeto
-/src/material-experimental/mdc-dialog/**               @devversion
+/src/material/dialog/**               @devversion
 /src/material/form-field/**                            @devversion @mmalerba
 /src/material-experimental/mdc-list/**                 @mmalerba @devversion
 /src/material-experimental/mdc-menu/**                 @crisbeto
@@ -326,7 +326,7 @@
 /tools/public_api_guard/material/chips/testing**   @andrewseguin
 /tools/public_api_guard/material/core**            @andrewseguin
 /tools/public_api_guard/material/datepicker**      @mmalerba @crisbeto @zarend
-/tools/public_api_guard/material/dialog**          @andrewseguin @crisbeto
+/tools/public_api_guard/material/legacy-dialog**          @andrewseguin @crisbeto
 /tools/public_api_guard/material/divider**         @andrewseguin @crisbeto
 /tools/public_api_guard/material/expansion**       @andrewseguin
 /tools/public_api_guard/material/form-field**      @mmalerba

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -45,7 +45,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/checkbox',
     'material-experimental/mdc-chips',
     'material-experimental/mdc-core',
-    'material-experimental/mdc-dialog',
+    'material/dialog',
     'material/form-field',
     'material/input',
     'material-experimental/mdc-list',
@@ -79,7 +79,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/core',
     'material/legacy-core',
     'material/datepicker',
-    'material/dialog',
+    'material/legacy-dialog',
     'material/divider',
     'material/expansion',
     'material/form-field',

diff --git a/CHANGELOG_ARCHIVE.md b/CHANGELOG_ARCHIVE.md
@@ -1640,7 +1640,7 @@ We expect to have the tool ready when we release version 6.0.0.
 * **menu:** not closing when overlay is detached externally ([#8868](https://github.com/angular/material2/issues/8868)) ([534c797](https://github.com/angular/material2/commit/534c797))
 * **overlay:** export OverlaySizeConfig ([#8932](https://github.com/angular/material2/issues/8932)) ([adfa31e](https://github.com/angular/material2/commit/adfa31e))
 * **paginator:** set default display value ([#8455](https://github.com/angular/material2/issues/8455)) ([ccb325e](https://github.com/angular/material2/commit/ccb325e)), closes [#8454](https://github.com/angular/material2/issues/8454)
-* **portal:** inaccurate hasAttahed result and portal being cleared if attached too early ([#8642](https://github.com/angular/material2/issues/8642)) ([93e6c53](https://github.com/angular/material2/commit/93e6c53)), closes [/github.com/angular/material2/blob/main/src/material/dialog/dialog-container.ts#L118](https://github.com//github.com/angular/material2/blob/main/src/material/dialog/dialog-container.ts/issues/L118) [#8628](https://github.com/angular/material2/issues/8628)
+* **portal:** inaccurate hasAttahed result and portal being cleared if attached too early ([#8642](https://github.com/angular/material2/issues/8642)) ([93e6c53](https://github.com/angular/material2/commit/93e6c53)), closes [/github.com/angular/material2/blob/main/src/material/legacy-dialog/dialog-container.ts#L118](https://github.com//github.com/angular/material2/blob/main/src/material/legacy-dialog/dialog-container.ts/issues/L118) [#8628](https://github.com/angular/material2/issues/8628)
 * **select:** alt + arrow key not opening in single-selection mode ([#8910](https://github.com/angular/material2/issues/8910)) ([85f83f9](https://github.com/angular/material2/commit/85f83f9))
 * **select:** change event emitted before data binding is updated ([#8740](https://github.com/angular/material2/issues/8740)) ([2493797](https://github.com/angular/material2/commit/2493797)), closes [#8739](https://github.com/angular/material2/issues/8739)
 * **select:** complete state change event ([#8777](https://github.com/angular/material2/issues/8777)) ([46411e3](https://github.com/angular/material2/commit/46411e3))
@@ -3889,4 +3889,4 @@ This inaugural release includes 6 components:
 As the alpha process continues, these components will continue to evolve. There *will* be
 breaking changes between alpha releases; the alpha releases are here for people that want an
 early look or who like to live on the edge and are very tolerant of breaking API and behavior
-changes.
+changes.
diff --git a/src/components-examples/material/dialog/BUILD.bazel b/src/components-examples/material/dialog/BUILD.bazel
@@ -16,8 +16,8 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button",
-        "//src/material/dialog",
-        "//src/material/dialog/testing",
+        "//src/material/legacy-dialog",
+        "//src/material/legacy-dialog/testing",
         "//src/material/legacy-input",
         "//src/material/menu",
         "@npm//@angular/forms",
@@ -43,8 +43,8 @@ ng_test_library(
         ":dialog",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/dialog",
-        "//src/material/dialog/testing",
+        "//src/material/legacy-dialog",
+        "//src/material/legacy-dialog/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

diff --git a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MatLegacyDialog, MatLegacyDialogRef} from '@angular/material/legacy-dialog';
 
 /**
  * @title Dialog Animations
@@ -10,7 +10,7 @@ import {MatDialog, MatDialogRef} from '@angular/material/dialog';
   templateUrl: 'dialog-animations-example.html',
 })
 export class DialogAnimationsExample {
-  constructor(public dialog: MatDialog) {}
+  constructor(public dialog: MatLegacyDialog) {}
 
   openDialog(enterAnimationDuration: string, exitAnimationDuration: string): void {
     this.dialog.open(DialogAnimationsExampleDialog, {
@@ -26,5 +26,5 @@ export class DialogAnimationsExample {
   templateUrl: 'dialog-animations-example-dialog.html',
 })
 export class DialogAnimationsExampleDialog {
-  constructor(public dialogRef: MatDialogRef<DialogAnimationsExampleDialog>) {}
+  constructor(public dialogRef: MatLegacyDialogRef<DialogAnimationsExampleDialog>) {}
 }
diff --git a/src/components-examples/material/dialog/dialog-content/dialog-content-example.ts b/src/components-examples/material/dialog/dialog-content/dialog-content-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog} from '@angular/material/legacy-dialog';
 
 /**
  * @title Dialog with header, scrollable content and actions
@@ -9,7 +9,7 @@ import {MatDialog} from '@angular/material/dialog';
   templateUrl: 'dialog-content-example.html',
 })
 export class DialogContentExample {
-  constructor(public dialog: MatDialog) {}
+  constructor(public dialog: MatLegacyDialog) {}
 
   openDialog() {
     const dialogRef = this.dialog.open(DialogContentExampleDialog);

diff --git a/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts b/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts
@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatLegacyDialog, MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
 
 export interface DialogData {
   animal: 'panda' | 'unicorn' | 'lion';
@@ -13,7 +13,7 @@ export interface DialogData {
   templateUrl: 'dialog-data-example.html',
 })
 export class DialogDataExample {
-  constructor(public dialog: MatDialog) {}
+  constructor(public dialog: MatLegacyDialog) {}
 
   openDialog() {
     this.dialog.open(DialogDataExampleDialog, {
@@ -29,5 +29,5 @@ export class DialogDataExample {
   templateUrl: 'dialog-data-example-dialog.html',
 })
 export class DialogDataExampleDialog {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+  constructor(@Inject(MAT_LEGACY_DIALOG_DATA) public data: DialogData) {}
 }
diff --git a/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts b/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog} from '@angular/material/legacy-dialog';
 
 /**
  * @title Dialog elements
@@ -9,7 +9,7 @@ import {MatDialog} from '@angular/material/dialog';
   templateUrl: 'dialog-elements-example.html',
 })
 export class DialogElementsExample {
-  constructor(public dialog: MatDialog) {}
+  constructor(public dialog: MatLegacyDialog) {}
 
   openDialog() {
     this.dialog.open(DialogElementsExampleDialog);

diff --git a/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.ts b/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.ts
@@ -1,5 +1,5 @@
 import {Component, ViewChild} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog} from '@angular/material/legacy-dialog';
 import {MatMenuTrigger} from '@angular/material/menu';
 /**
  * @title Dialog launched from a menu
@@ -11,7 +11,7 @@ import {MatMenuTrigger} from '@angular/material/menu';
 export class DialogFromMenuExample {
   @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
 
-  constructor(public dialog: MatDialog) {}
+  constructor(public dialog: MatLegacyDialog) {}
 
   openDialog() {
     // #docregion focus-restoration

diff --git a/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts b/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts
@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatDialogHarness} from '@angular/material/dialog/testing';
+import {MatLegacyDialogHarness} from '@angular/material/legacy-dialog/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
 import {DialogHarnessExample} from './dialog-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -12,7 +12,7 @@ describe('DialogHarnessExample', () => {
 
   beforeEach(waitForAsync(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatDialogModule, NoopAnimationsModule],
+      imports: [MatLegacyDialogModule, NoopAnimationsModule],
       declarations: [DialogHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(DialogHarnessExample);
@@ -22,42 +22,42 @@ describe('DialogHarnessExample', () => {
 
   it('should load harness for dialog', async () => {
     fixture.componentInstance.open();
-    const dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    const dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
     expect(dialogs.length).toBe(1);
   });
 
   it('should load harness for dialog with specific id', async () => {
     fixture.componentInstance.open({id: 'my-dialog'});
     fixture.componentInstance.open({id: 'other'});
-    let dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    let dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
     expect(dialogs.length).toBe(2);
 
-    dialogs = await loader.getAllHarnesses(MatDialogHarness.with({selector: '#my-dialog'}));
+    dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness.with({selector: '#my-dialog'}));
     expect(dialogs.length).toBe(1);
   });
 
   it('should be able to get role of dialog', async () => {
     fixture.componentInstance.open({role: 'alertdialog'});
     fixture.componentInstance.open({role: 'dialog'});
-    const dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    const dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
     expect(await dialogs[0].getRole()).toBe('alertdialog');
     expect(await dialogs[1].getRole()).toBe('dialog');
   });
 
   it('should be able to close dialog', async () => {
     fixture.componentInstance.open({disableClose: true});
     fixture.componentInstance.open();
-    let dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    let dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
 
     expect(dialogs.length).toBe(2);
     await dialogs[0].close();
 
-    dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
     expect(dialogs.length).toBe(1);
 
     // should be a noop since "disableClose" is set to "true".
     await dialogs[0].close();
-    dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    dialogs = await loader.getAllHarnesses(MatLegacyDialogHarness);
     expect(dialogs.length).toBe(1);
   });
 });
diff --git a/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts b/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts
@@ -1,5 +1,5 @@
 import {Component, TemplateRef, ViewChild} from '@angular/core';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog, MatLegacyDialogConfig} from '@angular/material/legacy-dialog';
 
 /**
  * @title Testing with MatDialogHarness
@@ -11,9 +11,9 @@ import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 export class DialogHarnessExample {
   @ViewChild(TemplateRef) dialogTemplate: TemplateRef<any>;
 
-  constructor(readonly dialog: MatDialog) {}
+  constructor(readonly dialog: MatLegacyDialog) {}
 
-  open(config?: MatDialogConfig) {
+  open(config?: MatLegacyDialogConfig) {
     return this.dialog.open(this.dialogTemplate, config);
   }
 }
diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts
@@ -1,5 +1,9 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {
+  MatLegacyDialog,
+  MAT_LEGACY_DIALOG_DATA,
+  MatLegacyDialogRef,
+} from '@angular/material/legacy-dialog';
 
 export interface DialogData {
   animal: string;
@@ -17,7 +21,7 @@ export class DialogOverviewExample {
   animal: string;
   name: string;
 
-  constructor(public dialog: MatDialog) {}
+  constructor(public dialog: MatLegacyDialog) {}
 
   openDialog(): void {
     const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
@@ -38,8 +42,8 @@ export class DialogOverviewExample {
 })
 export class DialogOverviewExampleDialog {
   constructor(
-    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+    public dialogRef: MatLegacyDialogRef<DialogOverviewExampleDialog>,
+    @Inject(MAT_LEGACY_DIALOG_DATA) public data: DialogData,
   ) {}
 
   onNoClick(): void {

diff --git a/src/components-examples/material/dialog/index.ts b/src/components-examples/material/dialog/index.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatMenuModule} from '@angular/material/menu';
 import {
@@ -64,7 +64,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatButtonModule,
-    MatDialogModule,
+    MatLegacyDialogModule,
     MatLegacyInputModule,
     MatMenuModule,
     FormsModule,

diff --git a/src/dev-app/dialog/BUILD.bazel b/src/dev-app/dialog/BUILD.bazel
@@ -12,9 +12,9 @@ ng_module(
     deps = [
         "//src/cdk/drag-drop",
         "//src/material/button",
-        "//src/material/dialog",
         "//src/material/legacy-card",
         "//src/material/legacy-checkbox",
+        "//src/material/legacy-dialog",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
         "//src/material/legacy-select",