Skip to content

Commit 3761275

Browse files
zarendzarend
authored
docs(material/slide-toggle): migrate examples to MDC (#25643)
Migrate slide-toggle example to use mdc-based components.
1 parent 29c4df5 commit 3761275

File tree

17 files changed

+75
-81
lines changed

17 files changed

+75
-81
lines changed

‎.github/CODEOWNERS

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@
192192
/src/dev-app/legacy-paginator/** @crisbeto
193193
/src/dev-app/legacy-radio/** @andrewseguin @devversion
194194
/src/dev-app/legacy-select/** @crisbeto
195+
/src/dev-app/legacy-slide-toggle/** @devversion
195196
/src/dev-app/legacy-snack-bar/** @andrewseguin
196197
/src/dev-app/legacy-tabs/** @andrewseguin
197198
/src/dev-app/legacy-table/** @andrewseguin
@@ -204,7 +205,6 @@
204205
/src/dev-app/mdc-chips/** @mmalerba
205206
/src/dev-app/legacy-progress-bar/** @crisbeto
206207
/src/dev-app/legacy-progress-spinner/** @mmalerba
207-
/src/dev-app/mdc-slide-toggle/** @crisbeto
208208
/src/dev-app/legacy-slider/** @devversion
209209
/src/dev-app/mdc-snack-bar/** @andrewseguin
210210
/src/dev-app/mdc-tabs/** @crisbeto
@@ -223,8 +223,8 @@
223223
/src/dev-app/select/** @crisbeto
224224
/src/dev-app/selection/** @andrewseguin
225225
/src/dev-app/sidenav/** @mmalerba
226-
/src/dev-app/slide-toggle/** @devversion
227226
/src/dev-app/slider/** @mmalerba
227+
/src/dev-app/slide-toggle/** @crisbeto
228228
/src/dev-app/snack-bar/** @andrewseguin @crisbeto
229229
/src/dev-app/stepper/** @mmalerba
230230
/src/dev-app/table-scroll-container/** @andrewseguin

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18-
"//src/material/legacy-button",
19-
"//src/material/legacy-card",
20-
"//src/material/legacy-checkbox",
21-
"//src/material/legacy-radio",
22-
"//src/material/legacy-slide-toggle",
23-
"//src/material/legacy-slide-toggle/testing",
18+
"//src/material/button",
19+
"//src/material/card",
20+
"//src/material/checkbox",
21+
"//src/material/radio",
22+
"//src/material/slide-toggle",
23+
"//src/material/slide-toggle/testing",
2424
"@npm//@angular/forms",
2525
"@npm//@angular/platform-browser",
2626
"@npm//@angular/platform-browser-dynamic",
@@ -44,8 +44,8 @@ ng_test_library(
4444
":slide-toggle",
4545
"//src/cdk/testing",
4646
"//src/cdk/testing/testbed",
47-
"//src/material/legacy-slide-toggle",
48-
"//src/material/legacy-slide-toggle/testing",
47+
"//src/material/slide-toggle",
48+
"//src/material/slide-toggle/testing",
4949
"@npm//@angular/forms",
5050
"@npm//@angular/platform-browser-dynamic",
5151
],

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {NgModule} from '@angular/core';
22
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
3-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
4-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
5-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
6-
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
7-
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
3+
import {MatButtonModule} from '@angular/material/button';
4+
import {MatCardModule} from '@angular/material/card';
5+
import {MatCheckboxModule} from '@angular/material/checkbox';
6+
import {MatRadioModule} from '@angular/material/radio';
7+
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
88
import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example';
99
import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
1010
import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
@@ -27,11 +27,11 @@ const EXAMPLES = [
2727
@NgModule({
2828
imports: [
2929
FormsModule,
30-
MatLegacyButtonModule,
31-
MatLegacyCardModule,
32-
MatLegacyCheckboxModule,
33-
MatLegacyRadioModule,
34-
MatLegacySlideToggleModule,
30+
MatButtonModule,
31+
MatCardModule,
32+
MatCheckboxModule,
33+
MatRadioModule,
34+
MatSlideToggleModule,
3535
ReactiveFormsModule,
3636
],
3737
declarations: EXAMPLES,

‎src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<p>Slide Toggle inside of a Template-driven form</p>
66

7-
<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
7+
<form class="example-form" #form="ngForm" (ngSubmit)="alertFormValues(form.form)">
88

99
<mat-slide-toggle ngModel name="enableWifi">Enable Wifi</mat-slide-toggle>
1010
<mat-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</mat-slide-toggle>
@@ -14,7 +14,7 @@
1414

1515
<p>Slide Toggle inside of a Reactive form</p>
1616

17-
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
17+
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="alertFormValues(formGroup)" ngNativeValidate>
1818

1919
<mat-slide-toggle formControlName="enableWifi">Enable Wifi</mat-slide-toggle>
2020
<mat-slide-toggle formControlName="acceptTerms">Accept Terms of Service</mat-slide-toggle>

‎src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {FormBuilder, Validators} from '@angular/forms';
2+
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
33

44
/**
55
* @title Slide-toggle with forms
@@ -18,7 +18,7 @@ export class SlideToggleFormsExample {
1818

1919
constructor(private _formBuilder: FormBuilder) {}
2020

21-
onFormSubmit() {
22-
alert(JSON.stringify(this.formGroup.value, null, 2));
21+
alertFormValues(formGroup: FormGroup) {
22+
alert(JSON.stringify(formGroup.value, null, 2));
2323
}
2424
}

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatLegacySlideToggleHarness} from '@angular/material/legacy-slide-toggle/testing';
3+
import {MatSlideToggleHarness} from '@angular/material/slide-toggle/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
5+
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
66
import {SlideToggleHarnessExample} from './slide-toggle-harness-example';
77
import {ReactiveFormsModule} from '@angular/forms';
88

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

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

2323
it('should load all slide-toggle harnesses', async () => {
24-
const slideToggles = await loader.getAllHarnesses(MatLegacySlideToggleHarness);
24+
const slideToggles = await loader.getAllHarnesses(MatSlideToggleHarness);
2525
expect(slideToggles.length).toBe(2);
2626
});
2727

2828
it('should load slide-toggle with name', async () => {
2929
const slideToggles = await loader.getAllHarnesses(
30-
MatLegacySlideToggleHarness.with({name: 'first-name'}),
30+
MatSlideToggleHarness.with({name: 'first-name'}),
3131
);
3232
expect(slideToggles.length).toBe(1);
3333
expect(await slideToggles[0].getLabelText()).toBe('First');
3434
});
3535

3636
it('should get disabled state', async () => {
37-
const [enabledToggle, disabledToggle] = await loader.getAllHarnesses(
38-
MatLegacySlideToggleHarness,
39-
);
37+
const [enabledToggle, disabledToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
4038
expect(await enabledToggle.isDisabled()).toBe(false);
4139
expect(await disabledToggle.isDisabled()).toBe(true);
4240
});
4341

4442
it('should get label text', async () => {
45-
const [firstToggle, secondToggle] = await loader.getAllHarnesses(MatLegacySlideToggleHarness);
43+
const [firstToggle, secondToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
4644
expect(await firstToggle.getLabelText()).toBe('First');
4745
expect(await secondToggle.getLabelText()).toBe('Second');
4846
});
4947

5048
it('should toggle slide-toggle', async () => {
5149
fixture.componentInstance.disabled = false;
52-
const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(
53-
MatLegacySlideToggleHarness,
54-
);
50+
const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
5551
await checkedToggle.toggle();
5652
await uncheckedToggle.toggle();
5753
expect(await checkedToggle.isChecked()).toBe(false);

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ ng_module(
6060
"//src/dev-app/legacy-progress-spinner",
6161
"//src/dev-app/legacy-radio",
6262
"//src/dev-app/legacy-select",
63+
"//src/dev-app/legacy-slide-toggle",
6364
"//src/dev-app/legacy-slider",
6465
"//src/dev-app/legacy-snack-bar",
6566
"//src/dev-app/legacy-table",
@@ -68,7 +69,6 @@ ng_module(
6869
"//src/dev-app/list",
6970
"//src/dev-app/live-announcer",
7071
"//src/dev-app/mdc-chips",
71-
"//src/dev-app/mdc-slide-toggle",
7272
"//src/dev-app/menu",
7373
"//src/dev-app/menubar",
7474
"//src/dev-app/paginator",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ export class DevAppLayout {
104104
{name: 'Virtual Scrolling', route: '/virtual-scroll'},
105105
{name: 'YouTube Player', route: '/youtube-player'},
106106
{name: 'MDC Chips', route: '/mdc-chips'},
107-
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
108107
{name: 'MDC Slider', route: '/mdc-slider'},
109108
{name: 'Legacy Autocomplete', route: '/legacy-autocomplete'},
110109
{name: 'Legacy Button', route: '/legacy-button'},
@@ -120,6 +119,7 @@ export class DevAppLayout {
120119
{name: 'Legacy Radio', route: '/legacy-radio'},
121120
{name: 'Legacy Select', route: '/legacy-select'},
122121
{name: 'Legacy Slider', route: '/legacy-slider'},
122+
{name: 'Legacy Slide Toggle', route: '/legacy-slide-toggle'},
123123
{name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},
124124
{name: 'Legacy Table', route: '/legacy-table'},
125125
{name: 'Legacy Tabs', route: '/legacy-tabs'},

‎src/dev-app/legacy-slide-toggle/BUILD.bazel

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "legacy-slide-toggle",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"legacy-slide-toggle-demo.html",
10+
":legacy_slide_toggle_demo_scss",
11+
],
12+
deps = [
13+
"//src/material/legacy-button",
14+
"//src/material/legacy-slide-toggle",
15+
"@npm//@angular/forms",
16+
],
17+
)
18+
19+
sass_binary(
20+
name = "legacy_slide_toggle_demo_scss",
21+
src = "legacy-slide-toggle-demo.scss",
22+
)

‎src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.html renamed to ‎src/dev-app/legacy-slide-toggle/legacy-slide-toggle-demo.html

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
Disabled Slide Toggle
99
</mat-slide-toggle>
1010

11-
<mat-slide-toggle disabled>
12-
Always disabled (no value binding)
13-
</mat-slide-toggle>
14-
1511
<mat-slide-toggle [disabled]="firstToggle">
1612
Disable Bound
1713
</mat-slide-toggle>

‎src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.scss renamed to ‎src/dev-app/legacy-slide-toggle/legacy-slide-toggle-demo.scss

File renamed without changes.

‎src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.ts renamed to ‎src/dev-app/legacy-slide-toggle/legacy-slide-toggle-demo.ts

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

99
import {Component} from '@angular/core';
10-
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
1110
import {FormsModule} from '@angular/forms';
11+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
12+
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
1213

1314
@Component({
14-
selector: 'mdc-slide-toggle-demo',
15-
templateUrl: 'mdc-slide-toggle-demo.html',
16-
styleUrls: ['mdc-slide-toggle-demo.css'],
15+
selector: 'slide-toggle-demo',
16+
templateUrl: 'legacy-slide-toggle-demo.html',
17+
styleUrls: ['legacy-slide-toggle-demo.css'],
1718
standalone: true,
18-
imports: [FormsModule, MatSlideToggleModule],
19+
imports: [FormsModule, MatLegacyButtonModule, MatLegacySlideToggleModule],
1920
})
20-
export class MdcSlideToggleDemo {
21+
export class LegacySlideToggleDemo {
2122
firstToggle: boolean;
2223

2324
onFormSubmit() {

‎src/dev-app/mdc-slide-toggle/BUILD.bazel

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/dev-app/routes.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -208,9 +208,8 @@ export const DEV_APP_ROUTES: Routes = [
208208
loadComponent: () => import('./snack-bar/snack-bar-demo').then(m => m.SnackBarDemo),
209209
},
210210
{
211-
path: 'mdc-slide-toggle',
212-
loadComponent: () =>
213-
import('./mdc-slide-toggle/mdc-slide-toggle-demo').then(m => m.MdcSlideToggleDemo),
211+
path: 'slide-toggle',
212+
loadComponent: () => import('./slide-toggle/slide-toggle-demo').then(m => m.SlideToggleDemo),
214213
},
215214
{
216215
path: 'slider',
@@ -276,8 +275,9 @@ export const DEV_APP_ROUTES: Routes = [
276275
loadComponent: () => import('./sidenav/sidenav-demo').then(m => m.SidenavDemo),
277276
},
278277
{
279-
path: 'slide-toggle',
280-
loadComponent: () => import('./slide-toggle/slide-toggle-demo').then(m => m.SlideToggleDemo),
278+
path: 'legacy-slide-toggle',
279+
loadComponent: () =>
280+
import('./legacy-slide-toggle/legacy-slide-toggle-demo').then(m => m.LegacySlideToggleDemo),
281281
},
282282
{
283283
path: 'legacy-slider',

‎src/dev-app/slide-toggle/BUILD.bazel

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ ng_module(
1010
":slide_toggle_demo_scss",
1111
],
1212
deps = [
13-
"//src/material/legacy-button",
14-
"//src/material/legacy-slide-toggle",
13+
"//src/material/button",
14+
"//src/material/slide-toggle",
1515
"@npm//@angular/forms",
1616
],
1717
)

‎src/dev-app/slide-toggle/slide-toggle-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,4 @@
2626

2727
</form>
2828

29-
</div>
29+
</div>

‎src/dev-app/slide-toggle/slide-toggle-demo.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88

99
import {Component} from '@angular/core';
1010
import {FormsModule} from '@angular/forms';
11-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
12-
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
11+
import {MatButtonModule} from '@angular/material/button';
12+
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
1313

1414
@Component({
1515
selector: 'slide-toggle-demo',
1616
templateUrl: 'slide-toggle-demo.html',
1717
styleUrls: ['slide-toggle-demo.css'],
1818
standalone: true,
19-
imports: [FormsModule, MatLegacyButtonModule, MatLegacySlideToggleModule],
19+
imports: [FormsModule, MatButtonModule, MatSlideToggleModule],
2020
})
2121
export class SlideToggleDemo {
2222
firstToggle: boolean;

0 commit comments

Comments
 (0)