docs(material/list): switch examples and demo to MDC (#25520)

Switches the list live examples and demo to use MDC. Also updates the docs to reflect the latest API.

Author: crisbeto

.github/CODEOWNERS

@@ -197,7 +197,7 @@
 /src/dev-app/legacy-checkbox/**                             @mmalerba
 /src/dev-app/mdc-chips/**                                   @mmalerba
 /src/dev-app/mdc-dialog/**                                  @devversion
-/src/dev-app/mdc-list/**                                    @mmalerba
+/src/dev-app/legacy-list/**                                 @mmalerba
 /src/dev-app/mdc-menu/**                                    @crisbeto
 /src/dev-app/mdc-progress-bar/**                            @crisbeto
 /src/dev-app/mdc-progress-spinner/**                        @mmalerba

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/legacy-list",
-        "//src/material/legacy-list/testing",
+        "//src/material/list",
+        "//src/material/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/legacy-list",
-        "//src/material/legacy-list/testing",
+        "//src/material/list",
+        "//src/material/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 {MatLegacyListModule} from '@angular/material/legacy-list';
+import {MatListModule} from '@angular/material/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, MatLegacyListModule],
+  imports: [CommonModule, MatIconModule, MatListModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

src/components-examples/material/list/list-harness/list-harness-example.html

@@ -1,9 +1,9 @@
 <mat-list>
   <mat-list-item>
-    <div matLine>Item </div>
-    <div matLine>1</div>
-    <div matListIcon>icon</div>
-    <div matListAvatar>Avatar</div>
+    <div matListItemTitle>Item </div>
+    <div matListItemLine>1</div>
+    <div matListItemIcon>icon</div>
+    <div matListItemAvatar>Avatar</div>
   </mat-list-item>
   <div matSubheader>Section 1</div>
   <a mat-list-item>

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 {MatLegacyListHarness} from '@angular/material/legacy-list/testing';
-import {MatLegacyListModule} from '@angular/material/legacy-list';
+import {MatListHarness} from '@angular/material/list/testing';
+import {MatListModule} from '@angular/material/list';
 import {ListHarnessExample} from './list-harness-example';
 
 describe('ListHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ListHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyListModule],
+      imports: [MatListModule],
       declarations: [ListHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(ListHarnessExample);
@@ -20,45 +20,42 @@ describe('ListHarnessExample', () => {
   });
 
   it('should get all items', async () => {
-    const list = await loader.getHarness(MatLegacyListHarness);
+    const list = await loader.getHarness(MatListHarness);
     const items = await list.getItems();
-    expect(await parallel(() => items.map(i => i.getText()))).toEqual([
+    expect(await parallel(() => items.map(i => i.getFullText()))).toEqual([
       'Item 1',
       'Item 2',
       'Item 3',
     ]);
   });
 
   it('should get all items matching text', async () => {
-    const list = await loader.getHarness(MatLegacyListHarness);
+    const list = await loader.getHarness(MatListHarness);
     const items = await list.getItems({text: /[13]/});
-    expect(await parallel(() => items.map(i => i.getText()))).toEqual(['Item 1', 'Item 3']);
+    expect(await parallel(() => items.map(i => i.getFullText()))).toEqual(['Item 1', 'Item 3']);
   });
 
   it('should get items by subheader', async () => {
-    const list = await loader.getHarness(MatLegacyListHarness);
+    const list = await loader.getHarness(MatListHarness);
     const sections = await list.getItemsGroupedBySubheader();
     expect(sections.length).toBe(3);
     expect(sections[0].heading).toBeUndefined();
-    expect(await parallel(() => sections[0].items.map(i => i.getText()))).toEqual(['Item 1']);
+    expect(await parallel(() => sections[0].items.map(i => i.getFullText()))).toEqual(['Item 1']);
     expect(sections[1].heading).toBe('Section 1');
-    expect(await parallel(() => sections[1].items.map(i => i.getText()))).toEqual([
+    expect(await parallel(() => sections[1].items.map(i => i.getFullText()))).toEqual([
       'Item 2',
       'Item 3',
     ]);
     expect(sections[2].heading).toBe('Section 2');
     expect(sections[2].items.length).toEqual(0);
   });
 
-  it('should get list item text and lines', async () => {
-    const list = await loader.getHarness(MatLegacyListHarness);
-    const items = await list.getItems();
-    expect(items.length).toBe(3);
-    expect(await items[0].getText()).toBe('Item 1');
-    expect(await items[0].getLinesText()).toEqual(['Item', '1']);
-    expect(await items[1].getText()).toBe('Item 2');
-    expect(await items[1].getLinesText()).toEqual([]);
-    expect(await items[2].getText()).toBe('Item 3');
-    expect(await items[2].getLinesText()).toEqual([]);
+  it('should get the different sections of an item', async () => {
+    const list = await loader.getHarness(MatListHarness);
+    const firstItem = (await list.getItems())[0];
+    expect(await firstItem.getTitle()).toBe('Item');
+    expect(await firstItem.getSecondaryText()).toBe('1');
+    expect(await firstItem.hasAvatar()).toBe(true);
+    expect(await firstItem.hasIcon()).toBe(true);
   });
 });

src/components-examples/material/list/list-sections/list-sections-example.css

@@ -1,3 +1,3 @@
-.mat-list-icon {
+.mat-mdc-list-item-icon {
   color: rgba(0, 0, 0, 0.54);
 }

src/components-examples/material/list/list-sections/list-sections-example.html

@@ -1,15 +1,15 @@
 <mat-list>
   <div mat-subheader>Folders</div>
   <mat-list-item *ngFor="let folder of folders">
-    <mat-icon mat-list-icon>folder</mat-icon>
-    <div mat-line>{{folder.name}}</div>
-    <div mat-line> {{folder.updated | date}} </div>
+    <mat-icon matListItemIcon>folder</mat-icon>
+    <div matListItemTitle>{{folder.name}}</div>
+    <div matListItemLine>{{folder.updated | date}}</div>
   </mat-list-item>
   <mat-divider></mat-divider>
   <div mat-subheader>Notes</div>
   <mat-list-item *ngFor="let note of notes">
-    <mat-icon mat-list-icon>note</mat-icon>
-    <div mat-line>{{note.name}}</div>
-    <div mat-line> {{note.updated | date}} </div>
+    <mat-icon matListItemIcon>note</mat-icon>
+    <div matListItemTitle>{{note.name}}</div>
+    <div matListItemLine>{{note.updated | date}}</div>
   </mat-list-item>
 </mat-list>

src/components-examples/material/list/list-selection/list-selection-example.css

@@ -5,7 +5,6 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'list-selection-example',
-  styleUrls: ['list-selection-example.css'],
   templateUrl: 'list-selection-example.html',
 })
 export class ListSelectionExample {

src/components-examples/material/list/list-selection/list-selection-example.ts

@@ -5,7 +5,6 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'list-single-selection-example',
-  styleUrls: ['list-single-selection-example.css'],
   templateUrl: 'list-single-selection-example.html',
 })
 export class ListSingleSelectionExample {

src/components-examples/material/list/list-single-selection/list-single-selection-example.css

@@ -50,6 +50,7 @@ ng_module(
         "//src/dev-app/legacy-card",
         "//src/dev-app/legacy-checkbox",
         "//src/dev-app/legacy-input",
+        "//src/dev-app/legacy-list",
         "//src/dev-app/legacy-paginator",
         "//src/dev-app/legacy-select",
         "//src/dev-app/legacy-snack-bar",
@@ -61,7 +62,6 @@ ng_module(
         "//src/dev-app/mdc-button",
         "//src/dev-app/mdc-chips",
         "//src/dev-app/mdc-dialog",
-        "//src/dev-app/mdc-list",
         "//src/dev-app/mdc-menu",
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-progress-spinner",

src/components-examples/material/list/list-single-selection/list-single-selection-example.ts

@@ -107,7 +107,6 @@ export class DevAppLayout {
     {name: 'MDC Button', route: '/mdc-button'},
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Dialog', route: '/mdc-dialog'},
-    {name: 'MDC List', route: '/mdc-list'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
@@ -118,6 +117,7 @@ export class DevAppLayout {
     {name: 'Legacy Card', route: '/legacy-card'},
     {name: 'Legacy Checkbox', route: '/legacy-checkbox'},
     {name: 'Legacy Input', route: '/legacy-input'},
+    {name: 'Legacy List', route: '/legacy-list'},
     {name: 'Legacy Paginator', route: '/legacy-paginator'},
     {name: 'Legacy Select', route: '/legacy-select'},
     {name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},

src/dev-app/BUILD.bazel

@@ -0,0 +1,23 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-list",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "legacy-list-demo.html",
+        ":legacy_list_demo_scss",
+    ],
+    deps = [
+        "//src/material/icon",
+        "//src/material/legacy-button",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-list",
+    ],
+)
+
+sass_binary(
+    name = "legacy_list_demo_scss",
+    src = "legacy-list-demo.scss",
+)