docs(material/radio): switch examples and demo to MDC (#25572)

Author: amysorto

.github/CODEOWNERS

@@ -190,6 +190,7 @@
 /src/dev-app/legacy-list/**                                 @mmalerba
 /src/dev-app/legacy-menu/**                                 @crisbeto
 /src/dev-app/legacy-paginator/**                            @crisbeto
+/src/dev-app/legacy-radio/**                                @andrewseguin @devversion
 /src/dev-app/legacy-select/**                               @crisbeto
 /src/dev-app/legacy-snack-bar/**                            @andrewseguin
 /src/dev-app/legacy-table/**                                @andrewseguin
@@ -202,7 +203,6 @@
 /src/dev-app/mdc-chips/**                                   @mmalerba
 /src/dev-app/mdc-progress-bar/**                            @crisbeto
 /src/dev-app/mdc-progress-spinner/**                        @mmalerba
-/src/dev-app/mdc-radio/**                                   @mmalerba
 /src/dev-app/mdc-slide-toggle/**                            @crisbeto
 /src/dev-app/mdc-slider/**                                  @devversion
 /src/dev-app/mdc-snack-bar/**                               @andrewseguin
@@ -216,7 +216,7 @@
 /src/dev-app/portal/**                                      @andrewseguin
 /src/dev-app/progress-bar/**                                @andrewseguin @crisbeto
 /src/dev-app/progress-spinner/**                            @andrewseguin @crisbeto
-/src/dev-app/radio/**                                       @andrewseguin @devversion
+/src/dev-app/radio/**                                       @mmalerba
 /src/dev-app/ripple/**                                      @devversion
 /src/dev-app/screen-type/**                                 @andrewseguin
 /src/dev-app/select/**                                      @crisbeto

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

@@ -15,8 +15,8 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-radio",
-        "//src/material/legacy-radio/testing",
+        "//src/material/radio",
+        "//src/material/radio/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -40,8 +40,8 @@ ng_test_library(
         ":radio",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-radio",
-        "//src/material/legacy-radio/testing",
+        "//src/material/radio",
+        "//src/material/radio/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
     ],

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

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatRadioModule} from '@angular/material/radio';
 import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example';
 import {RadioOverviewExample} from './radio-overview/radio-overview-example';
 import {RadioHarnessExample} from './radio-harness/radio-harness-example';
@@ -11,7 +11,7 @@ export {RadioHarnessExample, RadioNgModelExample, RadioOverviewExample};
 const EXAMPLES = [RadioHarnessExample, RadioNgModelExample, RadioOverviewExample];
 
 @NgModule({
-  imports: [ReactiveFormsModule, CommonModule, MatLegacyRadioModule, FormsModule],
+  imports: [ReactiveFormsModule, CommonModule, MatRadioModule, FormsModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -1,11 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {
-  MatLegacyRadioButtonHarness,
-  MatLegacyRadioGroupHarness,
-} from '@angular/material/legacy-radio/testing';
+import {MatRadioButtonHarness, MatRadioGroupHarness} from '@angular/material/radio/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatRadioModule} from '@angular/material/radio';
 import {RadioHarnessExample} from './radio-harness-example';
 import {ReactiveFormsModule} from '@angular/forms';
 
@@ -15,7 +12,7 @@ describe('RadioHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyRadioModule, ReactiveFormsModule],
+      imports: [MatRadioModule, ReactiveFormsModule],
       declarations: [RadioHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(RadioHarnessExample);
@@ -24,18 +21,18 @@ describe('RadioHarnessExample', () => {
   });
 
   it('should load all radio-group harnesses', async () => {
-    const groups = await loader.getAllHarnesses(MatLegacyRadioGroupHarness);
+    const groups = await loader.getAllHarnesses(MatRadioGroupHarness);
     expect(groups.length).toBe(1);
   });
 
   it('should get name of radio-group', async () => {
-    const group = await loader.getHarness(MatLegacyRadioGroupHarness);
+    const group = await loader.getHarness(MatRadioGroupHarness);
     const name = await group.getName();
     expect(name).toBe('flavors');
   });
 
   it('should check radio button', async () => {
-    const buttons = await loader.getAllHarnesses(MatLegacyRadioButtonHarness);
+    const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
     expect(await buttons[0].isChecked()).toBeTrue();
 
     await buttons[1].check();
@@ -45,7 +42,7 @@ describe('RadioHarnessExample', () => {
 
   it('should get label text of buttons', async () => {
     const [firstRadio, secondRadio, thirdRadio] = await loader.getAllHarnesses(
-      MatLegacyRadioButtonHarness,
+      MatRadioButtonHarness,
     );
     expect(await firstRadio.getLabelText()).toBe('Chocolate');
     expect(await secondRadio.getLabelText()).toBe('Vanilla');

src/components-examples/material/radio/radio-overview/radio-overview-example.css

@@ -1,3 +1,3 @@
-.mat-radio-button ~ .mat-radio-button {
+.mat-mdc-radio-button ~ .mat-mdc-radio-button {
   margin-left: 16px;
 }

src/dev-app/BUILD.bazel

@@ -55,6 +55,7 @@ ng_module(
         "//src/dev-app/legacy-list",
         "//src/dev-app/legacy-menu",
         "//src/dev-app/legacy-paginator",
+        "//src/dev-app/legacy-radio",
         "//src/dev-app/legacy-select",
         "//src/dev-app/legacy-snack-bar",
         "//src/dev-app/legacy-table",
@@ -65,7 +66,6 @@ ng_module(
         "//src/dev-app/mdc-chips",
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-progress-spinner",
-        "//src/dev-app/mdc-radio",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-slider",
         "//src/dev-app/mdc-tabs",

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

@@ -107,7 +107,6 @@ export class DevAppLayout {
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
-    {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
@@ -119,6 +118,7 @@ export class DevAppLayout {
     {name: 'Legacy List', route: '/legacy-list'},
     {name: 'Legacy Menu', route: '/legacy-menu'},
     {name: 'Legacy Paginator', route: '/legacy-paginator'},
+    {name: 'Legacy Radio', route: '/legacy-radio'},
     {name: 'Legacy Select', route: '/legacy-select'},
     {name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},
     {name: 'Legacy Table', route: '/legacy-table'},

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

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

src/dev-app/mdc-radio/mdc-radio-demo.html renamed to src/dev-app/legacy-radio/legacy-radio-demo.html

@@ -41,16 +41,15 @@ <h1>Dynamic Example</h1>
     <span><mat-checkbox [(ngModel)]="isAlignEnd">Align end</mat-checkbox></span>
   </div>
   <mat-radio-group
-      name="my_options"
-      [disabled]="isDisabled"
-      [required]="isRequired"
-      [labelPosition]="isAlignEnd ? 'after' : 'before'">
+    name="my_options"
+    [disabled]="isDisabled"
+    [required]="isRequired"
+    [labelPosition]="isAlignEnd ? 'after' : 'before'">
     <mat-radio-button value="option_1">Option 1</mat-radio-button>
     <mat-radio-button value="option_2">Option 2</mat-radio-button>
     <mat-radio-button value="option_3">Option 3</mat-radio-button>
   </mat-radio-group>
 </section>
-
 <h1>Favorite Season Example</h1>
 <h2>Dynamic Example with two-way data-binding</h2>
 <section class="demo-section">