Skip to content

Commit cfc9230

Browse files
mmalerbammalerba
committed
fix(material/schematics): correctly migrate theme, color & typography
1 parent 1289310 commit cfc9230

Some content is hidden

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

51 files changed

+1307
-174
lines changed

‎src/material/schematics/ng-generate/mdc-migration/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {dirname} from 'path';
1818

1919
/** Groups of components that must be migrated together. */
2020
const migrationGroups = [
21-
['autocomplete', 'form-field', 'input', 'select'],
21+
['autocomplete', 'form-field', 'input', 'option', 'optgroup', 'select'],
2222
['button'],
2323
['card'],
2424
['checkbox'],

‎src/material/schematics/ng-generate/mdc-migration/rules/components/autocomplete/autocomplete-styles.spec.ts

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('autocomplete styles', () => {
2929
@use '@angular/material' as mat;
3030
$theme: ();
3131
@include mat.autocomplete-theme($theme);
32-
@include mat.autocomplete-typography($theme);
3332
`,
3433
);
3534
});
@@ -45,7 +44,6 @@ describe('autocomplete styles', () => {
4544
@use '@angular/material' as arbitrary;
4645
$theme: ();
4746
@include arbitrary.autocomplete-theme($theme);
48-
@include arbitrary.autocomplete-typography($theme);
4947
`,
5048
);
5149
});
@@ -64,9 +62,7 @@ describe('autocomplete styles', () => {
6462
$light-theme: ();
6563
$dark-theme: ();
6664
@include mat.autocomplete-theme($light-theme);
67-
@include mat.autocomplete-typography($light-theme);
6865
@include mat.autocomplete-theme($dark-theme);
69-
@include mat.autocomplete-typography($dark-theme);
7066
`,
7167
);
7268
});
@@ -88,12 +84,41 @@ describe('autocomplete styles', () => {
8884
8985
9086
@include mat.autocomplete-theme($theme);
91-
@include mat.autocomplete-typography($theme);
9287
9388
9489
`,
9590
);
9691
});
92+
93+
it('should update color mixin', async () => {
94+
await runMigrationTest(
95+
`
96+
@use '@angular/material' as mat;
97+
$theme: ();
98+
@include mat.legacy-autocomplete-color($theme);
99+
`,
100+
`
101+
@use '@angular/material' as mat;
102+
$theme: ();
103+
@include mat.autocomplete-color($theme);
104+
`,
105+
);
106+
});
107+
108+
it('should update typography mixin', async () => {
109+
await runMigrationTest(
110+
`
111+
@use '@angular/material' as mat;
112+
$theme: ();
113+
@include mat.legacy-autocomplete-typography($theme);
114+
`,
115+
`
116+
@use '@angular/material' as mat;
117+
$theme: ();
118+
@include mat.autocomplete-typography($theme);
119+
`,
120+
);
121+
});
97122
});
98123

99124
describe('selector migrations', () => {

‎src/material/schematics/ng-generate/mdc-migration/rules/components/autocomplete/autocomplete-styles.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,15 @@ export class AutocompleteStylesMigrator extends StyleMigrator {
1616
mixinChanges = [
1717
{
1818
old: 'legacy-autocomplete-theme',
19-
new: ['autocomplete-theme', 'autocomplete-typography'],
19+
new: ['autocomplete-theme'],
20+
},
21+
{
22+
old: 'legacy-autocomplete-color',
23+
new: ['autocomplete-color'],
24+
},
25+
{
26+
old: 'legacy-autocomplete-typography',
27+
new: ['autocomplete-typography'],
2028
},
2129
];
2230

‎src/material/schematics/ng-generate/mdc-migration/rules/components/button/button-styles.spec.ts

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,8 @@ describe('button styles', () => {
2929
@use '@angular/material' as mat;
3030
$theme: ();
3131
@include mat.button-theme($theme);
32-
@include mat.button-typography($theme);
3332
@include mat.fab-theme($theme);
34-
@include mat.fab-typography($theme);
3533
@include mat.icon-button-theme($theme);
36-
@include mat.icon-button-typography($theme);
3734
`,
3835
);
3936
});
@@ -53,9 +50,7 @@ describe('button styles', () => {
5350
@include mat.button-theme($theme);
5451
@include mat.button-typography($theme);
5552
@include mat.fab-theme($theme);
56-
@include mat.fab-typography($theme);
5753
@include mat.icon-button-theme($theme);
58-
@include mat.icon-button-typography($theme);
5954
`,
6055
);
6156
});
@@ -71,11 +66,8 @@ describe('button styles', () => {
7166
@use '@angular/material' as arbitrary;
7267
$theme: ();
7368
@include arbitrary.button-theme($theme);
74-
@include arbitrary.button-typography($theme);
7569
@include arbitrary.fab-theme($theme);
76-
@include arbitrary.fab-typography($theme);
7770
@include arbitrary.icon-button-theme($theme);
78-
@include arbitrary.icon-button-typography($theme);
7971
`,
8072
);
8173
});
@@ -94,17 +86,11 @@ describe('button styles', () => {
9486
$light-theme: ();
9587
$dark-theme: ();
9688
@include mat.button-theme($light-theme);
97-
@include mat.button-typography($light-theme);
9889
@include mat.fab-theme($light-theme);
99-
@include mat.fab-typography($light-theme);
10090
@include mat.icon-button-theme($light-theme);
101-
@include mat.icon-button-typography($light-theme);
10291
@include mat.button-theme($dark-theme);
103-
@include mat.button-typography($dark-theme);
10492
@include mat.fab-theme($dark-theme);
105-
@include mat.fab-typography($dark-theme);
10693
@include mat.icon-button-theme($dark-theme);
107-
@include mat.icon-button-typography($dark-theme);
10894
`,
10995
);
11096
});
@@ -126,16 +112,47 @@ describe('button styles', () => {
126112
127113
128114
@include mat.button-theme($theme);
129-
@include mat.button-typography($theme);
130115
@include mat.fab-theme($theme);
131-
@include mat.fab-typography($theme);
132116
@include mat.icon-button-theme($theme);
133-
@include mat.icon-button-typography($theme);
134117
135118
136119
`,
137120
);
138121
});
122+
123+
it('should update color mixin', async () => {
124+
await runMigrationTest(
125+
`
126+
@use '@angular/material' as mat;
127+
$theme: ();
128+
@include mat.legacy-button-color($theme);
129+
`,
130+
`
131+
@use '@angular/material' as mat;
132+
$theme: ();
133+
@include mat.button-color($theme);
134+
@include mat.fab-color($theme);
135+
@include mat.icon-button-color($theme);
136+
`,
137+
);
138+
});
139+
140+
it('should update typography mixin', async () => {
141+
await runMigrationTest(
142+
`
143+
@use '@angular/material' as mat;
144+
$theme: ();
145+
@include mat.legacy-button-typography($theme);
146+
`,
147+
`
148+
@use '@angular/material' as mat;
149+
$theme: ();
150+
@include mat.button-typography($theme);
151+
@include mat.fab-typography($theme);
152+
@include mat.icon-button-typography($theme);
153+
`,
154+
);
155+
});
139156
});
140157

141158
describe('selector migrations', () => {

‎src/material/schematics/ng-generate/mdc-migration/rules/components/button/button-styles.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,17 @@ export class ButtonStylesMigrator extends StyleMigrator {
1616
mixinChanges = [
1717
{
1818
old: 'legacy-button-theme',
19-
new: [
20-
'button-theme',
21-
'button-typography',
22-
'fab-theme',
23-
'fab-typography',
24-
'icon-button-theme',
25-
'icon-button-typography',
26-
],
19+
new: ['button-theme', 'fab-theme', 'icon-button-theme'],
20+
checkForDuplicates: true,
21+
},
22+
{
23+
old: 'legacy-button-color',
24+
new: ['button-color', 'fab-color', 'icon-button-color'],
25+
checkForDuplicates: true,
26+
},
27+
{
28+
old: 'legacy-button-typography',
29+
new: ['button-typography', 'fab-typography', 'icon-button-typography'],
2730
checkForDuplicates: true,
2831
},
2932
];

‎src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.spec.ts

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ describe('card styles', () => {
3434
@use '@angular/material' as mat;
3535
$theme: ();
3636
@include mat.card-theme($theme);
37-
@include mat.card-typography($theme);
3837
`,
3938
);
4039
});
@@ -50,7 +49,6 @@ describe('card styles', () => {
5049
@use '@angular/material' as arbitrary;
5150
$theme: ();
5251
@include arbitrary.card-theme($theme);
53-
@include arbitrary.card-typography($theme);
5452
`,
5553
);
5654
});
@@ -69,9 +67,7 @@ describe('card styles', () => {
6967
$light-theme: ();
7068
$dark-theme: ();
7169
@include mat.card-theme($light-theme);
72-
@include mat.card-typography($light-theme);
7370
@include mat.card-theme($dark-theme);
74-
@include mat.card-typography($dark-theme);
7571
`,
7672
);
7773
});
@@ -93,12 +89,41 @@ describe('card styles', () => {
9389
9490
9591
@include mat.card-theme($theme);
96-
@include mat.card-typography($theme);
9792
9893
9994
`,
10095
);
10196
});
97+
98+
it('should update color mixin', async () => {
99+
await runMigrationTest(
100+
`
101+
@use '@angular/material' as mat;
102+
$theme: ();
103+
@include mat.legacy-card-color($theme);
104+
`,
105+
`
106+
@use '@angular/material' as mat;
107+
$theme: ();
108+
@include mat.card-color($theme);
109+
`,
110+
);
111+
});
112+
113+
it('should update typography mixin', async () => {
114+
await runMigrationTest(
115+
`
116+
@use '@angular/material' as mat;
117+
$theme: ();
118+
@include mat.legacy-card-typography($theme);
119+
`,
120+
`
121+
@use '@angular/material' as mat;
122+
$theme: ();
123+
@include mat.card-typography($theme);
124+
`,
125+
);
126+
});
102127
});
103128

104129
describe('selector migrations', () => {

‎src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,15 @@ export class CardStylesMigrator extends StyleMigrator {
1616
mixinChanges = [
1717
{
1818
old: 'legacy-card-theme',
19-
new: ['card-theme', 'card-typography'],
19+
new: ['card-theme'],
20+
},
21+
{
22+
old: 'legacy-card-color',
23+
new: ['card-color'],
24+
},
25+
{
26+
old: 'legacy-card-typography',
27+
new: ['card-typography'],
2028
},
2129
];
2230

‎src/material/schematics/ng-generate/mdc-migration/rules/components/checkbox/checkbox-styles.spec.ts

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('checkbox styles', () => {
2929
@use '@angular/material' as mat;
3030
$theme: ();
3131
@include mat.checkbox-theme($theme);
32-
@include mat.checkbox-typography($theme);
3332
`,
3433
);
3534
});
@@ -45,7 +44,6 @@ describe('checkbox styles', () => {
4544
@use '@angular/material' as arbitrary;
4645
$theme: ();
4746
@include arbitrary.checkbox-theme($theme);
48-
@include arbitrary.checkbox-typography($theme);
4947
`,
5048
);
5149
});
@@ -64,9 +62,7 @@ describe('checkbox styles', () => {
6462
$light-theme: ();
6563
$dark-theme: ();
6664
@include mat.checkbox-theme($light-theme);
67-
@include mat.checkbox-typography($light-theme);
6865
@include mat.checkbox-theme($dark-theme);
69-
@include mat.checkbox-typography($dark-theme);
7066
`,
7167
);
7268
});
@@ -88,12 +84,41 @@ describe('checkbox styles', () => {
8884
8985
9086
@include mat.checkbox-theme($theme);
91-
@include mat.checkbox-typography($theme);
9287
9388
9489
`,
9590
);
9691
});
92+
93+
it('should update color mixin', async () => {
94+
await runMigrationTest(
95+
`
96+
@use '@angular/material' as mat;
97+
$theme: ();
98+
@include mat.legacy-checkbox-color($theme);
99+
`,
100+
`
101+
@use '@angular/material' as mat;
102+
$theme: ();
103+
@include mat.checkbox-color($theme);
104+
`,
105+
);
106+
});
107+
108+
it('should update typography mixin', async () => {
109+
await runMigrationTest(
110+
`
111+
@use '@angular/material' as mat;
112+
$theme: ();
113+
@include mat.legacy-checkbox-typography($theme);
114+
`,
115+
`
116+
@use '@angular/material' as mat;
117+
$theme: ();
118+
@include mat.checkbox-typography($theme);
119+
`,
120+
);
121+
});
97122
});
98123

99124
describe('selector migrations', () => {

‎src/material/schematics/ng-generate/mdc-migration/rules/components/checkbox/checkbox-styles.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,15 @@ export class CheckboxStylesMigrator extends StyleMigrator {
1616
mixinChanges = [
1717
{
1818
old: 'legacy-checkbox-theme',
19-
new: ['checkbox-theme', 'checkbox-typography'],
19+
new: ['checkbox-theme'],
20+
},
21+
{
22+
old: 'legacy-checkbox-color',
23+
new: ['checkbox-color'],
24+
},
25+
{
26+
old: 'legacy-checkbox-typography',
27+
new: ['checkbox-typography'],
2028
},
2129
];
2230

0 commit comments

Comments
 (0)