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

.github/CODEOWNERS

@@ -189,6 +189,7 @@
 /src/dev-app/legacy-input/**                                @mmalerba
 /src/dev-app/legacy-list/**                                 @mmalerba
 /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
@@ -201,7 +202,6 @@
 /src/dev-app/mdc-menu/**                                    @crisbeto
 /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
@@ -215,7 +215,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

@@ -53,6 +53,7 @@ ng_module(
         "//src/dev-app/legacy-input",
         "//src/dev-app/legacy-list",
         "//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-menu",
         "//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

@@ -109,7 +109,6 @@ export class DevAppLayout {
     {name: 'MDC Menu', route: '/mdc-menu'},
     {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 Input', route: '/legacy-input'},
     {name: 'Legacy List', route: '/legacy-list'},
     {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 → 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">

src/dev-app/mdc-radio/mdc-radio-demo.ts → src/dev-app/legacy-radio/legacy-radio-demo.ts

@@ -7,20 +7,26 @@
  */
 
 import {Component} from '@angular/core';
-import {MatRadioModule} from '@angular/material/radio';
-import {FormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
 import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 
 @Component({
-  selector: 'mdc-radio-demo',
-  templateUrl: 'mdc-radio-demo.html',
-  styleUrls: ['mdc-radio-demo.css'],
+  selector: 'legacy-radio-demo',
+  templateUrl: 'legacy-radio-demo.html',
+  styleUrls: ['legacy-radio-demo.css'],
   standalone: true,
-  imports: [CommonModule, MatRadioModule, FormsModule, MatButtonModule, MatCheckboxModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatLegacyButtonModule,
+    MatLegacyCheckboxModule,
+    MatLegacyRadioModule,
+  ],
 })
-export class MdcRadioDemo {
+export class LegacyRadioDemo {
   isAlignEnd: boolean = false;
   isDisabled: boolean = false;
   isRequired: boolean = false;

src/dev-app/radio/BUILD.bazel

@@ -10,9 +10,9 @@ ng_module(
         ":radio_demo_scss",
     ],
     deps = [
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-radio",
+        "//src/material/button",
+        "//src/material/checkbox",
+        "//src/material/radio",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/radio/radio-demo.html

@@ -41,15 +41,16 @@ <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">

src/dev-app/radio/radio-demo.ts

@@ -7,24 +7,18 @@
  */
 
 import {Component} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {MatRadioModule} from '@angular/material/radio';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'radio-demo',
   templateUrl: 'radio-demo.html',
   styleUrls: ['radio-demo.css'],
   standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
-    MatLegacyRadioModule,
-  ],
+  imports: [CommonModule, MatRadioModule, FormsModule, MatButtonModule, MatCheckboxModule],
 })
 export class RadioDemo {
   isAlignEnd: boolean = false;

src/dev-app/routes.ts

@@ -197,8 +197,8 @@ export const DEV_APP_ROUTES: Routes = [
       ),
   },
   {
-    path: 'mdc-radio',
-    loadComponent: () => import('./mdc-radio/mdc-radio-demo').then(m => m.MdcRadioDemo),
+    path: 'legacy-radio',
+    loadComponent: () => import('./legacy-radio/legacy-radio-demo').then(m => m.LegacyRadioDemo),
   },
   {
     path: 'select',