feat(material/list): switch implementation to use MDC list (#25445)

Switches the `material/list` implementation to use MDC by default. Old implementation is still available under `material/legacy-list`.

BREAKING CHANGE:
- DOM and CSS classes for the various list components have changed.
- Typescript API is largely the same but may have minor differences.

.github/CODEOWNERS

@@ -16,7 +16,7 @@
 /src/material/grid-list/**                         @andrewseguin
 /src/material/icon/**                              @andrewseguin
 /src/material/legacy-input/**                      @mmalerba
-/src/material/list/**                              @andrewseguin @crisbeto @devversion
+/src/material/legacy-list/**                       @andrewseguin @crisbeto @devversion
 /src/material/legacy-menu/**                       @crisbeto
 /src/material/paginator/**                         @andrewseguin
 /src/material/prebuilt-themes/**                   @andrewseguin
@@ -118,7 +118,7 @@
 /src/material-experimental/mdc-core/**                 @crisbeto
 /src/material/dialog/**               @devversion
 /src/material/form-field/**                            @devversion @mmalerba
-/src/material-experimental/mdc-list/**                 @mmalerba @devversion
+/src/material/list/**                                  @mmalerba @devversion
 /src/material/menu/**                                  @crisbeto
 /src/material/select/**                                @crisbeto
 /src/material-experimental/mdc-paginator/**            @crisbeto

.ng-dev/commit-message.mts

@@ -47,7 +47,6 @@ export const commitMessage: CommitMessageConfig = {
     'material/dialog',
     'material/form-field',
     'material/input',
-    'material-experimental/mdc-list',
     'material-experimental/mdc-paginator',
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
@@ -85,6 +84,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/icon',
     'material/legacy-input',
     'material/list',
+    'material/legacy-list',
     'material/menu',
     'material/legacy-menu',
     'material/paginator',

goldens/tsec-exemption.json

@@ -4,7 +4,7 @@
   "ban-element-setattribute": [
     "../src/cdk/a11y/aria-describer/aria-reference.ts",
     "../src/material/checkbox/checkbox.ts",
-    "../src/material-experimental/mdc-list/interactive-list-base.ts",
+    "../src/material/list/interactive-list-base.ts",
     "../src/material-experimental/mdc-progress-spinner/progress-spinner.ts",
     "../src/material/slide-toggle/slide-toggle.ts",
     "../src/material/icon/icon-registry.ts",

integration/size-test/material/list/BUILD.bazel

@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
 size_test(
     name = "nav-list",
     file = "nav-list.ts",
-    deps = ["//src/material/list"],
+    deps = ["//src/material/legacy-list"],
 )

integration/size-test/material/list/nav-list.ts

@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 
 /**
  * Basic component using `MatNavList` and `MatListItem`. Other parts of the list
@@ -18,7 +18,7 @@ import {MatListModule} from '@angular/material/list';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatListModule],
+  imports: [MatLegacyListModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

src/components-examples/material-experimental/popover-edit/BUILD.bazel

@@ -15,7 +15,7 @@ ng_module(
         "//src/material/icon",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
-        "//src/material/list",
+        "//src/material/legacy-list",
         "//src/material/snack-bar",
         "//src/material/table",
         "@npm//@angular/common",

src/components-examples/material-experimental/popover-edit/index.ts

@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material/table';
 import {PopoverEditCellSpanMatTableExample} from './popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example';
@@ -35,7 +35,7 @@ const EXAMPLES = [
     MatLegacyCheckboxModule,
     MatIconModule,
     MatLegacyInputModule,
-    MatListModule,
+    MatLegacyListModule,
     MatPopoverEditModule,
     MatSnackBarModule,
     MatTableModule,

src/components-examples/material/bottom-sheet/BUILD.bazel

@@ -19,7 +19,7 @@ ng_module(
         "//src/material/bottom-sheet",
         "//src/material/bottom-sheet/testing",
         "//src/material/button",
-        "//src/material/list",
+        "//src/material/legacy-list",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

src/components-examples/material/bottom-sheet/index.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
 import {MatButtonModule} from '@angular/material/button';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {
   BottomSheetOverviewExample,
   BottomSheetOverviewExampleSheet,
@@ -17,7 +17,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [MatBottomSheetModule, MatButtonModule, MatListModule],
+  imports: [MatBottomSheetModule, MatButtonModule, MatLegacyListModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -17,7 +17,7 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/divider",
         "//src/material/divider/testing",
-        "//src/material/list",
+        "//src/material/legacy-list",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

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

@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {DividerOverviewExample} from './divider-overview/divider-overview-example';
 import {DividerHarnessExample} from './divider-harness/divider-harness-example';
 
@@ -9,7 +9,7 @@ export {DividerHarnessExample, DividerOverviewExample};
 const EXAMPLES = [DividerHarnessExample, DividerOverviewExample];
 
 @NgModule({
-  imports: [MatDividerModule, MatListModule],
+  imports: [MatDividerModule, MatLegacyListModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -16,8 +16,8 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/icon",
-        "//src/material/list",
-        "//src/material/list/testing",
+        "//src/material/legacy-list",
+        "//src/material/legacy-list/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",
@@ -40,8 +40,8 @@ ng_test_library(
         ":list",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/list",
-        "//src/material/list/testing",
+        "//src/material/legacy-list",
+        "//src/material/legacy-list/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

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

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {ListOverviewExample} from './list-overview/list-overview-example';
 import {ListSectionsExample} from './list-sections/list-sections-example';
 import {ListSelectionExample} from './list-selection/list-selection-example';
@@ -25,7 +25,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [CommonModule, MatIconModule, MatListModule],
+  imports: [CommonModule, MatIconModule, MatLegacyListModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

src/components-examples/material/list/list-harness/list-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {HarnessLoader, parallel} from '@angular/cdk/testing';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatListHarness} from '@angular/material/list/testing';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListHarness} from '@angular/material/legacy-list/testing';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {ListHarnessExample} from './list-harness-example';
 
 describe('ListHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ListHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatListModule],
+      imports: [MatLegacyListModule],
       declarations: [ListHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(ListHarnessExample);
@@ -20,7 +20,7 @@ describe('ListHarnessExample', () => {
   });
 
   it('should get all items', async () => {
-    const list = await loader.getHarness(MatListHarness);
+    const list = await loader.getHarness(MatLegacyListHarness);
     const items = await list.getItems();
     expect(await parallel(() => items.map(i => i.getText()))).toEqual([
       'Item 1',
@@ -30,13 +30,13 @@ describe('ListHarnessExample', () => {
   });
 
   it('should get all items matching text', async () => {
-    const list = await loader.getHarness(MatListHarness);
+    const list = await loader.getHarness(MatLegacyListHarness);
     const items = await list.getItems({text: /[13]/});
     expect(await parallel(() => items.map(i => i.getText()))).toEqual(['Item 1', 'Item 3']);
   });
 
   it('should get items by subheader', async () => {
-    const list = await loader.getHarness(MatListHarness);
+    const list = await loader.getHarness(MatLegacyListHarness);
     const sections = await list.getItemsGroupedBySubheader();
     expect(sections.length).toBe(3);
     expect(sections[0].heading).toBeUndefined();
@@ -51,7 +51,7 @@ describe('ListHarnessExample', () => {
   });
 
   it('should get list item text and lines', async () => {
-    const list = await loader.getHarness(MatListHarness);
+    const list = await loader.getHarness(MatLegacyListHarness);
     const items = await list.getItems();
     expect(items.length).toBe(3);
     expect(await items[0].getText()).toBe('Item 1');

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

@@ -19,9 +19,9 @@ ng_module(
         "//src/material/button",
         "//src/material/icon",
         "//src/material/legacy-checkbox",
+        "//src/material/legacy-list",
         "//src/material/legacy-radio",
         "//src/material/legacy-select",
-        "//src/material/list",
         "//src/material/sidenav",
         "//src/material/toolbar",
         "@npm//@angular/forms",

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

@@ -4,7 +4,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {MatSidenavModule} from '@angular/material/sidenav';
@@ -56,7 +56,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatLegacyCheckboxModule,
     MatIconModule,
-    MatListModule,
+    MatLegacyListModule,
     MatLegacyRadioModule,
     MatSidenavModule,
     MatLegacySelectModule,

src/dev-app/bottom-sheet/BUILD.bazel

@@ -17,8 +17,8 @@ ng_module(
         "//src/material/legacy-checkbox",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-list",
         "//src/material/legacy-select",
-        "//src/material/list",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/bottom-sheet/bottom-sheet-demo.ts

@@ -21,7 +21,7 @@ import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {MatLegacySelectModule} from '@angular/material/legacy-select';
 
 const defaultConfig = new MatBottomSheetConfig();
@@ -42,7 +42,7 @@ const defaultConfig = new MatBottomSheetConfig();
     MatIconModule,
     MatLegacyInputModule,
     MatLegacySelectModule,
-    MatListModule,
+    MatLegacyListModule,
   ],
 })
 export class BottomSheetDemo {
@@ -77,7 +77,7 @@ export class BottomSheetDemo {
     </mat-nav-list>
   `,
   standalone: true,
-  imports: [CommonModule, MatListModule],
+  imports: [CommonModule, MatLegacyListModule],
 })
 export class ExampleBottomSheet {
   constructor(private _bottomSheet: MatBottomSheetRef) {}

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

@@ -15,7 +15,7 @@ ng_module(
         "//src/material/button",
         "//src/material/core",
         "//src/material/icon",
-        "//src/material/list",
+        "//src/material/legacy-list",
         "//src/material/sidenav",
         "//src/material/toolbar",
         "@npm//@angular/router",

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

@@ -13,7 +13,7 @@ import {DevAppDirectionality} from './dev-app-directionality';
 import {DevAppRippleOptions} from './ripple-options';
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 import {MatIconModule} from '@angular/material/icon';
@@ -34,7 +34,7 @@ export const ANIMATIONS_STORAGE_KEY = 'ANGULAR_COMPONENTS_ANIMATIONS_DISABLED';
     CommonModule,
     MatButtonModule,
     MatIconModule,
-    MatListModule,
+    MatLegacyListModule,
     MatSidenavModule,
     MatToolbarModule,
     RouterModule,

src/dev-app/drawer/BUILD.bazel

@@ -11,7 +11,7 @@ ng_module(
     ],
     deps = [
         "//src/material/button",
-        "//src/material/list",
+        "//src/material/legacy-list",
         "//src/material/sidenav",
     ],
 )

src/dev-app/drawer/drawer-demo.ts

@@ -8,15 +8,15 @@
 
 import {Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {MatListModule} from '@angular/material/list';
+import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {MatSidenavModule} from '@angular/material/sidenav';
 
 @Component({
   selector: 'drawer-demo',
   templateUrl: 'drawer-demo.html',
   styleUrls: ['drawer-demo.css'],
   standalone: true,
-  imports: [MatButtonModule, MatListModule, MatSidenavModule],
+  imports: [MatButtonModule, MatLegacyListModule, MatSidenavModule],
 })
 export class DrawerDemo {
   invert = false;

src/dev-app/list/BUILD.bazel

@@ -13,7 +13,7 @@ ng_module(
         "//src/material/button",
         "//src/material/icon",
         "//src/material/legacy-checkbox",
-        "//src/material/list",
+        "//src/material/legacy-list",
     ],
 )
 

src/dev-app/list/list-demo.ts

@@ -12,7 +12,10 @@ import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatListModule, MatListOptionCheckboxPosition} from '@angular/material/list';
+import {
+  MatLegacyListModule,
+  MatLegacyListOptionCheckboxPosition,
+} from '@angular/material/legacy-list';
 
 @Component({
   selector: 'list-demo',
@@ -25,7 +28,7 @@ import {MatListModule, MatListOptionCheckboxPosition} from '@angular/material/li
     MatButtonModule,
     MatLegacyCheckboxModule,
     MatIconModule,
-    MatListModule,
+    MatLegacyListModule,
   ],
 })
 export class ListDemo {
@@ -37,7 +40,7 @@ export class ListDemo {
     {name: 'Bobby', headline: 'UX designer'},
   ];
 
-  checkboxPosition: MatListOptionCheckboxPosition = 'before';
+  checkboxPosition: MatLegacyListOptionCheckboxPosition = 'before';
 
   messages: {from: string; subject: string; message: string; image: string}[] = [
     {