feat: switch to MDC components (#1174)

Switches the docs site to use the MDC components and fixes some visual issues that came up as a result.

Author: crisbeto

angular.json

@@ -5,6 +5,7 @@
   "projects": {
     "material-angular-io": {
       "root": "",
+      "sourceRoot": "./src",
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -282,7 +283,10 @@
             "karmaConfig": "scenes/karma.conf.js",
             "assets": ["scenes/src/favicon.ico", "scenes/src/assets"],
             "styles": ["scenes/src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            }
           }
         },
         "lint": {

package.json

@@ -34,37 +34,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.0.0-next.4",
-    "@angular/cdk": "^15.0.0-next.3",
-    "@angular/cdk-experimental": "^15.0.0-next.3",
-    "@angular/common": "^15.0.0-next.4",
-    "@angular/compiler": "^15.0.0-next.4",
-    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#aef795ccdeb37f1399c2fa5b03425f426c913dd5",
-    "@angular/core": "^15.0.0-next.4",
-    "@angular/forms": "^15.0.0-next.4",
-    "@angular/google-maps": "^15.0.0-next.3",
-    "@angular/localize": "^15.0.0-next.4",
-    "@angular/material": "^15.0.0-next.3",
-    "@angular/material-experimental": "^15.0.0-next.3",
-    "@angular/material-moment-adapter": "^15.0.0-next.3",
-    "@angular/platform-browser": "^15.0.0-next.4",
-    "@angular/platform-browser-dynamic": "^15.0.0-next.4",
-    "@angular/router": "^15.0.0-next.4",
-    "@angular/youtube-player": "^15.0.0-next.3",
+    "@angular/animations": "^15.0.0-next.5",
+    "@angular/cdk": "^15.0.0-next.4",
+    "@angular/cdk-experimental": "^15.0.0-next.4",
+    "@angular/common": "^15.0.0-next.5",
+    "@angular/compiler": "^15.0.0-next.5",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#fba753a1fbf2d13ccbd0b5f223febbd9ebb1216c",
+    "@angular/core": "^15.0.0-next.5",
+    "@angular/forms": "^15.0.0-next.5",
+    "@angular/google-maps": "^15.0.0-next.4",
+    "@angular/localize": "^15.0.0-next.5",
+    "@angular/material": "^15.0.0-next.4",
+    "@angular/material-experimental": "^15.0.0-next.4",
+    "@angular/material-moment-adapter": "^15.0.0-next.4",
+    "@angular/platform-browser": "^15.0.0-next.5",
+    "@angular/platform-browser-dynamic": "^15.0.0-next.5",
+    "@angular/router": "^15.0.0-next.5",
+    "@angular/youtube-player": "^15.0.0-next.4",
     "@stackblitz/sdk": "^1.5.2",
     "moment": "^2.29.1",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.0-next.3",
+    "@angular-devkit/build-angular": "^15.0.0-next.4",
     "@angular-eslint/builder": "^14.0.0",
     "@angular-eslint/eslint-plugin": "^14.0.0",
     "@angular-eslint/eslint-plugin-template": "^14.0.0",
     "@angular-eslint/template-parser": "^14.0.0",
-    "@angular/cli": "^15.0.0-next.3",
-    "@angular/compiler-cli": "^15.0.0-next.4",
+    "@angular/cli": "^15.0.0-next.4",
+    "@angular/compiler-cli": "^15.0.0-next.5",
     "@types/imagemin": "^7.0.0",
     "@types/jasmine": "^3.7.7",
     "@types/node": "^14.14.22",

scenes/src/app/app.module.ts

@@ -5,19 +5,19 @@ import {NgModule} from '@angular/core';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {MatNativeDateModule} from '@angular/material/core';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {SceneOverlayContainer} from './scene-overlay-container';
 import {DOCUMENT} from '@angular/common';
-import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacyPaginatorModule as MatPaginatorModule} from '@angular/material/legacy-paginator';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatPaginatorModule} from '@angular/material/paginator';
 import {BottomSheetSceneModule} from './scenes/bottom-sheet/bottom-sheet-scene';
 import {GridListSceneModule} from './scenes/grid-list/grid-list-scene';
 import {SnackBarSceneModule} from './scenes/snack-bar/snack-bar-scene';
 import {SelectSceneModule} from './scenes/select/select-scene';
-import {MatLegacyAutocompleteModule as MatAutocompleteModule} from '@angular/material/legacy-autocomplete';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {AutocompleteSceneModule} from './scenes/autocomplete/autocomplete-scene';
 import {DialogSceneModule} from './scenes/dialog/dialog-scene';
 import {FormFieldSceneModule} from './scenes/form-field/form-field-scene';

scenes/src/app/scenes/autocomplete/autocomplete-scene.ts

@@ -6,9 +6,9 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInput as MatInput, MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
-import {MatLegacyAutocompleteModule as MatAutocompleteModule} from '@angular/material/legacy-autocomplete';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInput, MatInputModule} from '@angular/material/input';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {CommonModule, } from '@angular/common';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 

scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.ts

@@ -1,7 +1,7 @@
 import {AfterViewInit, Component, NgModule, ViewEncapsulation} from '@angular/core';
 import {MatBottomSheet, MatBottomSheetModule} from '@angular/material/bottom-sheet';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyListModule as MatListModule} from '@angular/material/legacy-list';
+import {MatListModule} from '@angular/material/list';
 
 
 @Component({

scenes/src/app/scenes/button/button-scene.scss

@@ -8,6 +8,6 @@ div.scene-buttons button {
   margin: 16px;
 }
 
-div.scene-buttons .mat-icon-button {
+div.scene-buttons .mat-mdc-icon-button {
   margin: 0 25px;
 }

scenes/src/app/scenes/button/button-scene.ts

@@ -1,5 +1,5 @@
 import {Component, NgModule, ViewEncapsulation} from '@angular/core';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 
 @Component({

scenes/src/app/scenes/card/card-scene.html

@@ -1,5 +1,5 @@
 <div class="scene-card">
-  <mat-card>
+  <mat-card appearance="outlined">
     <mat-card-title class="docs-scene-card-title">
     </mat-card-title>
 

scenes/src/app/scenes/card/card-scene.ts

@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {InputSceneModule} from '../placeholder/placeholder-scene';
 
 @Component({

scenes/src/app/scenes/checkbox/checkbox-scene.scss

@@ -6,10 +6,12 @@
   margin-left: -20px;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
 .mat-checkbox-layout {
   padding: 5px 0;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
 .mat-checkbox-label {
   font-size: 20px;
 }