feat(material/radio): switch implementation to use MDC (#25409)

Switches the `material/radio` implementation to use MDC by default. Old implementation is still available under `material/legacy-radio`. BREAKING CHANGE: - DOM and CSS classes for `mat-radio-group` and `mat-radio-button` have changes. - Typescript API is largely the same but may have minor differences.
angular · Aug 8, 2022 · 4a6a0f1 · 4a6a0f1
1 parent f9a4b97
commit 4a6a0f1
Show file tree

Hide file tree

Showing 108 changed files with 1,258 additions and 1,127 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -23,7 +23,7 @@
 /src/material/legacy-prebuilt-themes/**            @andrewseguin
 /src/material/legacy-progress-bar/**                      @andrewseguin @crisbeto
 /src/material/progress-spinner/**                  @andrewseguin @crisbeto
-/src/material/radio/**                             @andrewseguin @devversion
+/src/material/legacy-radio/**                      @andrewseguin @devversion
 /src/material/schematics/**                        @devversion @andrewseguin
 /src/material/legacy-select/**                     @crisbeto
 /src/material/select/**                            @crisbeto
@@ -124,7 +124,7 @@
 /src/material-experimental/mdc-paginator/**            @crisbeto
 /src/material-experimental/mdc-progress-spinner/**     @andrewseguin
 /src/material/progress-bar/**         @andrewseguin
-/src/material-experimental/mdc-radio/**                @mmalerba
+/src/material/radio/**                                 @mmalerba
 /src/material-experimental/mdc-snack-bar/**            @andrewseguin
 /src/material/slide-toggle/**         @crisbeto
 /src/material-experimental/mdc-slider/**               @devversion
@@ -339,6 +339,7 @@
 /tools/public_api_guard/material/legacy-progress-bar**    @andrewseguin @crisbeto
 /tools/public_api_guard/material/progress-spinner**@andrewseguin @crisbeto
 /tools/public_api_guard/material/radio**           @andrewseguin @devversion
+/tools/public_api_guard/material/legacy-radio**    @andrewseguin @devversion
 /tools/public_api_guard/material/legacy-select**   @crisbeto
 /tools/public_api_guard/material/sidenav**         @mmalerba
 /tools/public_api_guard/material/legacy-slide-toggle**    @devversion

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -52,7 +52,6 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-paginator',
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
-    'material-experimental/mdc-radio',
     'material/slide-toggle',
     'material-experimental/mdc-slider',
     'material-experimental/mdc-snack-bar',
@@ -95,6 +94,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/legacy-progress-bar',
     'material/progress-spinner',
     'material/radio',
+    'material/legacy-radio',
     'material/schematics',
     'material/select',
     'material/legacy-select',

diff --git a/integration/harness-e2e-cli/e2e/radio-harness.spec.ts b/integration/harness-e2e-cli/e2e/radio-harness.spec.ts
@@ -1,4 +1,4 @@
-import {MatRadioGroupHarness} from '@angular/material/radio/testing';
+import {MatLegacyRadioGroupHarness} from '@angular/material/legacy-radio/testing';
 import {SeleniumWebDriverHarnessEnvironment} from '@angular/cdk/testing/selenium-webdriver';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {configureDriver} from './driver.js';
@@ -18,7 +18,7 @@ describe('app test', () => {
   });
 
   it('should work', async () => {
-    const group = await loader.getHarness(MatRadioGroupHarness);
+    const group = await loader.getHarness(MatLegacyRadioGroupHarness);
 
     expect(group).toBeDefined();
     expect(await group.getCheckedValue()).toBe(null);

diff --git a/integration/harness-e2e-cli/src/app/app.module.ts b/integration/harness-e2e-cli/src/app/app.module.ts
@@ -3,11 +3,11 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 import {AppComponent} from './app.component';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [MatRadioModule, NoopAnimationsModule, BrowserModule],
+  imports: [MatLegacyRadioModule, NoopAnimationsModule, BrowserModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/integration/size-test/material/radio/BUILD.bazel b/integration/size-test/material/radio/BUILD.bazel
@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
 size_test(
     name = "without-group",
     file = "without-group.ts",
-    deps = ["//src/material/radio"],
+    deps = ["//src/material/legacy-radio"],
 )
diff --git a/integration/size-test/material/radio/without-group.ts b/integration/size-test/material/radio/without-group.ts
@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 
 /**
  * Basic component using `MatRadioButton`. Doesn't use a `MatRadioGroup`, so the class
@@ -13,7 +13,7 @@ import {MatRadioModule} from '@angular/material/radio';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatRadioModule],
+  imports: [MatLegacyRadioModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

diff --git a/src/components-examples/material/checkbox/BUILD.bazel b/src/components-examples/material/checkbox/BUILD.bazel
@@ -18,7 +18,7 @@ ng_module(
         "//src/material/legacy-card",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-checkbox/testing",
-        "//src/material/radio",
+        "//src/material/legacy-radio",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

diff --git a/src/components-examples/material/checkbox/index.ts b/src/components-examples/material/checkbox/index.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
 import {CheckboxHarnessExample} from './checkbox-harness/checkbox-harness-example';
 import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
@@ -28,7 +28,7 @@ const EXAMPLES = [
     CommonModule,
     MatLegacyCardModule,
     MatLegacyCheckboxModule,
-    MatRadioModule,
+    MatLegacyRadioModule,
     FormsModule,
     ReactiveFormsModule,
   ],

diff --git a/src/components-examples/material/form-field/BUILD.bazel b/src/components-examples/material/form-field/BUILD.bazel
@@ -22,7 +22,7 @@ ng_module(
         "//src/material/input",
         "//src/material/input/testing",
         "//src/material/legacy-checkbox",
-        "//src/material/radio",
+        "//src/material/legacy-radio",
         "//src/material/select",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/src/components-examples/material/form-field/index.ts b/src/components-examples/material/form-field/index.ts
@@ -6,7 +6,7 @@ import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {MatSelectModule} from '@angular/material/select';
 import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example';
 import {
@@ -54,7 +54,7 @@ const EXAMPLES = [
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    MatRadioModule,
+    MatLegacyRadioModule,
     MatSelectModule,
     ReactiveFormsModule,
   ],

diff --git a/src/components-examples/material/progress-bar/BUILD.bazel b/src/components-examples/material/progress-bar/BUILD.bazel
@@ -18,7 +18,7 @@ ng_module(
         "//src/material/legacy-card",
         "//src/material/legacy-progress-bar",
         "//src/material/legacy-progress-bar/testing",
-        "//src/material/radio",
+        "//src/material/legacy-radio",
         "//src/material/slider",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/src/components-examples/material/progress-bar/index.ts b/src/components-examples/material/progress-bar/index.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {MatSliderModule} from '@angular/material/slider';
 import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example';
 import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example';
@@ -35,7 +35,7 @@ const EXAMPLES = [
     CommonModule,
     MatLegacyCardModule,
     MatLegacyProgressBarModule,
-    MatRadioModule,
+    MatLegacyRadioModule,
     MatSliderModule,
     FormsModule,
   ],

diff --git a/src/components-examples/material/progress-spinner/BUILD.bazel b/src/components-examples/material/progress-spinner/BUILD.bazel
@@ -16,9 +16,9 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/legacy-card",
+        "//src/material/legacy-radio",
         "//src/material/progress-spinner",
         "//src/material/progress-spinner/testing",
-        "//src/material/radio",
         "//src/material/slider",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/src/components-examples/material/progress-spinner/index.ts b/src/components-examples/material/progress-spinner/index.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {MatSliderModule} from '@angular/material/slider';
 import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example';
 import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example';
@@ -26,7 +26,7 @@ const EXAMPLES = [
     CommonModule,
     MatLegacyCardModule,
     MatProgressSpinnerModule,
-    MatRadioModule,
+    MatLegacyRadioModule,
     MatSliderModule,
     FormsModule,
   ],

diff --git a/src/components-examples/material/radio/BUILD.bazel b/src/components-examples/material/radio/BUILD.bazel
@@ -15,8 +15,8 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/radio",
-        "//src/material/radio/testing",
+        "//src/material/legacy-radio",
+        "//src/material/legacy-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/radio",
-        "//src/material/radio/testing",
+        "//src/material/legacy-radio",
+        "//src/material/legacy-radio/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
     ],

diff --git a/src/components-examples/material/radio/index.ts b/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 {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-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, MatRadioModule, FormsModule],
+  imports: [ReactiveFormsModule, CommonModule, MatLegacyRadioModule, FormsModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

diff --git a/src/components-examples/material/sidenav/BUILD.bazel b/src/components-examples/material/sidenav/BUILD.bazel
@@ -19,9 +19,9 @@ ng_module(
         "//src/material/button",
         "//src/material/icon",
         "//src/material/legacy-checkbox",
+        "//src/material/legacy-radio",
         "//src/material/legacy-select",
         "//src/material/list",
-        "//src/material/radio",
         "//src/material/sidenav",
         "//src/material/toolbar",
         "@npm//@angular/forms",

diff --git a/src/components-examples/material/sidenav/index.ts b/src/components-examples/material/sidenav/index.ts
@@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatToolbarModule} from '@angular/material/toolbar';
@@ -57,7 +57,7 @@ const EXAMPLES = [
     MatLegacyCheckboxModule,
     MatIconModule,
     MatListModule,
-    MatRadioModule,
+    MatLegacyRadioModule,
     MatSidenavModule,
     MatLegacySelectModule,
     MatToolbarModule,

diff --git a/src/components-examples/material/slide-toggle/BUILD.bazel b/src/components-examples/material/slide-toggle/BUILD.bazel
@@ -18,9 +18,9 @@ ng_module(
         "//src/material/button",
         "//src/material/legacy-card",
         "//src/material/legacy-checkbox",
+        "//src/material/legacy-radio",
         "//src/material/legacy-slide-toggle",
         "//src/material/legacy-slide-toggle/testing",
-        "//src/material/radio",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

diff --git a/src/components-examples/material/slide-toggle/index.ts b/src/components-examples/material/slide-toggle/index.ts
@@ -3,7 +3,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example';
 import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
@@ -30,7 +30,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatLegacyCardModule,
     MatLegacyCheckboxModule,
-    MatRadioModule,
+    MatLegacyRadioModule,
     MatLegacySlideToggleModule,
     ReactiveFormsModule,
   ],

diff --git a/src/components-examples/material/stepper/BUILD.bazel b/src/components-examples/material/stepper/BUILD.bazel
@@ -20,7 +20,7 @@ ng_module(
         "//src/material/button",
         "//src/material/icon",
         "//src/material/legacy-input",
-        "//src/material/radio",
+        "//src/material/legacy-radio",
         "//src/material/stepper",
         "//src/material/stepper/testing",
         "@npm//@angular/common",

diff --git a/src/components-examples/material/stepper/index.ts b/src/components-examples/material/stepper/index.ts
@@ -4,7 +4,7 @@ import {CommonModule} from '@angular/common';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {MatStepperModule} from '@angular/material/stepper';
 import {StepperEditableExample} from './stepper-editable/stepper-editable-example';
 import {StepperErrorsExample} from './stepper-errors/stepper-errors-example';
@@ -58,7 +58,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatIconModule,
     MatLegacyInputModule,
-    MatRadioModule,
+    MatLegacyRadioModule,
     MatStepperModule,
     ReactiveFormsModule,
     CommonModule,

diff --git a/src/dev-app/baseline/BUILD.bazel b/src/dev-app/baseline/BUILD.bazel
@@ -14,8 +14,8 @@ ng_module(
         "//src/material/legacy-checkbox",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-radio",
         "//src/material/legacy-select",
-        "//src/material/radio",
         "//src/material/toolbar",
     ],
 )