Skip to content

Commit 4a6a0f1

Browse files
crisbetocrisbeto
authored
feat(material/radio): switch implementation to use MDC (angular#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.
1 parent f9a4b97 commit 4a6a0f1

File tree

108 files changed

+1258
-1127
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+1258
-1127
lines changed

‎.github/CODEOWNERS

+3-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
/src/material/legacy-prebuilt-themes/** @andrewseguin
2424
/src/material/legacy-progress-bar/** @andrewseguin @crisbeto
2525
/src/material/progress-spinner/** @andrewseguin @crisbeto
26-
/src/material/radio/** @andrewseguin @devversion
26+
/src/material/legacy-radio/** @andrewseguin @devversion
2727
/src/material/schematics/** @devversion @andrewseguin
2828
/src/material/legacy-select/** @crisbeto
2929
/src/material/select/** @crisbeto
@@ -124,7 +124,7 @@
124124
/src/material-experimental/mdc-paginator/** @crisbeto
125125
/src/material-experimental/mdc-progress-spinner/** @andrewseguin
126126
/src/material/progress-bar/** @andrewseguin
127-
/src/material-experimental/mdc-radio/** @mmalerba
127+
/src/material/radio/** @mmalerba
128128
/src/material-experimental/mdc-snack-bar/** @andrewseguin
129129
/src/material/slide-toggle/** @crisbeto
130130
/src/material-experimental/mdc-slider/** @devversion
@@ -339,6 +339,7 @@
339339
/tools/public_api_guard/material/legacy-progress-bar** @andrewseguin @crisbeto
340340
/tools/public_api_guard/material/progress-spinner**@andrewseguin @crisbeto
341341
/tools/public_api_guard/material/radio** @andrewseguin @devversion
342+
/tools/public_api_guard/material/legacy-radio** @andrewseguin @devversion
342343
/tools/public_api_guard/material/legacy-select** @crisbeto
343344
/tools/public_api_guard/material/sidenav** @mmalerba
344345
/tools/public_api_guard/material/legacy-slide-toggle** @devversion

‎.ng-dev/commit-message.mts

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ export const commitMessage: CommitMessageConfig = {
5252
'material-experimental/mdc-paginator',
5353
'material/progress-bar',
5454
'material-experimental/mdc-progress-spinner',
55-
'material-experimental/mdc-radio',
5655
'material/slide-toggle',
5756
'material-experimental/mdc-slider',
5857
'material-experimental/mdc-snack-bar',
@@ -95,6 +94,7 @@ export const commitMessage: CommitMessageConfig = {
9594
'material/legacy-progress-bar',
9695
'material/progress-spinner',
9796
'material/radio',
97+
'material/legacy-radio',
9898
'material/schematics',
9999
'material/select',
100100
'material/legacy-select',

‎integration/harness-e2e-cli/e2e/radio-harness.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {MatRadioGroupHarness} from '@angular/material/radio/testing';
1+
import {MatLegacyRadioGroupHarness} from '@angular/material/legacy-radio/testing';
22
import {SeleniumWebDriverHarnessEnvironment} from '@angular/cdk/testing/selenium-webdriver';
33
import {HarnessLoader} from '@angular/cdk/testing';
44
import {configureDriver} from './driver.js';
@@ -18,7 +18,7 @@ describe('app test', () => {
1818
});
1919

2020
it('should work', async () => {
21-
const group = await loader.getHarness(MatRadioGroupHarness);
21+
const group = await loader.getHarness(MatLegacyRadioGroupHarness);
2222

2323
expect(group).toBeDefined();
2424
expect(await group.getCheckedValue()).toBe(null);

‎integration/harness-e2e-cli/src/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import {BrowserModule} from '@angular/platform-browser';
33
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
44

55
import {AppComponent} from './app.component';
6-
import {MatRadioModule} from '@angular/material/radio';
6+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
77

88
@NgModule({
99
declarations: [AppComponent],
10-
imports: [MatRadioModule, NoopAnimationsModule, BrowserModule],
10+
imports: [MatLegacyRadioModule, NoopAnimationsModule, BrowserModule],
1111
bootstrap: [AppComponent],
1212
})
1313
export class AppModule {}

‎integration/size-test/material/radio/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
33
size_test(
44
name = "without-group",
55
file = "without-group.ts",
6-
deps = ["//src/material/radio"],
6+
deps = ["//src/material/legacy-radio"],
77
)

‎integration/size-test/material/radio/without-group.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, NgModule} from '@angular/core';
2-
import {MatRadioModule} from '@angular/material/radio';
2+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
33

44
/**
55
* Basic component using `MatRadioButton`. Doesn't use a `MatRadioGroup`, so the class
@@ -13,7 +13,7 @@ import {MatRadioModule} from '@angular/material/radio';
1313
export class TestComponent {}
1414

1515
@NgModule({
16-
imports: [MatRadioModule],
16+
imports: [MatLegacyRadioModule],
1717
declarations: [TestComponent],
1818
bootstrap: [TestComponent],
1919
})

‎src/components-examples/material/checkbox/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ ng_module(
1818
"//src/material/legacy-card",
1919
"//src/material/legacy-checkbox",
2020
"//src/material/legacy-checkbox/testing",
21-
"//src/material/radio",
21+
"//src/material/legacy-radio",
2222
"@npm//@angular/forms",
2323
"@npm//@angular/platform-browser",
2424
"@npm//@angular/platform-browser-dynamic",

‎src/components-examples/material/checkbox/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
44
import {MatLegacyCardModule} from '@angular/material/legacy-card';
55
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
6-
import {MatRadioModule} from '@angular/material/radio';
6+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
77
import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
88
import {CheckboxHarnessExample} from './checkbox-harness/checkbox-harness-example';
99
import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
@@ -28,7 +28,7 @@ const EXAMPLES = [
2828
CommonModule,
2929
MatLegacyCardModule,
3030
MatLegacyCheckboxModule,
31-
MatRadioModule,
31+
MatLegacyRadioModule,
3232
FormsModule,
3333
ReactiveFormsModule,
3434
],

‎src/components-examples/material/form-field/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ ng_module(
2222
"//src/material/input",
2323
"//src/material/input/testing",
2424
"//src/material/legacy-checkbox",
25-
"//src/material/radio",
25+
"//src/material/legacy-radio",
2626
"//src/material/select",
2727
"@npm//@angular/forms",
2828
"@npm//@angular/platform-browser",

‎src/components-examples/material/form-field/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
66
import {MatFormFieldModule} from '@angular/material/form-field';
77
import {MatIconModule} from '@angular/material/icon';
88
import {MatInputModule} from '@angular/material/input';
9-
import {MatRadioModule} from '@angular/material/radio';
9+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
1010
import {MatSelectModule} from '@angular/material/select';
1111
import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example';
1212
import {
@@ -54,7 +54,7 @@ const EXAMPLES = [
5454
MatFormFieldModule,
5555
MatIconModule,
5656
MatInputModule,
57-
MatRadioModule,
57+
MatLegacyRadioModule,
5858
MatSelectModule,
5959
ReactiveFormsModule,
6060
],

‎src/components-examples/material/progress-bar/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ ng_module(
1818
"//src/material/legacy-card",
1919
"//src/material/legacy-progress-bar",
2020
"//src/material/legacy-progress-bar/testing",
21-
"//src/material/radio",
21+
"//src/material/legacy-radio",
2222
"//src/material/slider",
2323
"@npm//@angular/forms",
2424
"@npm//@angular/platform-browser",

‎src/components-examples/material/progress-bar/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
33
import {FormsModule} from '@angular/forms';
44
import {MatLegacyCardModule} from '@angular/material/legacy-card';
55
import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
6-
import {MatRadioModule} from '@angular/material/radio';
6+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
77
import {MatSliderModule} from '@angular/material/slider';
88
import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example';
99
import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example';
@@ -35,7 +35,7 @@ const EXAMPLES = [
3535
CommonModule,
3636
MatLegacyCardModule,
3737
MatLegacyProgressBarModule,
38-
MatRadioModule,
38+
MatLegacyRadioModule,
3939
MatSliderModule,
4040
FormsModule,
4141
],

‎src/components-examples/material/progress-spinner/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ ng_module(
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
1818
"//src/material/legacy-card",
19+
"//src/material/legacy-radio",
1920
"//src/material/progress-spinner",
2021
"//src/material/progress-spinner/testing",
21-
"//src/material/radio",
2222
"//src/material/slider",
2323
"@npm//@angular/forms",
2424
"@npm//@angular/platform-browser",

‎src/components-examples/material/progress-spinner/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
33
import {FormsModule} from '@angular/forms';
44
import {MatLegacyCardModule} from '@angular/material/legacy-card';
55
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
6-
import {MatRadioModule} from '@angular/material/radio';
6+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
77
import {MatSliderModule} from '@angular/material/slider';
88
import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example';
99
import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example';
@@ -26,7 +26,7 @@ const EXAMPLES = [
2626
CommonModule,
2727
MatLegacyCardModule,
2828
MatProgressSpinnerModule,
29-
MatRadioModule,
29+
MatLegacyRadioModule,
3030
MatSliderModule,
3131
FormsModule,
3232
],

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18-
"//src/material/radio",
19-
"//src/material/radio/testing",
18+
"//src/material/legacy-radio",
19+
"//src/material/legacy-radio/testing",
2020
"@npm//@angular/forms",
2121
"@npm//@angular/platform-browser",
2222
"@npm//@angular/platform-browser-dynamic",
@@ -40,8 +40,8 @@ ng_test_library(
4040
":radio",
4141
"//src/cdk/testing",
4242
"//src/cdk/testing/testbed",
43-
"//src/material/radio",
44-
"//src/material/radio/testing",
43+
"//src/material/legacy-radio",
44+
"//src/material/legacy-radio/testing",
4545
"@npm//@angular/forms",
4646
"@npm//@angular/platform-browser-dynamic",
4747
],

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4-
import {MatRadioModule} from '@angular/material/radio';
4+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
55
import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example';
66
import {RadioOverviewExample} from './radio-overview/radio-overview-example';
77
import {RadioHarnessExample} from './radio-harness/radio-harness-example';
@@ -11,7 +11,7 @@ export {RadioHarnessExample, RadioNgModelExample, RadioOverviewExample};
1111
const EXAMPLES = [RadioHarnessExample, RadioNgModelExample, RadioOverviewExample];
1212

1313
@NgModule({
14-
imports: [ReactiveFormsModule, CommonModule, MatRadioModule, FormsModule],
14+
imports: [ReactiveFormsModule, CommonModule, MatLegacyRadioModule, FormsModule],
1515
declarations: EXAMPLES,
1616
exports: EXAMPLES,
1717
})

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

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatRadioButtonHarness, MatRadioGroupHarness} from '@angular/material/radio/testing';
3+
import {
4+
MatLegacyRadioButtonHarness,
5+
MatLegacyRadioGroupHarness,
6+
} from '@angular/material/legacy-radio/testing';
47
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatRadioModule} from '@angular/material/radio';
8+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
69
import {RadioHarnessExample} from './radio-harness-example';
710
import {ReactiveFormsModule} from '@angular/forms';
811

@@ -12,7 +15,7 @@ describe('RadioHarnessExample', () => {
1215

1316
beforeEach(async () => {
1417
await TestBed.configureTestingModule({
15-
imports: [MatRadioModule, ReactiveFormsModule],
18+
imports: [MatLegacyRadioModule, ReactiveFormsModule],
1619
declarations: [RadioHarnessExample],
1720
}).compileComponents();
1821
fixture = TestBed.createComponent(RadioHarnessExample);
@@ -21,18 +24,18 @@ describe('RadioHarnessExample', () => {
2124
});
2225

2326
it('should load all radio-group harnesses', async () => {
24-
const groups = await loader.getAllHarnesses(MatRadioGroupHarness);
27+
const groups = await loader.getAllHarnesses(MatLegacyRadioGroupHarness);
2528
expect(groups.length).toBe(1);
2629
});
2730

2831
it('should get name of radio-group', async () => {
29-
const group = await loader.getHarness(MatRadioGroupHarness);
32+
const group = await loader.getHarness(MatLegacyRadioGroupHarness);
3033
const name = await group.getName();
3134
expect(name).toBe('flavors');
3235
});
3336

3437
it('should check radio button', async () => {
35-
const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
38+
const buttons = await loader.getAllHarnesses(MatLegacyRadioButtonHarness);
3639
expect(await buttons[0].isChecked()).toBeTrue();
3740

3841
await buttons[1].check();
@@ -42,7 +45,7 @@ describe('RadioHarnessExample', () => {
4245

4346
it('should get label text of buttons', async () => {
4447
const [firstRadio, secondRadio, thirdRadio] = await loader.getAllHarnesses(
45-
MatRadioButtonHarness,
48+
MatLegacyRadioButtonHarness,
4649
);
4750
expect(await firstRadio.getLabelText()).toBe('Chocolate');
4851
expect(await secondRadio.getLabelText()).toBe('Vanilla');

‎src/components-examples/material/sidenav/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ ng_module(
1919
"//src/material/button",
2020
"//src/material/icon",
2121
"//src/material/legacy-checkbox",
22+
"//src/material/legacy-radio",
2223
"//src/material/legacy-select",
2324
"//src/material/list",
24-
"//src/material/radio",
2525
"//src/material/sidenav",
2626
"//src/material/toolbar",
2727
"@npm//@angular/forms",

‎src/components-examples/material/sidenav/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button';
55
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
66
import {MatIconModule} from '@angular/material/icon';
77
import {MatListModule} from '@angular/material/list';
8-
import {MatRadioModule} from '@angular/material/radio';
8+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
99
import {MatLegacySelectModule} from '@angular/material/legacy-select';
1010
import {MatSidenavModule} from '@angular/material/sidenav';
1111
import {MatToolbarModule} from '@angular/material/toolbar';
@@ -57,7 +57,7 @@ const EXAMPLES = [
5757
MatLegacyCheckboxModule,
5858
MatIconModule,
5959
MatListModule,
60-
MatRadioModule,
60+
MatLegacyRadioModule,
6161
MatSidenavModule,
6262
MatLegacySelectModule,
6363
MatToolbarModule,

‎src/components-examples/material/slide-toggle/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ ng_module(
1818
"//src/material/button",
1919
"//src/material/legacy-card",
2020
"//src/material/legacy-checkbox",
21+
"//src/material/legacy-radio",
2122
"//src/material/legacy-slide-toggle",
2223
"//src/material/legacy-slide-toggle/testing",
23-
"//src/material/radio",
2424
"@npm//@angular/forms",
2525
"@npm//@angular/platform-browser",
2626
"@npm//@angular/platform-browser-dynamic",

‎src/components-examples/material/slide-toggle/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
33
import {MatButtonModule} from '@angular/material/button';
44
import {MatLegacyCardModule} from '@angular/material/legacy-card';
55
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
6-
import {MatRadioModule} from '@angular/material/radio';
6+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
77
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
88
import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example';
99
import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
@@ -30,7 +30,7 @@ const EXAMPLES = [
3030
MatButtonModule,
3131
MatLegacyCardModule,
3232
MatLegacyCheckboxModule,
33-
MatRadioModule,
33+
MatLegacyRadioModule,
3434
MatLegacySlideToggleModule,
3535
ReactiveFormsModule,
3636
],

‎src/components-examples/material/stepper/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ ng_module(
2020
"//src/material/button",
2121
"//src/material/icon",
2222
"//src/material/legacy-input",
23-
"//src/material/radio",
23+
"//src/material/legacy-radio",
2424
"//src/material/stepper",
2525
"//src/material/stepper/testing",
2626
"@npm//@angular/common",

‎src/components-examples/material/stepper/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {CommonModule} from '@angular/common';
44
import {MatButtonModule} from '@angular/material/button';
55
import {MatIconModule} from '@angular/material/icon';
66
import {MatLegacyInputModule} from '@angular/material/legacy-input';
7-
import {MatRadioModule} from '@angular/material/radio';
7+
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
88
import {MatStepperModule} from '@angular/material/stepper';
99
import {StepperEditableExample} from './stepper-editable/stepper-editable-example';
1010
import {StepperErrorsExample} from './stepper-errors/stepper-errors-example';
@@ -58,7 +58,7 @@ const EXAMPLES = [
5858
MatButtonModule,
5959
MatIconModule,
6060
MatLegacyInputModule,
61-
MatRadioModule,
61+
MatLegacyRadioModule,
6262
MatStepperModule,
6363
ReactiveFormsModule,
6464
CommonModule,

‎src/dev-app/baseline/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ ng_module(
1414
"//src/material/legacy-checkbox",
1515
"//src/material/legacy-form-field",
1616
"//src/material/legacy-input",
17+
"//src/material/legacy-radio",
1718
"//src/material/legacy-select",
18-
"//src/material/radio",
1919
"//src/material/toolbar",
2020
],
2121
)

0 commit comments

Comments
 (0)