fix(material/schematics): improve instructions for dealing with typog…

…raphy changes (#25950)
angular · Nov 10, 2022 · 4573263 · 4573263
1 parent 1e56524
commit 4573263
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts b/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts
@@ -74,14 +74,27 @@ export class LegacyComponentsMigration extends Migration<null> {
       const includeTypography = [atInclude, delim, mixinName, updatedFunctionsRest]
         .join('')
         .replace(`${namespace}.core`, `${namespace}.all-legacy-component-typographies`);
+      // If there are no params, pass the default typography config.
+      const hierarchyParams =
+        updatedFunctionsRest.replace(/[()\s]/g, '') === ''
+          ? `(${namespace}.define-legacy-typography-config())`
+          : updatedFunctionsRest;
+      const includeHierarchy = [atInclude, delim, mixinName, hierarchyParams]
+        .join('')
+        .replace(`${namespace}.core`, `${namespace}.legacy-typography-hierarchy`);
       const indent = original.match(/^\s*/)?.[0] || '';
       // Replace the whole original with a comment, typography include, and legacy-core include.
       this._replaceAt(filePath, node.source.start.offset, {
         old: original,
         new: [
-          `${indent}// TODO(v15): As of v15 ${namespace}.legacy-core no longer includes default typography styles.`,
-          `${indent}//  Instead an explicit typography include has been automatically added here.`,
-          `${indent}//  If you add typography styles elsewhere, you may want to remove this.`,
+          `// TODO(v15): As of v15 ${namespace}.legacy-core no longer includes default typography styles.`,
+          `//  The following line adds:`,
+          `//    1. Default typography styles for all components`,
+          `//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)`,
+          `//  If you specify typography styles for the components you use elsewhere, you should delete this line.`,
+          `//  If you don't need the default component typographies but still want the hierarchy styles,`,
+          `//  you can delete this line and instead use:`,
+          `//    \`${includeHierarchy};\``,
           `${includeTypography};`,
           `${indent}@include ${namespace}.legacy-core()`,
         ].join('\n'),

diff --git a/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts b/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts
@@ -285,20 +285,30 @@ describe('v15 legacy components migration', () => {
         old: [
           `@use '@angular/material' as mat;`,
           `@include mat.core();`,
-          `@include mat.core(mat.define-typography-config());`,
+          `@include mat.core(mat.define-typography-config(()));`,
           `@include mat.core-theme(())`,
         ],
         new: [
           `@use '@angular/material' as mat;`,
           `// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.`,
-          `//  Instead an explicit typography include has been automatically added here.`,
-          `//  If you add typography styles elsewhere, you may want to remove this.`,
+          `//  The following line adds:`,
+          `//    1. Default typography styles for all components`,
+          `//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)`,
+          `//  If you specify typography styles for the components you use elsewhere, you should delete this line.`,
+          `//  If you don't need the default component typographies but still want the hierarchy styles,`,
+          `//  you can delete this line and instead use:`,
+          `//    \`@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());\``,
           `@include mat.all-legacy-component-typographies();`,
           `@include mat.legacy-core();`,
           `// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.`,
-          `//  Instead an explicit typography include has been automatically added here.`,
-          `//  If you add typography styles elsewhere, you may want to remove this.`,
-          `@include mat.all-legacy-component-typographies(mat.define-legacy-typography-config());`,
+          `//  The following line adds:`,
+          `//    1. Default typography styles for all components`,
+          `//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)`,
+          `//  If you specify typography styles for the components you use elsewhere, you should delete this line.`,
+          `//  If you don't need the default component typographies but still want the hierarchy styles,`,
+          `//  you can delete this line and instead use:`,
+          `//    \`@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config(()));\``,
+          `@include mat.all-legacy-component-typographies(mat.define-legacy-typography-config(()));`,
           `@include mat.legacy-core();`,
           `@include mat.legacy-core-theme(())`,
         ],