docs: switch remaining docs examples to MDC

src/components-examples/cdk-experimental/selection/BUILD.bazel

@@ -13,7 +13,7 @@ ng_module(
         "//src/cdk-experimental/selection",
         "//src/cdk/collections",
         "//src/cdk/table",
-        "//src/material/legacy-checkbox",
+        "//src/material/checkbox",
         "@npm//@angular/forms",
     ],
 )

src/components-examples/cdk-experimental/selection/index.ts

@@ -3,7 +3,7 @@ import {CdkTableModule} from '@angular/cdk/table';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 import {CdkSelectionColumnExample} from './cdk-selection-column/cdk-selection-column-example';
 import {CdkSelectionListExample} from './cdk-selection-list/cdk-selection-list-example';
@@ -19,7 +19,7 @@ const EXAMPLES = [CdkSelectionListExample, CdkSelectionColumnExample];
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    MatLegacyCheckboxModule,
+    MatCheckboxModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

src/components-examples/cdk/a11y/BUILD.bazel

@@ -11,7 +11,7 @@ ng_module(
     ]),
     deps = [
         "//src/cdk/a11y",
-        "//src/material/legacy-select",
+        "//src/material/select",
     ],
 )
 

src/components-examples/cdk/a11y/index.ts

@@ -1,6 +1,6 @@
 import {A11yModule} from '@angular/cdk/a11y';
 import {NgModule} from '@angular/core';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {FocusMonitorDirectivesExample} from './focus-monitor-directives/focus-monitor-directives-example';
 import {FocusMonitorFocusViaExample} from './focus-monitor-focus-via/focus-monitor-focus-via-example';
 import {FocusMonitorOverviewExample} from './focus-monitor-overview/focus-monitor-overview-example';
@@ -14,7 +14,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [A11yModule, MatLegacySelectModule],
+  imports: [A11yModule, MatSelectModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

src/components-examples/cdk/text-field/BUILD.bazel

@@ -11,9 +11,9 @@ ng_module(
     ]),
     deps = [
         "//src/cdk/text-field",
-        "//src/material/legacy-button",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
+        "//src/material/button",
+        "//src/material/input",
+        "//src/material/select",
     ],
 )
 

src/components-examples/cdk/text-field/index.ts

@@ -1,9 +1,9 @@
 import {TextFieldModule} from '@angular/cdk/text-field';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatButtonModule} from '@angular/material/button';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 import {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example';
 import {TextFieldAutofillMonitorExample} from './text-field-autofill-monitor/text-field-autofill-monitor-example';
 import {TextFieldAutosizeTextareaExample} from './text-field-autosize-textarea/text-field-autosize-textarea-example';
@@ -21,13 +21,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [
-    CommonModule,
-    TextFieldModule,
-    MatLegacyButtonModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
-  ],
+  imports: [CommonModule, TextFieldModule, MatButtonModule, MatInputModule, MatSelectModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

src/components-examples/cdk/tree/BUILD.bazel

@@ -11,8 +11,8 @@ ng_module(
     ]),
     deps = [
         "//src/cdk/tree",
+        "//src/material/button",
         "//src/material/icon",
-        "//src/material/legacy-button",
     ],
 )
 

src/components-examples/cdk/tree/index.ts

@@ -1,6 +1,6 @@
 import {CdkTreeModule} from '@angular/cdk/tree';
 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 {CdkTreeFlatExample} from './cdk-tree-flat/cdk-tree-flat-example';
 import {CdkTreeNestedExample} from './cdk-tree-nested/cdk-tree-nested-example';
@@ -10,7 +10,7 @@ export {CdkTreeFlatExample, CdkTreeNestedExample};
 const EXAMPLES = [CdkTreeFlatExample, CdkTreeNestedExample];
 
 @NgModule({
-  imports: [CdkTreeModule, MatLegacyButtonModule, MatIconModule],
+  imports: [CdkTreeModule, MatButtonModule, MatIconModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

src/components-examples/material-experimental/column-resize/BUILD.bazel

@@ -11,7 +11,7 @@ ng_module(
     ]),
     deps = [
         "//src/material-experimental/column-resize",
-        "//src/material/legacy-table",
+        "//src/material/table",
     ],
 )
 

src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module.ts

@@ -7,13 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {MatTableModule} from '@angular/material/table';
 import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize';
 
 import {DefaultEnabledColumnResizeFlexExample} from './default-enabled-column-resize-flex-example';
 
 @NgModule({
-  imports: [MatDefaultEnabledColumnResizeModule, MatLegacyTableModule],
+  imports: [MatDefaultEnabledColumnResizeModule, MatTableModule],
   declarations: [DefaultEnabledColumnResizeFlexExample],
   exports: [DefaultEnabledColumnResizeFlexExample],
 })

src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-module.ts

@@ -7,13 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {MatTableModule} from '@angular/material/table';
 import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize';
 
 import {DefaultEnabledColumnResizeExample} from './default-enabled-column-resize-example';
 
 @NgModule({
-  imports: [MatDefaultEnabledColumnResizeModule, MatLegacyTableModule],
+  imports: [MatDefaultEnabledColumnResizeModule, MatTableModule],
   declarations: [DefaultEnabledColumnResizeExample],
   exports: [DefaultEnabledColumnResizeExample],
 })

src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-module.ts

@@ -7,13 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {MatTableModule} from '@angular/material/table';
 import {MatColumnResizeModule} from '@angular/material-experimental/column-resize';
 
 import {OptInColumnResizeExample} from './opt-in-column-resize-example';
 
 @NgModule({
-  imports: [MatColumnResizeModule, MatLegacyTableModule],
+  imports: [MatColumnResizeModule, MatTableModule],
   declarations: [OptInColumnResizeExample],
   exports: [OptInColumnResizeExample],
 })

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

@@ -11,13 +11,13 @@ ng_module(
     ]),
     deps = [
         "//src/material-experimental/popover-edit",
+        "//src/material/button",
+        "//src/material/checkbox",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-input",
-        "//src/material/legacy-list",
-        "//src/material/legacy-snack-bar",
-        "//src/material/legacy-table",
+        "//src/material/input",
+        "//src/material/list",
+        "//src/material/snack-bar",
+        "//src/material/table",
         "@npm//@angular/common",
         "@npm//@angular/forms",
     ],

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

@@ -2,13 +2,13 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyListModule} from '@angular/material/legacy-list';
-import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
-import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/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';
 import {PopoverEditMatTableFlexExample} from './popover-edit-mat-table-flex/popover-edit-mat-table-flex-example';
 import {PopoverEditMatTableExample} from './popover-edit-mat-table/popover-edit-mat-table-example';
@@ -31,14 +31,14 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
+    MatButtonModule,
+    MatCheckboxModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacyListModule,
+    MatInputModule,
+    MatListModule,
     MatPopoverEditModule,
-    MatLegacySnackBarModule,
-    MatLegacyTableModule,
+    MatSnackBarModule,
+    MatTableModule,
     FormsModule,
   ],
   declarations: EXAMPLES,

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {FormValueContainer} from '@angular/cdk-experimental/popover-edit';
 import {NgForm} from '@angular/forms';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {BehaviorSubject, Observable} from 'rxjs';
 
 export type ElementType = 'Metal' | 'Semimetal' | 'Nonmetal';
@@ -220,7 +220,7 @@ export class PopoverEditMatTableExample {
   readonly typeValues = new FormValueContainer<PeriodicElement, any>();
   readonly fantasyValues = new FormValueContainer<PeriodicElement, any>();
 
-  constructor(private readonly _snackBar: MatLegacySnackBar) {}
+  constructor(private readonly _snackBar: MatSnackBar) {}
 
   onSubmitName(element: PeriodicElement, f: NgForm) {
     if (!f.valid) {

src/components-examples/material-experimental/selection/BUILD.bazel

@@ -13,7 +13,7 @@ ng_module(
         "//src/cdk/collections",
         "//src/cdk/table",
         "//src/material-experimental/selection",
-        "//src/material/legacy-checkbox",
+        "//src/material/checkbox",
         "@npm//@angular/forms",
     ],
 )

src/components-examples/material-experimental/selection/index.ts

@@ -1,9 +1,9 @@
 import {MatSelectionModule} from '@angular/material-experimental/selection';
-import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {MatTableModule} from '@angular/material/table';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 import {MatSelectionColumnExample} from './mat-selection-column/mat-selection-column-example';
 import {MatSelectionListExample} from './mat-selection-list/mat-selection-list-example';
@@ -15,11 +15,11 @@ const EXAMPLES = [MatSelectionListExample, MatSelectionColumnExample];
 @NgModule({
   imports: [
     MatSelectionModule,
-    MatLegacyTableModule,
+    MatTableModule,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    MatLegacyCheckboxModule,
+    MatCheckboxModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

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

@@ -17,8 +17,8 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/badge",
         "//src/material/badge/testing",
+        "//src/material/button",
         "//src/material/icon",
-        "//src/material/legacy-button",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

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

@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {MatBadgeModule} from '@angular/material/badge';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {BadgeOverviewExample} from './badge-overview/badge-overview-example';
 import {BadgeHarnessExample} from './badge-harness/badge-harness-example';
@@ -10,7 +10,7 @@ export {BadgeOverviewExample, BadgeHarnessExample};
 const EXAMPLES = [BadgeOverviewExample, BadgeHarnessExample];
 
 @NgModule({
-  imports: [MatBadgeModule, MatLegacyButtonModule, MatIconModule],
+  imports: [MatBadgeModule, MatButtonModule, MatIconModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -18,8 +18,8 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/bottom-sheet",
         "//src/material/bottom-sheet/testing",
-        "//src/material/legacy-button",
-        "//src/material/legacy-list",
+        "//src/material/button",
+        "//src/material/list",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example-sheet.html

@@ -1,21 +1,21 @@
 <mat-nav-list>
   <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Keep</span>
-    <span mat-line>Add to a note</span>
+    <span matListItemTitle>Google Keep</span>
+    <span matLine>Add to a note</span>
   </a>
 
   <a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Docs</span>
-    <span mat-line>Embed in a document</span>
+    <span matListItemTitle>Google Docs</span>
+    <span matLine>Embed in a document</span>
   </a>
 
   <a href="https://plus.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Plus</span>
-    <span mat-line>Share with your friends</span>
+    <span matListItemTitle>Google Plus</span>
+    <span matLine>Share with your friends</span>
   </a>
 
   <a href="https://hangouts.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Hangouts</span>
-    <span mat-line>Show to your coworkers</span>
+    <span matListItemTitle>Google Hangouts</span>
+    <span matLine>Show to your coworkers</span>
   </a>
 </mat-nav-list>

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 {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyListModule} from '@angular/material/legacy-list';
+import {MatButtonModule} from '@angular/material/button';
+import {MatListModule} from '@angular/material/list';
 import {
   BottomSheetOverviewExample,
   BottomSheetOverviewExampleSheet,
@@ -17,7 +17,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [MatBottomSheetModule, MatLegacyButtonModule, MatLegacyListModule],
+  imports: [MatBottomSheetModule, MatButtonModule, MatListModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

src/components-examples/material/button/button-harness/button-harness-example.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Testing with MatLegacyButtonHarness
+ * @title Testing with MatButtonHarness
  */
 @Component({
   selector: 'button-harness-example',