Skip to content

Commit

Permalink
fix(material/schematics): replace all-component-themes mixin with MDC…
Browse files Browse the repository at this point in the history 
… equivalent instead of adding each component's theme
  • Loading branch information
@amysorto @mmalerba
amysorto authored and mmalerba committed Jul 15, 2022
1 parent ff3a61d commit b9ee368
Show file tree
Hide file tree
Showing 23 changed files with 23 additions and 962 deletions.
64 changes: 0 additions & 64 deletions ...atics/ng-generate/mdc-migration/rules/components/autocomplete/autocomplete-styles.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,70 +71,6 @@ describe('autocomplete styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-select-theme($theme);
@include mat.mdc-select-typography($theme);
@include mat.mdc-core-theme($theme);
@include mat.mdc-core-typography($theme);
@include mat.mdc-input-theme($theme);
@include mat.mdc-input-typography($theme);
@include mat.mdc-form-field-theme($theme);
@include mat.mdc-form-field-typography($theme);
@include mat.mdc-autocomplete-theme($theme);
@include mat.mdc-autocomplete-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-select-theme($light-theme);
@include mat.mdc-select-typography($light-theme);
@include mat.mdc-core-theme($light-theme);
@include mat.mdc-core-typography($light-theme);
@include mat.mdc-input-theme($light-theme);
@include mat.mdc-input-typography($light-theme);
@include mat.mdc-form-field-theme($light-theme);
@include mat.mdc-form-field-typography($light-theme);
@include mat.mdc-autocomplete-theme($light-theme);
@include mat.mdc-autocomplete-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-select-theme($dark-theme);
@include mat.mdc-select-typography($dark-theme);
@include mat.mdc-core-theme($dark-theme);
@include mat.mdc-core-typography($dark-theme);
@include mat.mdc-input-theme($dark-theme);
@include mat.mdc-input-typography($dark-theme);
@include mat.mdc-form-field-theme($dark-theme);
@include mat.mdc-form-field-typography($dark-theme);
@include mat.mdc-autocomplete-theme($dark-theme);
@include mat.mdc-autocomplete-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
52 changes: 0 additions & 52 deletions ...terial/schematics/ng-generate/mdc-migration/rules/components/button/button-styles.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,58 +87,6 @@ describe('button styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-button-theme($theme);
@include mat.mdc-button-typography($theme);
@include mat.mdc-fab-theme($theme);
@include mat.mdc-fab-typography($theme);
@include mat.mdc-icon-button-theme($theme);
@include mat.mdc-icon-button-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-button-theme($light-theme);
@include mat.mdc-button-typography($light-theme);
@include mat.mdc-fab-theme($light-theme);
@include mat.mdc-fab-typography($light-theme);
@include mat.mdc-icon-button-theme($light-theme);
@include mat.mdc-icon-button-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-button-theme($dark-theme);
@include mat.mdc-button-typography($dark-theme);
@include mat.mdc-fab-theme($dark-theme);
@include mat.mdc-fab-typography($dark-theme);
@include mat.mdc-icon-button-theme($dark-theme);
@include mat.mdc-icon-button-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
40 changes: 0 additions & 40 deletions src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,46 +71,6 @@ describe('card styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-card-theme($theme);
@include mat.mdc-card-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-card-theme($light-theme);
@include mat.mdc-card-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-card-theme($dark-theme);
@include mat.mdc-card-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
40 changes: 0 additions & 40 deletions ...al/schematics/ng-generate/mdc-migration/rules/components/checkbox/checkbox-styles.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,46 +71,6 @@ describe('checkbox styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-checkbox-theme($theme);
@include mat.mdc-checkbox-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-checkbox-theme($light-theme);
@include mat.mdc-checkbox-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-checkbox-theme($dark-theme);
@include mat.mdc-checkbox-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
40 changes: 0 additions & 40 deletions ...material/schematics/ng-generate/mdc-migration/rules/components/chips/chips-styles.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,46 +71,6 @@ describe('chips styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-chips-theme($theme);
@include mat.mdc-chips-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-chips-theme($light-theme);
@include mat.mdc-chips-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-chips-theme($dark-theme);
@include mat.mdc-chips-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
40 changes: 0 additions & 40 deletions ...terial/schematics/ng-generate/mdc-migration/rules/components/dialog/dialog-styles.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,46 +71,6 @@ describe('dialog styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-dialog-theme($theme);
@include mat.mdc-dialog-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-dialog-theme($light-theme);
@include mat.mdc-dialog-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-dialog-theme($dark-theme);
@include mat.mdc-dialog-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
64 changes: 0 additions & 64 deletions ...chematics/ng-generate/mdc-migration/rules/components/form-field/form-field-styles.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,70 +71,6 @@ describe('form-field styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-select-theme($theme);
@include mat.mdc-select-typography($theme);
@include mat.mdc-core-theme($theme);
@include mat.mdc-core-typography($theme);
@include mat.mdc-input-theme($theme);
@include mat.mdc-input-typography($theme);
@include mat.mdc-form-field-theme($theme);
@include mat.mdc-form-field-typography($theme);
@include mat.mdc-autocomplete-theme($theme);
@include mat.mdc-autocomplete-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-select-theme($light-theme);
@include mat.mdc-select-typography($light-theme);
@include mat.mdc-core-theme($light-theme);
@include mat.mdc-core-typography($light-theme);
@include mat.mdc-input-theme($light-theme);
@include mat.mdc-input-typography($light-theme);
@include mat.mdc-form-field-theme($light-theme);
@include mat.mdc-form-field-typography($light-theme);
@include mat.mdc-autocomplete-theme($light-theme);
@include mat.mdc-autocomplete-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-select-theme($dark-theme);
@include mat.mdc-select-typography($dark-theme);
@include mat.mdc-core-theme($dark-theme);
@include mat.mdc-core-typography($dark-theme);
@include mat.mdc-input-theme($dark-theme);
@include mat.mdc-input-typography($dark-theme);
@include mat.mdc-form-field-theme($dark-theme);
@include mat.mdc-form-field-typography($dark-theme);
@include mat.mdc-autocomplete-theme($dark-theme);
@include mat.mdc-autocomplete-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
Loading

0 comments on commit b9ee368

Please sign in to comment.