Skip to content

Commit b8af554

Browse files
crisbetocrisbeto
authored
build: switch remaining dev app demos to MDC (#25649)
Switches all of the remaining demos of components that don't have MDC counterparts to use MDC components.
1 parent 3761275 commit b8af554

Some content is hidden

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

60 files changed

+383
-284
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@
153153
/src/dev-app/autocomplete/** @crisbeto
154154
/src/dev-app/badge/** @andrewseguin
155155
/src/dev-app/baseline/** @mmalerba
156+
/src/dev-app/legacy-baseline/** @mmalerba
156157
/src/dev-app/bottom-sheet/** @andrewseguin @crisbeto
157158
/src/dev-app/button-toggle/** @andrewseguin
158159
/src/dev-app/button/** @andrewseguin

‎src/components-examples/material/core/ripple-overview/ripple-overview-example.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
<mat-checkbox [(ngModel)]="unbounded" class="example-ripple-checkbox">Unbounded</mat-checkbox>
44

55
<mat-form-field class="example-ripple-form-field" appearance="fill">
6-
<input matInput [(ngModel)]="radius" type="number" placeholder="Radius">
6+
<mat-label>Radius</mat-label>
7+
<input matInput [(ngModel)]="radius" type="number">
78
</mat-form-field>
89
<mat-form-field class="example-ripple-form-field" appearance="fill">
9-
<input matInput [(ngModel)]="color" type="text" placeholder="Color">
10+
<mat-label>Color</mat-label>
11+
<input matInput [(ngModel)]="color" type="text">
1012
</mat-form-field>
1113

1214

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
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-autocomplete",
51+
"//src/dev-app/legacy-baseline",
5152
"//src/dev-app/legacy-button",
5253
"//src/dev-app/legacy-card",
5354
"//src/dev-app/legacy-checkbox",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/material/badge",
14+
"//src/material/button",
1415
"//src/material/icon",
15-
"//src/material/legacy-button",
1616
"@npm//@angular/forms",
1717
],
1818
)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ import {Component} from '@angular/core';
1010
import {CommonModule} from '@angular/common';
1111
import {FormsModule} from '@angular/forms';
1212
import {MatBadgeModule} from '@angular/material/badge';
13-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
13+
import {MatButtonModule} from '@angular/material/button';
1414
import {MatIconModule} from '@angular/material/icon';
1515

1616
@Component({
1717
selector: 'badge-demo',
1818
templateUrl: 'badge-demo.html',
1919
styleUrls: ['badge-demo.css'],
2020
standalone: true,
21-
imports: [CommonModule, FormsModule, MatBadgeModule, MatLegacyButtonModule, MatIconModule],
21+
imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
2222
})
2323
export class BadgeDemo {
2424
visible = true;

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ ng_module(
1010
":baseline_demo_scss",
1111
],
1212
deps = [
13-
"//src/material/legacy-card",
14-
"//src/material/legacy-checkbox",
15-
"//src/material/legacy-form-field",
16-
"//src/material/legacy-input",
17-
"//src/material/legacy-radio",
18-
"//src/material/legacy-select",
13+
"//src/material/card",
14+
"//src/material/checkbox",
15+
"//src/material/form-field",
16+
"//src/material/input",
17+
"//src/material/radio",
18+
"//src/material/select",
1919
"//src/material/toolbar",
2020
],
2121
)

‎src/dev-app/baseline/baseline-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
padding: 0;
33
}
44

5-
.demo-basic .mat-card-content {
5+
.demo-basic .mat-mdc-card-content {
66
padding: 16px;
77
}
88

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

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

99
import {Component} from '@angular/core';
1010
import {CommonModule} from '@angular/common';
11-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
12-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
13-
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
14-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
15-
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
16-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
11+
import {MatCardModule} from '@angular/material/card';
12+
import {MatCheckboxModule} from '@angular/material/checkbox';
13+
import {MatFormFieldModule} from '@angular/material/form-field';
14+
import {MatInputModule} from '@angular/material/input';
15+
import {MatRadioModule} from '@angular/material/radio';
16+
import {MatSelectModule} from '@angular/material/select';
1717
import {MatToolbarModule} from '@angular/material/toolbar';
1818

1919
@Component({
@@ -23,12 +23,12 @@ import {MatToolbarModule} from '@angular/material/toolbar';
2323
standalone: true,
2424
imports: [
2525
CommonModule,
26-
MatLegacyCardModule,
27-
MatLegacyCheckboxModule,
28-
MatLegacyFormFieldModule,
29-
MatLegacyInputModule,
30-
MatLegacyRadioModule,
31-
MatLegacySelectModule,
26+
MatCardModule,
27+
MatCheckboxModule,
28+
MatFormFieldModule,
29+
MatInputModule,
30+
MatRadioModule,
31+
MatSelectModule,
3232
MatToolbarModule,
3333
],
3434
})

‎src/dev-app/bottom-sheet/BUILD.bazel

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/material/bottom-sheet",
14+
"//src/material/button",
15+
"//src/material/card",
16+
"//src/material/checkbox",
17+
"//src/material/form-field",
1418
"//src/material/icon",
15-
"//src/material/legacy-button",
16-
"//src/material/legacy-card",
17-
"//src/material/legacy-checkbox",
18-
"//src/material/legacy-form-field",
19-
"//src/material/legacy-input",
20-
"//src/material/legacy-list",
21-
"//src/material/legacy-select",
19+
"//src/material/input",
20+
"//src/material/list",
21+
"//src/material/select",
2222
"@npm//@angular/forms",
2323
],
2424
)

‎src/dev-app/bottom-sheet/bottom-sheet-demo.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ <h2>Options</h2>
3737
<ng-template let-bottomSheetRef="bottomSheetRef">
3838
<mat-nav-list>
3939
<mat-list-item (click)="bottomSheetRef.dismiss()" *ngFor="let action of [1, 2, 3]">
40-
<mat-icon mat-list-icon>folder</mat-icon>
41-
<span mat-line>Action {{ action }}</span>
42-
<span mat-line>Description</span>
40+
<mat-icon matListItemIcon>folder</mat-icon>
41+
<span matListItemTitle>Action {{ action }}</span>
42+
<span matLine>Description</span>
4343
</mat-list-item>
4444
</mat-nav-list>
4545
</ng-template>

‎src/dev-app/bottom-sheet/bottom-sheet-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
margin: 20px 0;
44
}
55

6-
.mat-raised-button {
6+
.mat-mdc-raised-button {
77
margin-right: 5px;
88
}

‎src/dev-app/bottom-sheet/bottom-sheet-demo.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ import {
1515
MatBottomSheetModule,
1616
MatBottomSheetRef,
1717
} from '@angular/material/bottom-sheet';
18-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
19-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
20-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
21-
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
18+
import {MatButtonModule} from '@angular/material/button';
19+
import {MatCardModule} from '@angular/material/card';
20+
import {MatCheckboxModule} from '@angular/material/checkbox';
21+
import {MatFormFieldModule} from '@angular/material/form-field';
2222
import {MatIconModule} from '@angular/material/icon';
23-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
24-
import {MatLegacyListModule} from '@angular/material/legacy-list';
25-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
23+
import {MatInputModule} from '@angular/material/input';
24+
import {MatListModule} from '@angular/material/list';
25+
import {MatSelectModule} from '@angular/material/select';
2626

2727
const defaultConfig = new MatBottomSheetConfig();
2828

@@ -35,14 +35,14 @@ const defaultConfig = new MatBottomSheetConfig();
3535
CommonModule,
3636
FormsModule,
3737
MatBottomSheetModule,
38-
MatLegacyButtonModule,
39-
MatLegacyCardModule,
40-
MatLegacyCheckboxModule,
41-
MatLegacyFormFieldModule,
38+
MatButtonModule,
39+
MatCardModule,
40+
MatCheckboxModule,
41+
MatFormFieldModule,
4242
MatIconModule,
43-
MatLegacyInputModule,
44-
MatLegacySelectModule,
45-
MatLegacyListModule,
43+
MatInputModule,
44+
MatSelectModule,
45+
MatListModule,
4646
],
4747
})
4848
export class BottomSheetDemo {
@@ -71,13 +71,13 @@ export class BottomSheetDemo {
7171
template: `
7272
<mat-nav-list>
7373
<a href="#" mat-list-item (click)="handleClick($event)" *ngFor="let action of [1, 2, 3]">
74-
<span mat-line>Action {{ action }}</span>
75-
<span mat-line>Description</span>
74+
<span matListItemTitle>Action {{ action }}</span>
75+
<span matListItemLine>Description</span>
7676
</a>
7777
</mat-nav-list>
7878
`,
7979
standalone: true,
80-
imports: [CommonModule, MatLegacyListModule],
80+
imports: [CommonModule, MatListModule],
8181
})
8282
export class ExampleBottomSheet {
8383
constructor(private _bottomSheet: MatBottomSheetRef) {}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/material/button-toggle",
14+
"//src/material/checkbox",
1415
"//src/material/icon",
15-
"//src/material/legacy-checkbox",
1616
],
1717
)
1818

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,15 @@ import {Component} from '@angular/core';
1010
import {CommonModule} from '@angular/common';
1111
import {FormsModule} from '@angular/forms';
1212
import {MatButtonToggleModule} from '@angular/material/button-toggle';
13-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
13+
import {MatCheckboxModule} from '@angular/material/checkbox';
1414
import {MatIconModule} from '@angular/material/icon';
1515

1616
@Component({
1717
selector: 'button-toggle-demo',
1818
templateUrl: 'button-toggle-demo.html',
1919
styleUrls: ['button-toggle-demo.css'],
2020
standalone: true,
21-
imports: [
22-
CommonModule,
23-
FormsModule,
24-
MatButtonToggleModule,
25-
MatLegacyCheckboxModule,
26-
MatIconModule,
27-
],
21+
imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
2822
})
2923
export class ButtonToggleDemo {
3024
isVertical = false;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ ng_module(
1111
":checkbox_demo_scss",
1212
],
1313
deps = [
14+
"//src/material/checkbox",
1415
"//src/material/core",
1516
"//src/material/form-field",
1617
"//src/material/input",
17-
"//src/material/legacy-checkbox",
1818
"//src/material/select",
1919
"@npm//@angular/forms",
2020
],

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77
*/
88

99
import {Component, Directive} from '@angular/core';
10-
import {
11-
MatLegacyCheckboxModule,
12-
MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS,
13-
} from '@angular/material/legacy-checkbox';
10+
import {MatCheckboxModule, MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
1411
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
1512
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
1613
import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
@@ -26,14 +23,14 @@ export interface Task {
2623

2724
@Directive({
2825
selector: '[clickActionNoop]',
29-
providers: [{provide: MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}],
26+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}],
3027
standalone: true,
3128
})
3229
export class ClickActionNoop {}
3330

3431
@Directive({
3532
selector: '[clickActionCheck]',
36-
providers: [{provide: MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}],
33+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}],
3734
standalone: true,
3835
})
3936
export class ClickActionCheck {}
@@ -56,7 +53,7 @@ export class AnimationsNoop {}
5653
],
5754
templateUrl: 'nested-checklist.html',
5855
standalone: true,
59-
imports: [CommonModule, MatLegacyCheckboxModule, FormsModule],
56+
imports: [CommonModule, MatCheckboxModule, FormsModule],
6057
})
6158
export class MatCheckboxDemoNestedChecklist {
6259
tasks: Task[] = [
@@ -110,7 +107,7 @@ export class MatCheckboxDemoNestedChecklist {
110107
imports: [
111108
CommonModule,
112109
FormsModule,
113-
MatLegacyCheckboxModule,
110+
MatCheckboxModule,
114111
MatInputModule,
115112
MatSelectModule,
116113
MatPseudoCheckboxModule,

‎src/dev-app/connected-overlay/BUILD.bazel

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ ng_module(
1414
"//src/cdk/overlay",
1515
"//src/cdk/portal",
1616
"//src/components-examples/cdk/overlay",
17-
"//src/material/legacy-button",
18-
"//src/material/legacy-checkbox",
19-
"//src/material/legacy-radio",
17+
"//src/material/button",
18+
"//src/material/checkbox",
19+
"//src/material/radio",
2020
"@npm//@angular/forms",
2121
],
2222
)

‎src/dev-app/connected-overlay/connected-overlay-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
margin: 16px;
77
}
88

9-
.mat-radio-button {
9+
.mat-mdc-radio-button {
1010
display: block;
1111
margin-bottom: 5px;
1212
}

‎src/dev-app/connected-overlay/connected-overlay-demo.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ import {
2626
ViewEncapsulation,
2727
} from '@angular/core';
2828
import {FormsModule} from '@angular/forms';
29-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
30-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
31-
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
29+
import {MatButtonModule} from '@angular/material/button';
30+
import {MatCheckboxModule} from '@angular/material/checkbox';
31+
import {MatRadioModule} from '@angular/material/radio';
3232

3333
@Component({
3434
selector: 'overlay-demo',
@@ -40,9 +40,9 @@ import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
4040
CdkOverlayExamplesModule,
4141
CommonModule,
4242
FormsModule,
43-
MatLegacyButtonModule,
44-
MatLegacyCheckboxModule,
45-
MatLegacyRadioModule,
43+
MatButtonModule,
44+
MatCheckboxModule,
45+
MatRadioModule,
4646
OverlayModule,
4747
],
4848
})

0 commit comments

Comments
 (0)