docs(material/select): switch examples to use MDC

Switches the select examples to use MDC and fixes a minor visual issue.

Author: crisbeto

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

@@ -16,10 +16,10 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
-        "//src/material/legacy-select/testing",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+        "//src/material/select/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":select",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-select",
-        "//src/material/legacy-select/testing",
+        "//src/material/select",
+        "//src/material/select/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

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

@@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 import {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example';
 import {SelectDisabledExample} from './select-disabled/select-disabled-example';
 import {SelectErrorStateMatcherExample} from './select-error-state-matcher/select-error-state-matcher-example';
@@ -19,7 +19,7 @@ import {SelectValueBindingExample} from './select-value-binding/select-value-bin
 import {SelectReactiveFormExample} from './select-reactive-form/select-reactive-form-example';
 import {SelectInitialValueExample} from './select-initial-value/select-initial-value-example';
 import {SelectHarnessExample} from './select-harness/select-harness-example';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 
 export {
   SelectCustomTriggerExample,
@@ -62,10 +62,10 @@ const EXAMPLES = [
     CommonModule,
     FormsModule,
     MatCheckboxModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
+    MatInputModule,
+    MatSelectModule,
     ReactiveFormsModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

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

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing';
+import {MatSelectHarness} from '@angular/material/select/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {SelectHarnessExample} from './select-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -12,7 +12,7 @@ describe('SelectHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacySelectModule, NoopAnimationsModule],
+      imports: [MatSelectModule, NoopAnimationsModule],
       declarations: [SelectHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(SelectHarnessExample);
@@ -21,18 +21,18 @@ describe('SelectHarnessExample', () => {
   });
 
   it('should load all select harnesses', async () => {
-    const selects = await loader.getAllHarnesses(MatLegacySelectHarness);
+    const selects = await loader.getAllHarnesses(MatSelectHarness);
     expect(selects.length).toBe(1);
   });
 
   it('should be able to check whether a select is in multi-selection mode', async () => {
-    const select = await loader.getHarness(MatLegacySelectHarness);
+    const select = await loader.getHarness(MatSelectHarness);
 
     expect(await select.isMultiple()).toBe(false);
   });
 
   it('should be able to open and close a select', async () => {
-    const select = await loader.getHarness(MatLegacySelectHarness);
+    const select = await loader.getHarness(MatSelectHarness);
 
     expect(await select.isOpen()).toBe(false);
 
@@ -44,7 +44,7 @@ describe('SelectHarnessExample', () => {
   });
 
   it('should be able to get the value text from a select', async () => {
-    const select = await loader.getHarness(MatLegacySelectHarness);
+    const select = await loader.getHarness(MatSelectHarness);
     await select.open();
     const options = await select.getOptions();
 

src/components-examples/material/select/select-panel-class/select-panel-class-example.css

@@ -1,11 +1,11 @@
-.example-panel-red.mat-select-panel {
+.example-panel-red.mat-mdc-select-panel {
   background: rgba(255, 0, 0, 0.5);
 }
 
-.example-panel-green.mat-select-panel {
+.example-panel-green.mat-mdc-select-panel {
   background: rgba(0, 255, 0, 0.5);
 }
 
-.example-panel-blue.mat-select-panel {
+.example-panel-blue.mat-mdc-select-panel {
   background: rgba(0, 0, 255, 0.5);
 }