Skip to content

Commit 181d53a

Browse files
crisbetocrisbeto
authored
docs(material/checkbox): switch docs and examples to MDC (#25547)
Switches the checkbox live examples and docs to use MDC.
1 parent cff2153 commit 181d53a

File tree

16 files changed

+109
-121
lines changed

16 files changed

+109
-121
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
/src/dev-app/live-announcer/** @jelbourn
195195
/src/dev-app/mdc-autocomplete/** @crisbeto
196196
/src/dev-app/mdc-button/** @andrewseguin
197-
/src/dev-app/mdc-checkbox/** @mmalerba
197+
/src/dev-app/legacy-checkbox/** @mmalerba
198198
/src/dev-app/mdc-chips/** @mmalerba
199199
/src/dev-app/mdc-dialog/** @devversion
200200
/src/dev-app/mdc-list/** @mmalerba

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18-
"//src/material/legacy-card",
19-
"//src/material/legacy-checkbox",
20-
"//src/material/legacy-checkbox/testing",
21-
"//src/material/legacy-radio",
18+
"//src/material/card",
19+
"//src/material/checkbox",
20+
"//src/material/checkbox/testing",
21+
"//src/material/radio",
2222
"@npm//@angular/forms",
2323
"@npm//@angular/platform-browser",
2424
"@npm//@angular/platform-browser-dynamic",
@@ -42,8 +42,8 @@ ng_test_library(
4242
":checkbox",
4343
"//src/cdk/testing",
4444
"//src/cdk/testing/testbed",
45-
"//src/material/legacy-checkbox",
46-
"//src/material/legacy-checkbox/testing",
45+
"//src/material/checkbox",
46+
"//src/material/checkbox/testing",
4747
"@npm//@angular/forms",
4848
"@npm//@angular/platform-browser-dynamic",
4949
],

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

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatLegacyCheckboxHarness} from '@angular/material/legacy-checkbox/testing';
3+
import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
55
import {ReactiveFormsModule} from '@angular/forms';
6-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
6+
import {MatCheckboxModule} from '@angular/material/checkbox';
77
import {CheckboxHarnessExample} from './checkbox-harness-example';
88

99
describe('CheckboxHarnessExample', () => {
@@ -12,7 +12,7 @@ describe('CheckboxHarnessExample', () => {
1212

1313
beforeEach(async () => {
1414
await TestBed.configureTestingModule({
15-
imports: [MatLegacyCheckboxModule, ReactiveFormsModule],
15+
imports: [MatCheckboxModule, ReactiveFormsModule],
1616
declarations: [CheckboxHarnessExample],
1717
}).compileComponents();
1818
fixture = TestBed.createComponent(CheckboxHarnessExample);
@@ -21,37 +21,31 @@ describe('CheckboxHarnessExample', () => {
2121
});
2222

2323
it('should load checkbox with name', async () => {
24-
const checkboxes = await loader.getAllHarnesses(
25-
MatLegacyCheckboxHarness.with({name: 'first-name'}),
26-
);
24+
const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'}));
2725
expect(checkboxes.length).toBe(1);
2826
expect(await checkboxes[0].getLabelText()).toBe('First');
2927
});
3028

3129
it('should get checked state', async () => {
32-
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(
33-
MatLegacyCheckboxHarness,
34-
);
30+
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
3531
expect(await checkedCheckbox.isChecked()).toBe(true);
3632
expect(await uncheckedCheckbox.isChecked()).toBe(false);
3733
});
3834

3935
it('should get name', async () => {
40-
const checkbox = await loader.getHarness(MatLegacyCheckboxHarness.with({label: 'First'}));
36+
const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
4137
expect(await checkbox.getName()).toBe('first-name');
4238
});
4339

4440
it('should get label text', async () => {
45-
const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatLegacyCheckboxHarness);
41+
const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
4642
expect(await firstCheckbox.getLabelText()).toBe('First');
4743
expect(await secondCheckbox.getLabelText()).toBe('Second');
4844
});
4945

5046
it('should toggle checkbox', async () => {
5147
fixture.componentInstance.disabled = false;
52-
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(
53-
MatLegacyCheckboxHarness,
54-
);
48+
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
5549
await checkedCheckbox.toggle();
5650
await uncheckedCheckbox.toggle();
5751
expect(await checkedCheckbox.isChecked()).toBe(false);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
5-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
6-
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
4+
import {MatCardModule} from '@angular/material/card';
5+
import {MatCheckboxModule} from '@angular/material/checkbox';
6+
import {MatRadioModule} from '@angular/material/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';
@@ -26,9 +26,9 @@ const EXAMPLES = [
2626
@NgModule({
2727
imports: [
2828
CommonModule,
29-
MatLegacyCardModule,
30-
MatLegacyCheckboxModule,
31-
MatLegacyRadioModule,
29+
MatCardModule,
30+
MatCheckboxModule,
31+
MatRadioModule,
3232
FormsModule,
3333
ReactiveFormsModule,
3434
],

‎src/dev-app/BUILD.bazel‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ ng_module(
4848
"//src/dev-app/input-modality",
4949
"//src/dev-app/layout",
5050
"//src/dev-app/legacy-card",
51+
"//src/dev-app/legacy-checkbox",
5152
"//src/dev-app/legacy-input",
5253
"//src/dev-app/legacy-paginator",
5354
"//src/dev-app/legacy-select",
@@ -58,7 +59,6 @@ ng_module(
5859
"//src/dev-app/live-announcer",
5960
"//src/dev-app/mdc-autocomplete",
6061
"//src/dev-app/mdc-button",
61-
"//src/dev-app/mdc-checkbox",
6262
"//src/dev-app/mdc-chips",
6363
"//src/dev-app/mdc-dialog",
6464
"//src/dev-app/mdc-list",

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ ng_module(
1111
":checkbox_demo_scss",
1212
],
1313
deps = [
14-
"//src/components-examples/material/checkbox",
14+
"//src/material/checkbox",
1515
"//src/material/core",
16-
"//src/material/legacy-checkbox",
17-
"//src/material/legacy-form-field",
18-
"//src/material/legacy-input",
19-
"//src/material/legacy-select",
16+
"//src/material/form-field",
17+
"//src/material/input",
18+
"//src/material/select",
19+
"@npm//@angular/forms",
2020
],
2121
)
2222

‎src/dev-app/checkbox/checkbox-demo.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
<h1> Themed Checkboxes </h1>
2+
3+
<div>
4+
<mat-checkbox>Default</mat-checkbox>
5+
</div>
6+
7+
<div>
8+
<mat-checkbox color="primary">Primary</mat-checkbox>
9+
</div>
10+
11+
<div>
12+
<mat-checkbox color="accent">Accent</mat-checkbox>
13+
</div>
14+
15+
<div>
16+
<mat-checkbox color="warn">Warn</mat-checkbox>
17+
</div>
18+
19+
120
<h1>mat-checkbox: Basic Example</h1>
221
<form>
322
<mat-checkbox [(ngModel)]="isChecked"
@@ -245,7 +264,3 @@ <h5>No animations</h5>
245264
</mat-checkbox>
246265
</div>
247266
</div>
248-
249-
<h1>Overview example</h1>
250-
<checkbox-overview-example></checkbox-overview-example>
251-

‎src/dev-app/checkbox/checkbox-demo.ts‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,13 @@
77
*/
88

99
import {Component, Directive} from '@angular/core';
10-
import {
11-
MatLegacyCheckboxModule,
12-
MAT_CHECKBOX_DEFAULT_OPTIONS,
13-
} from '@angular/material/legacy-checkbox';
10+
import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox';
1411
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
12+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
1513
import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
14+
import {MatInputModule} from '@angular/material/input';
15+
import {MatSelectModule} from '@angular/material/select';
1616
import {CommonModule} from '@angular/common';
17-
import {CheckboxExamplesModule} from '@angular/components-examples/material/checkbox';
18-
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
19-
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
20-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
21-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
2217

2318
export interface Task {
2419
name: string;
@@ -56,9 +51,9 @@ export class AnimationsNoop {}
5651
}
5752
`,
5853
],
59-
templateUrl: './nested-checklist.html',
54+
templateUrl: 'nested-checklist.html',
6055
standalone: true,
61-
imports: [CommonModule, MatLegacyCheckboxModule, FormsModule],
56+
imports: [CommonModule, MatCheckboxModule, FormsModule],
6257
})
6358
export class MatCheckboxDemoNestedChecklist {
6459
tasks: Task[] = [
@@ -105,18 +100,16 @@ export class MatCheckboxDemoNestedChecklist {
105100
}
106101

107102
@Component({
108-
selector: 'mat-checkbox-demo',
103+
selector: 'checkbox-demo',
109104
templateUrl: 'checkbox-demo.html',
110105
styleUrls: ['checkbox-demo.css'],
111106
standalone: true,
112107
imports: [
113-
CheckboxExamplesModule,
114108
CommonModule,
115109
FormsModule,
116-
MatLegacyCheckboxModule,
117-
MatLegacyFormFieldModule,
118-
MatLegacyInputModule,
119-
MatLegacySelectModule,
110+
MatCheckboxModule,
111+
MatInputModule,
112+
MatSelectModule,
120113
MatPseudoCheckboxModule,
121114
ReactiveFormsModule,
122115
MatCheckboxDemoNestedChecklist,
@@ -129,7 +122,7 @@ export class CheckboxDemo {
129122
isIndeterminate: boolean = false;
130123
isChecked: boolean = false;
131124
isDisabled: boolean = false;
132-
labelPosition: 'after' | 'before' = 'after';
125+
labelPosition: 'before' | 'after' = 'after';
133126
useAlternativeColor: boolean = false;
134127

135128
demoRequired = false;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ export class DevAppLayout {
105105
{name: 'YouTube Player', route: '/youtube-player'},
106106
{name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
107107
{name: 'MDC Button', route: '/mdc-button'},
108-
{name: 'MDC Checkbox', route: '/mdc-checkbox'},
109108
{name: 'MDC Chips', route: '/mdc-chips'},
110109
{name: 'MDC Dialog', route: '/mdc-dialog'},
111110
{name: 'MDC List', route: '/mdc-list'},
@@ -117,6 +116,7 @@ export class DevAppLayout {
117116
{name: 'MDC Slider', route: '/mdc-slider'},
118117
{name: 'MDC Tabs', route: '/mdc-tabs'},
119118
{name: 'Legacy Card', route: '/legacy-card'},
119+
{name: 'Legacy Checkbox', route: '/legacy-checkbox'},
120120
{name: 'Legacy Input', route: '/legacy-input'},
121121
{name: 'Legacy Paginator', route: '/legacy-paginator'},
122122
{name: 'Legacy Select', route: '/legacy-select'},

‎src/dev-app/legacy-checkbox/BUILD.bazel‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "legacy-checkbox",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"legacy-checkbox-demo.html",
10+
"legacy-nested-checklist.html",
11+
":legacy_checkbox_demo_scss",
12+
],
13+
deps = [
14+
"//src/material/core",
15+
"//src/material/legacy-checkbox",
16+
"//src/material/legacy-form-field",
17+
"//src/material/legacy-input",
18+
"//src/material/legacy-select",
19+
],
20+
)
21+
22+
sass_binary(
23+
name = "legacy_checkbox_demo_scss",
24+
src = "legacy-checkbox-demo.scss",
25+
)

0 commit comments

Comments
 (0)