From 873ba28f7dc7b7ac5c63580cc85320632eb20884 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 10 Nov 2022 16:37:22 +0000
Subject: [PATCH] fix(material/schematics): improve instructions for dealing
 with typography changes

---
 .../migrations/legacy-components-v15/index.ts | 19 +++++++++++++---
 .../v15/legacy-components-v15.spec.ts         | 22 ++++++++++++++-----
 2 files changed, 32 insertions(+), 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
index a9c532df47d8..04796750c872 100644
--- 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
index 19dfab508fa8..8cd76140d035 100644
--- 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(())`,
         ],