feat(material/menu): switch implementation to use MDC (#25431)

Switches the `material/menu` implementation to use MDC by default. Old implementation is still available under `material/legacy-menu`. BREAKING CHANGE: - DOM and CSS classes for `mat-menu` have changes. - Typescript API is largely the same but may have minor differences.
angular · Aug 10, 2022 · 20db76d · 20db76d
1 parent 1337f36
commit 20db76d
Show file tree

Hide file tree

Showing 89 changed files with 1,343 additions and 1,161 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -17,7 +17,7 @@
 /src/material/icon/**                              @andrewseguin
 /src/material/legacy-input/**                      @mmalerba
 /src/material/list/**                              @andrewseguin @crisbeto @devversion
-/src/material/menu/**                              @crisbeto
+/src/material/legacy-menu/**                       @crisbeto
 /src/material/paginator/**                         @andrewseguin
 /src/material/prebuilt-themes/**                   @andrewseguin
 /src/material/legacy-prebuilt-themes/**            @andrewseguin
@@ -119,7 +119,7 @@
 /src/material/dialog/**               @devversion
 /src/material/form-field/**                            @devversion @mmalerba
 /src/material-experimental/mdc-list/**                 @mmalerba @devversion
-/src/material-experimental/mdc-menu/**                 @crisbeto
+/src/material/menu/**                                  @crisbeto
 /src/material/select/**                                @crisbeto
 /src/material-experimental/mdc-paginator/**            @crisbeto
 /src/material-experimental/mdc-progress-spinner/**     @andrewseguin

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -48,7 +48,6 @@ export const commitMessage: CommitMessageConfig = {
     'material/form-field',
     'material/input',
     'material-experimental/mdc-list',
-    'material-experimental/mdc-menu',
     'material-experimental/mdc-paginator',
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
@@ -87,6 +86,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/legacy-input',
     'material/list',
     'material/menu',
+    'material/legacy-menu',
     'material/paginator',
     'material/prebuilt-themes',
     'material/legacy-prebuilt-themes',

diff --git a/integration/size-test/material/menu/BUILD.bazel b/integration/size-test/material/menu/BUILD.bazel
@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
 size_test(
     name = "without-lazy-content",
     file = "without-lazy-content.ts",
-    deps = ["//src/material/menu"],
+    deps = ["//src/material/legacy-menu"],
 )
diff --git a/integration/size-test/material/menu/without-lazy-content.ts b/integration/size-test/material/menu/without-lazy-content.ts
@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 
 /**
  * Basic component using `MatMenu` and `MatMenuTrigger`. No lazy `MatMenuContent` is
@@ -14,7 +14,7 @@ import {MatMenuModule} from '@angular/material/menu';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatMenuModule],
+  imports: [MatLegacyMenuModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

diff --git a/src/components-examples/material/dialog/BUILD.bazel b/src/components-examples/material/dialog/BUILD.bazel
@@ -19,7 +19,7 @@ ng_module(
         "//src/material/legacy-dialog",
         "//src/material/legacy-dialog/testing",
         "//src/material/legacy-input",
-        "//src/material/menu",
+        "//src/material/legacy-menu",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

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,6 +1,6 @@
 import {Component, ViewChild} from '@angular/core';
 import {MatLegacyDialog} from '@angular/material/legacy-dialog';
-import {MatMenuTrigger} from '@angular/material/menu';
+import {MatLegacyMenuTrigger} from '@angular/material/legacy-menu';
 /**
  * @title Dialog launched from a menu
  */
@@ -9,7 +9,7 @@ import {MatMenuTrigger} from '@angular/material/menu';
   templateUrl: 'dialog-from-menu-example.html',
 })
 export class DialogFromMenuExample {
-  @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
+  @ViewChild('menuTrigger') menuTrigger: MatLegacyMenuTrigger;
 
   constructor(public dialog: MatLegacyDialog) {}
 

diff --git a/src/components-examples/material/dialog/index.ts b/src/components-examples/material/dialog/index.ts
@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {
   DialogContentExample,
   DialogContentExampleDialog,
@@ -66,7 +66,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatLegacyDialogModule,
     MatLegacyInputModule,
-    MatMenuModule,
+    MatLegacyMenuModule,
     FormsModule,
   ],
   declarations: EXAMPLES,

diff --git a/src/components-examples/material/menu/BUILD.bazel b/src/components-examples/material/menu/BUILD.bazel
@@ -18,8 +18,8 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/icon",
-        "//src/material/menu",
-        "//src/material/menu/testing",
+        "//src/material/legacy-menu",
+        "//src/material/legacy-menu/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",
@@ -42,8 +42,8 @@ ng_test_library(
         ":menu",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/menu",
-        "//src/material/menu/testing",
+        "//src/material/legacy-menu",
+        "//src/material/legacy-menu/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

diff --git a/src/components-examples/material/menu/index.ts b/src/components-examples/material/menu/index.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {MenuIconsExample} from './menu-icons/menu-icons-example';
 import {MenuOverviewExample} from './menu-overview/menu-overview-example';
 import {MenuPositionExample} from './menu-position/menu-position-example';
@@ -25,7 +25,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [MatButtonModule, MatIconModule, MatMenuModule],
+  imports: [MatButtonModule, MatIconModule, MatLegacyMenuModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

diff --git a/src/components-examples/material/menu/menu-harness/menu-harness-example.spec.ts b/src/components-examples/material/menu/menu-harness/menu-harness-example.spec.ts
@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatMenuHarness} from '@angular/material/menu/testing';
+import {MatLegacyMenuHarness} from '@angular/material/legacy-menu/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {MenuHarnessExample} from './menu-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -12,7 +12,7 @@ describe('MenuHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatMenuModule, NoopAnimationsModule],
+      imports: [MatLegacyMenuModule, NoopAnimationsModule],
       declarations: [MenuHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(MenuHarnessExample);
@@ -21,24 +21,24 @@ describe('MenuHarnessExample', () => {
   });
 
   it('should load all menu harnesses', async () => {
-    const menues = await loader.getAllHarnesses(MatMenuHarness);
+    const menues = await loader.getAllHarnesses(MatLegacyMenuHarness);
     expect(menues.length).toBe(2);
   });
 
   it('should get disabled state', async () => {
-    const [enabledMenu, disabledMenu] = await loader.getAllHarnesses(MatMenuHarness);
+    const [enabledMenu, disabledMenu] = await loader.getAllHarnesses(MatLegacyMenuHarness);
     expect(await enabledMenu.isDisabled()).toBe(false);
     expect(await disabledMenu.isDisabled()).toBe(true);
   });
 
   it('should get menu text', async () => {
-    const [firstMenu, secondMenu] = await loader.getAllHarnesses(MatMenuHarness);
+    const [firstMenu, secondMenu] = await loader.getAllHarnesses(MatLegacyMenuHarness);
     expect(await firstMenu.getTriggerText()).toBe('Settings');
     expect(await secondMenu.getTriggerText()).toBe('Disabled menu');
   });
 
   it('should open and close', async () => {
-    const menu = await loader.getHarness(MatMenuHarness.with({triggerText: 'Settings'}));
+    const menu = await loader.getHarness(MatLegacyMenuHarness.with({triggerText: 'Settings'}));
     expect(await menu.isOpen()).toBe(false);
     await menu.open();
     expect(await menu.isOpen()).toBe(true);
@@ -47,7 +47,7 @@ describe('MenuHarnessExample', () => {
   });
 
   it('should get all items', async () => {
-    const menu = await loader.getHarness(MatMenuHarness.with({triggerText: 'Settings'}));
+    const menu = await loader.getHarness(MatLegacyMenuHarness.with({triggerText: 'Settings'}));
     await menu.open();
     expect((await menu.getItems()).length).toBe(2);
   });

diff --git a/src/dev-app/mdc-menu/BUILD.bazel b/src/dev-app/mdc-menu/BUILD.bazel
@@ -11,9 +11,9 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-button",
-        "//src/material-experimental/mdc-menu",
         "//src/material/divider",
         "//src/material/icon",
+        "//src/material/menu",
         "//src/material/toolbar",
     ],
 )

diff --git a/src/dev-app/mdc-menu/mdc-menu-demo.ts b/src/dev-app/mdc-menu/mdc-menu-demo.ts
@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatIconModule} from '@angular/material/icon';
 import {MatDividerModule} from '@angular/material/divider';

diff --git a/src/dev-app/menu/BUILD.bazel b/src/dev-app/menu/BUILD.bazel
@@ -13,7 +13,7 @@ ng_module(
         "//src/material/button",
         "//src/material/divider",
         "//src/material/icon",
-        "//src/material/menu",
+        "//src/material/legacy-menu",
         "//src/material/toolbar",
     ],
 )

diff --git a/src/dev-app/menu/menu-demo.ts b/src/dev-app/menu/menu-demo.ts
@@ -11,7 +11,7 @@ import {CommonModule} from '@angular/common';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {MatToolbarModule} from '@angular/material/toolbar';
 
 @Component({
@@ -24,7 +24,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
     MatButtonModule,
     MatDividerModule,
     MatIconModule,
-    MatMenuModule,
+    MatLegacyMenuModule,
     MatToolbarModule,
   ],
 })

diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -43,7 +43,6 @@ ng_module(
         "//src/components-examples/material-experimental/mdc-card",
         "//src/components-examples/private",
         "//src/material-experimental/mdc-button",
-        "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-table",
         "//src/material-experimental/mdc-tabs",
@@ -60,6 +59,7 @@ ng_module(
         "//src/material/legacy-dialog",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-menu",
         "//src/material/legacy-progress-bar",
         "//src/material/legacy-radio",
         "//src/material/legacy-slide-toggle",

diff --git a/src/e2e-app/mdc-menu/mdc-menu-e2e-module.ts b/src/e2e-app/mdc-menu/mdc-menu-e2e-module.ts
@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {MdcMenuE2e} from './mdc-menu-e2e';
 
 @NgModule({

diff --git a/src/e2e-app/menu/menu-e2e-module.ts b/src/e2e-app/menu/menu-e2e-module.ts
@@ -7,11 +7,11 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {MenuE2E} from './menu-e2e';
 
 @NgModule({
-  imports: [MatMenuModule],
+  imports: [MatLegacyMenuModule],
   declarations: [MenuE2E],
 })
 export class MenuE2eModule {}
diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss
@@ -25,8 +25,6 @@
   mdc-icon-button-typography, mdc-icon-button-density, mdc-icon-button-theme;
 @forward './mdc-list/list-theme' as mdc-list-* show mdc-list-color, mdc-list-typography,
   mdc-list-density, mdc-list-theme;
-@forward './mdc-menu/menu-theme' as mdc-menu-* show mdc-menu-color, mdc-menu-typography,
-  mdc-menu-density, mdc-menu-theme;
 @forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color,
   mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme;
 @forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show

diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
@@ -5,8 +5,6 @@ entryPoints = [
     "mdc-core",
     "mdc-list",
     "mdc-list/testing",
-    "mdc-menu",
-    "mdc-menu/testing",
     "mdc-paginator",
     "mdc-paginator/testing",
     "mdc-progress-spinner",

diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss
@@ -26,7 +26,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
-@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../theming/all-theme';

diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss
@@ -26,7 +26,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
-@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../theming/all-theme';

diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel
@@ -23,7 +23,6 @@ sass_library(
         "//src/material-experimental/mdc-button:mdc_button_scss_lib",
         "//src/material-experimental/mdc-core:mdc_core_scss_lib",
         "//src/material-experimental/mdc-list:mdc_list_scss_lib",
-        "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib",
         "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib",
         "//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib",

diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss
@@ -26,15 +26,13 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
-@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward 'all-theme' hide all-mdc-component-themes;;
 
 @import '../core-theme';
 @import '../../mdc-button/button-theme';
 @import '../../mdc-list/list-theme';
-@import '../../mdc-menu/menu-theme';
 @import '../../mdc-snack-bar/snack-bar-theme';
 @import '../../mdc-tabs/tabs-theme';
 @import '../../mdc-table/table-theme';

diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss
@@ -5,7 +5,6 @@
 @use '../../mdc-button/fab-theme';
 @use '../../mdc-button/icon-button-theme';
 @use '../../mdc-list/list-theme';
-@use '../../mdc-menu/menu-theme';
 @use '../../mdc-snack-bar/snack-bar-theme';
 @use '../../mdc-tabs/tabs-theme';
 @use '../../mdc-table/table-theme';
@@ -25,7 +24,7 @@
     @include mat.checkbox-theme($theme-or-color-config);
     @include mat.chips-theme($theme-or-color-config);
     @include list-theme.theme($theme-or-color-config);
-    @include menu-theme.theme($theme-or-color-config);
+    @include mat.menu-theme($theme-or-color-config);
     @include paginator-theme.theme($theme-or-color-config);
     @include mat.progress-bar-theme($theme-or-color-config);
     @include progress-spinner-theme.theme($theme-or-color-config);

diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss
@@ -26,7 +26,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
-@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../theming/all-theme';