From 346c694b618cdced250a90181ea5ca4cdc0806d7 Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Thu, 1 Sep 2022 23:14:17 +0000
Subject: [PATCH] docs(material/radio): switch examples and demo to MDC
---
.github/CODEOWNERS | 4 ++--
.../material/radio/BUILD.bazel | 8 +++----
.../material/radio/index.ts | 4 ++--
.../radio-harness-example.spec.ts | 17 ++++++-------
.../radio-overview/radio-overview-example.css | 2 +-
src/dev-app/BUILD.bazel | 2 +-
src/dev-app/dev-app/dev-app-layout.ts | 2 +-
src/dev-app/legacy-radio/BUILD.bazel | 23 ++++++++++++++++++
.../legacy-radio-demo.html} | 9 ++++---
.../legacy-radio-demo.scss} | 0
.../legacy-radio-demo.ts} | 24 ++++++++++++-------
src/dev-app/mdc-radio/BUILD.bazel | 23 ------------------
src/dev-app/radio/BUILD.bazel | 6 ++---
src/dev-app/radio/radio-demo.html | 9 +++----
src/dev-app/radio/radio-demo.ts | 16 ++++---------
src/dev-app/routes.ts | 4 ++--
16 files changed, 75 insertions(+), 78 deletions(-)
create mode 100644 src/dev-app/legacy-radio/BUILD.bazel
rename src/dev-app/{mdc-radio/mdc-radio-demo.html => legacy-radio/legacy-radio-demo.html} (94%)
rename src/dev-app/{mdc-radio/mdc-radio-demo.scss => legacy-radio/legacy-radio-demo.scss} (100%)
rename src/dev-app/{mdc-radio/mdc-radio-demo.ts => legacy-radio/legacy-radio-demo.ts} (53%)
delete mode 100644 src/dev-app/mdc-radio/BUILD.bazel
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 612d6406590f..efa793575d31 100644
--- a/.github/CODEOWNERS
+++ b/.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
diff --git a/src/components-examples/material/radio/BUILD.bazel b/src/components-examples/material/radio/BUILD.bazel
index 4385be6fda84..63b6858eb0a5 100644
--- 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/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",
],
diff --git a/src/components-examples/material/radio/index.ts b/src/components-examples/material/radio/index.ts
index 38885e3766a7..d9d31221373e 100644
--- 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 {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,
})
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
index a3df5a7db7e0..7e80fea61cde 100644
--- 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,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');
diff --git a/src/components-examples/material/radio/radio-overview/radio-overview-example.css b/src/components-examples/material/radio/radio-overview/radio-overview-example.css
index a4b97b3782d8..ee0ada7df78b 100644
--- a/src/components-examples/material/radio/radio-overview/radio-overview-example.css
+++ b/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;
}
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index 1bd3951f7fc8..fc2409221bef 100644
--- a/src/dev-app/BUILD.bazel
+++ b/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",
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index f299a7f90214..c55a17eba0c8 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/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'},
diff --git a/src/dev-app/legacy-radio/BUILD.bazel b/src/dev-app/legacy-radio/BUILD.bazel
new file mode 100644
index 000000000000..6e08a49f423e
--- /dev/null
+++ b/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",
+)
diff --git a/src/dev-app/mdc-radio/mdc-radio-demo.html b/src/dev-app/legacy-radio/legacy-radio-demo.html
similarity index 94%
rename from src/dev-app/mdc-radio/mdc-radio-demo.html
rename to src/dev-app/legacy-radio/legacy-radio-demo.html
index 2c11becb2327..19b51db6abd1 100644
--- a/src/dev-app/mdc-radio/mdc-radio-demo.html
+++ b/src/dev-app/legacy-radio/legacy-radio-demo.html
@@ -41,16 +41,15 @@ Dynamic Example
Align end
+ name="my_options"
+ [disabled]="isDisabled"
+ [required]="isRequired"
+ [labelPosition]="isAlignEnd ? 'after' : 'before'">
Option 1
Option 2
Option 3
-
Favorite Season Example
Dynamic Example with two-way data-binding
diff --git a/src/dev-app/mdc-radio/mdc-radio-demo.scss b/src/dev-app/legacy-radio/legacy-radio-demo.scss
similarity index 100%
rename from src/dev-app/mdc-radio/mdc-radio-demo.scss
rename to src/dev-app/legacy-radio/legacy-radio-demo.scss
diff --git a/src/dev-app/mdc-radio/mdc-radio-demo.ts b/src/dev-app/legacy-radio/legacy-radio-demo.ts
similarity index 53%
rename from src/dev-app/mdc-radio/mdc-radio-demo.ts
rename to src/dev-app/legacy-radio/legacy-radio-demo.ts
index d2426ce6cb52..80e2621064e7 100644
--- a/src/dev-app/mdc-radio/mdc-radio-demo.ts
+++ b/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;
diff --git a/src/dev-app/mdc-radio/BUILD.bazel b/src/dev-app/mdc-radio/BUILD.bazel
deleted file mode 100644
index b6936413ae04..000000000000
--- a/src/dev-app/mdc-radio/BUILD.bazel
+++ /dev/null
@@ -1,23 +0,0 @@
-load("//tools:defaults.bzl", "ng_module", "sass_binary")
-
-package(default_visibility = ["//visibility:public"])
-
-ng_module(
- name = "mdc-radio",
- srcs = glob(["**/*.ts"]),
- assets = [
- "mdc-radio-demo.html",
- ":mdc_radio_demo_scss",
- ],
- deps = [
- "//src/material/button",
- "//src/material/checkbox",
- "//src/material/radio",
- "@npm//@angular/forms",
- ],
-)
-
-sass_binary(
- name = "mdc_radio_demo_scss",
- src = "mdc-radio-demo.scss",
-)
diff --git a/src/dev-app/radio/BUILD.bazel b/src/dev-app/radio/BUILD.bazel
index 87b951e530f9..426623bcaa94 100644
--- a/src/dev-app/radio/BUILD.bazel
+++ b/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",
],
)
diff --git a/src/dev-app/radio/radio-demo.html b/src/dev-app/radio/radio-demo.html
index 19b51db6abd1..2c11becb2327 100644
--- a/src/dev-app/radio/radio-demo.html
+++ b/src/dev-app/radio/radio-demo.html
@@ -41,15 +41,16 @@ Dynamic Example
Align end
+ name="my_options"
+ [disabled]="isDisabled"
+ [required]="isRequired"
+ [labelPosition]="isAlignEnd ? 'after' : 'before'">
Option 1
Option 2
Option 3
+
Favorite Season Example
Dynamic Example with two-way data-binding
diff --git a/src/dev-app/radio/radio-demo.ts b/src/dev-app/radio/radio-demo.ts
index 29a409bca993..fefbb45264b8 100644
--- a/src/dev-app/radio/radio-demo.ts
+++ b/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;
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
index 306ea96d6d4f..49d1d5a90b1d 100644
--- a/src/dev-app/routes.ts
+++ b/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',