docs(material/menu): switch examples and demo to MDC (#25571)

Author: amysorto

.github/CODEOWNERS

@@ -188,6 +188,7 @@
 /src/dev-app/legacy-dialog/**                               @devversion
 /src/dev-app/legacy-input/**                                @mmalerba
 /src/dev-app/legacy-list/**                                 @mmalerba
+/src/dev-app/legacy-menu/**                                 @crisbeto
 /src/dev-app/legacy-paginator/**                            @crisbeto
 /src/dev-app/legacy-select/**                               @crisbeto
 /src/dev-app/legacy-snack-bar/**                            @andrewseguin
@@ -199,7 +200,6 @@
 /src/dev-app/mdc-button/**                                  @andrewseguin
 /src/dev-app/legacy-button/**                               @andrewseguin
 /src/dev-app/mdc-chips/**                                   @mmalerba
-/src/dev-app/mdc-menu/**                                    @crisbeto
 /src/dev-app/mdc-progress-bar/**                            @crisbeto
 /src/dev-app/mdc-progress-spinner/**                        @mmalerba
 /src/dev-app/mdc-radio/**                                   @mmalerba

src/components-examples/material/menu/BUILD.bazel

@@ -16,10 +16,10 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
+        "//src/material/button",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-menu",
-        "//src/material/legacy-menu/testing",
+        "//src/material/menu",
+        "//src/material/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/legacy-menu",
-        "//src/material/legacy-menu/testing",
+        "//src/material/menu",
+        "//src/material/menu/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

src/components-examples/material/menu/index.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/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: [MatLegacyButtonModule, MatIconModule, MatLegacyMenuModule],
+  imports: [MatButtonModule, MatIconModule, MatMenuModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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 {MatLegacyMenuHarness} from '@angular/material/legacy-menu/testing';
+import {MatMenuHarness} from '@angular/material/menu/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/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: [MatLegacyMenuModule, NoopAnimationsModule],
+      imports: [MatMenuModule, 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(MatLegacyMenuHarness);
+    const menues = await loader.getAllHarnesses(MatMenuHarness);
     expect(menues.length).toBe(2);
   });
 
   it('should get disabled state', async () => {
-    const [enabledMenu, disabledMenu] = await loader.getAllHarnesses(MatLegacyMenuHarness);
+    const [enabledMenu, disabledMenu] = await loader.getAllHarnesses(MatMenuHarness);
     expect(await enabledMenu.isDisabled()).toBe(false);
     expect(await disabledMenu.isDisabled()).toBe(true);
   });
 
   it('should get menu text', async () => {
-    const [firstMenu, secondMenu] = await loader.getAllHarnesses(MatLegacyMenuHarness);
+    const [firstMenu, secondMenu] = await loader.getAllHarnesses(MatMenuHarness);
     expect(await firstMenu.getTriggerText()).toBe('Settings');
     expect(await secondMenu.getTriggerText()).toBe('Disabled menu');
   });
 
   it('should open and close', async () => {
-    const menu = await loader.getHarness(MatLegacyMenuHarness.with({triggerText: 'Settings'}));
+    const menu = await loader.getHarness(MatMenuHarness.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(MatLegacyMenuHarness.with({triggerText: 'Settings'}));
+    const menu = await loader.getHarness(MatMenuHarness.with({triggerText: 'Settings'}));
     await menu.open();
     expect((await menu.getItems()).length).toBe(2);
   });

src/dev-app/BUILD.bazel

@@ -53,6 +53,7 @@ ng_module(
         "//src/dev-app/legacy-dialog",
         "//src/dev-app/legacy-input",
         "//src/dev-app/legacy-list",
+        "//src/dev-app/legacy-menu",
         "//src/dev-app/legacy-paginator",
         "//src/dev-app/legacy-select",
         "//src/dev-app/legacy-snack-bar",
@@ -62,7 +63,6 @@ ng_module(
         "//src/dev-app/live-announcer",
         "//src/dev-app/mdc-autocomplete",
         "//src/dev-app/mdc-chips",
-        "//src/dev-app/mdc-menu",
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-progress-spinner",
         "//src/dev-app/mdc-radio",

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

@@ -105,7 +105,6 @@ export class DevAppLayout {
     {name: 'YouTube Player', route: '/youtube-player'},
     {name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
     {name: 'MDC Chips', route: '/mdc-chips'},
-    {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Radio', route: '/mdc-radio'},
@@ -118,6 +117,7 @@ export class DevAppLayout {
     {name: 'Legacy Dialog', route: '/legacy-dialog'},
     {name: 'Legacy Input', route: '/legacy-input'},
     {name: 'Legacy List', route: '/legacy-list'},
+    {name: 'Legacy Menu', route: '/legacy-menu'},
     {name: 'Legacy Paginator', route: '/legacy-paginator'},
     {name: 'Legacy Select', route: '/legacy-select'},
     {name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},

src/dev-app/mdc-menu/BUILD.bazel renamed to src/dev-app/legacy-menu/BUILD.bazel

@@ -3,22 +3,22 @@ load("//tools:defaults.bzl", "ng_module", "sass_binary")
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
-    name = "mdc-menu",
+    name = "legacy-menu",
     srcs = glob(["**/*.ts"]),
     assets = [
-        "mdc-menu-demo.html",
-        ":mdc_menu_demo_scss",
+        "legacy-menu-demo.html",
+        ":legacy_menu_demo_scss",
     ],
     deps = [
-        "//src/material/button",
         "//src/material/divider",
         "//src/material/icon",
-        "//src/material/menu",
+        "//src/material/legacy-button",
+        "//src/material/legacy-menu",
         "//src/material/toolbar",
     ],
 )
 
 sass_binary(
-    name = "mdc_menu_demo_scss",
-    src = "mdc-menu-demo.scss",
+    name = "legacy_menu_demo_scss",
+    src = "legacy-menu-demo.scss",
 )

src/dev-app/mdc-menu/mdc-menu-demo.html renamed to src/dev-app/legacy-menu/legacy-menu-demo.html

@@ -8,27 +8,27 @@
 
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatToolbarModule} from '@angular/material/toolbar';
 
 @Component({
-  selector: 'mdc-menu-demo',
-  templateUrl: 'mdc-menu-demo.html',
-  styleUrls: ['mdc-menu-demo.css'],
+  selector: 'legacy-menu-demo',
+  templateUrl: 'legacy-menu-demo.html',
+  styleUrls: ['legacy-menu-demo.css'],
   standalone: true,
   imports: [
     CommonModule,
-    MatMenuModule,
-    MatButtonModule,
-    MatToolbarModule,
-    MatIconModule,
+    MatLegacyButtonModule,
     MatDividerModule,
+    MatIconModule,
+    MatLegacyMenuModule,
+    MatToolbarModule,
   ],
 })
-export class MdcMenuDemo {
+export class LegacyMenuDemo {
   selected = '';
   items = [
     {text: 'Refresh'},

src/dev-app/mdc-menu/mdc-menu-demo.scss renamed to src/dev-app/legacy-menu/legacy-menu-demo.scss

@@ -10,10 +10,10 @@ ng_module(
         ":menu_demo_scss",
     ],
     deps = [
+        "//src/material/button",
         "//src/material/divider",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-menu",
+        "//src/material/menu",
         "//src/material/toolbar",
     ],
 )

src/dev-app/mdc-menu/mdc-menu-demo.ts renamed to src/dev-app/legacy-menu/legacy-menu-demo.ts

@@ -8,11 +8,11 @@
 
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatDividerModule} from '@angular/material/divider';
-import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyMenuModule} from '@angular/material/legacy-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';
+import {MatButtonModule} from '@angular/material/button';
 
 @Component({
   selector: 'menu-demo',
@@ -21,11 +21,11 @@ import {MatToolbarModule} from '@angular/material/toolbar';
   standalone: true,
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
-    MatDividerModule,
-    MatIconModule,
-    MatLegacyMenuModule,
+    MatMenuModule,
+    MatButtonModule,
     MatToolbarModule,
+    MatIconModule,
+    MatDividerModule,
   ],
 })
 export class MenuDemo {

src/dev-app/menu/BUILD.bazel

@@ -181,8 +181,8 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./list/list-demo').then(m => m.ListDemo),
   },
   {
-    path: 'mdc-menu',
-    loadComponent: () => import('./mdc-menu/mdc-menu-demo').then(m => m.MdcMenuDemo),
+    path: 'legacy-menu',
+    loadComponent: () => import('./legacy-menu/legacy-menu-demo').then(m => m.LegacyMenuDemo),
   },
   {
     path: 'legacy-paginator',