[Text] Bring back heading2xl and associated tokens for mobile use-c…

…ases (#11815) ### WHY are these changes introduced? Part of https://github.com/Shopify/polaris-internal/issues/1529 ### WHAT is this pull request doing? Adds back the Text `heading2xl` variant since it will be kept in the next major version for mobile purposes.
Shopify · Apr 2, 2024 · b19986c · b19986c
1 parent b3c1e09
commit b19986c
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 107 deletions.
diff --git a/polaris-react/src/components/Text/Text.module.css b/polaris-react/src/components/Text/Text.module.css
@@ -125,6 +125,18 @@
   }
 }
 
+.heading2xl {
+  font-size: var(--p-font-size-600);
+  font-weight: var(--p-font-weight-bold);
+  letter-spacing: var(--p-font-letter-spacing-denser);
+  line-height: var(--p-font-line-height-800);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-750);
+    line-height: var(--p-font-line-height-1000);
+  }
+}
+
 .bodyXs {
   font-size: var(--p-font-size-300);
   font-weight: var(--p-font-weight-regular);

diff --git a/polaris-react/src/components/Text/Text.stories.tsx b/polaris-react/src/components/Text/Text.stories.tsx
@@ -8,19 +8,22 @@ export default {
 
 export const Variants = () => (
   <LegacyStack vertical>
-    <Text as="h1" variant="headingXl">
+    <Text as="h1" variant="heading2xl">
+      Text with Heading2xl variant
+    </Text>
+    <Text as="h2" variant="headingXl">
       Text with HeadingXl variant
     </Text>
-    <Text as="h2" variant="headingLg">
+    <Text as="h3" variant="headingLg">
       Text with HeadingLg variant
     </Text>
-    <Text as="h3" variant="headingMd">
+    <Text as="h4" variant="headingMd">
       Text with HeadingMd variant
     </Text>
-    <Text as="h4" variant="headingSm">
+    <Text as="h5" variant="headingSm">
       Text with HeadingSm variant
     </Text>
-    <Text as="h5" variant="headingXs">
+    <Text as="h6" variant="headingXs">
       Text with HeadingXs variant
     </Text>
     <Text as="p" variant="bodyLg">
@@ -109,10 +112,10 @@ export const WithTone = () => (
 );
 
 export const WithInheritance = () => (
-  <Text as="p" variant="headingXl" tone="caution">
-    <Text as="span">This is a Xl heading</Text>
+  <Text as="p" variant="heading2xl" tone="caution">
+    <Text as="span">This is a 2xl heading</Text>
     <br />
-    <Text as="span">This is also a Xl heading</Text>
+    <Text as="span">This is also a 2xl heading</Text>
   </Text>
 );
 

diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx
@@ -25,6 +25,7 @@ type Variant =
   | 'headingMd'
   | 'headingLg'
   | 'headingXl'
+  | 'heading2xl'
   | 'bodyXs'
   | 'bodySm'
   | 'bodyMd'
@@ -49,10 +50,6 @@ type Tone =
 
 type TextDecorationLine = 'line-through';
 
-const deprecatedVariants: {[V in Variant]?: Variant} = {
-  heading2xl: 'headingXl',
-  heading3xl: 'headingXl',
-};
 export interface TextProps {
   /** Adjust horizontal alignment of text */
   alignment?: Alignment;
@@ -94,17 +91,6 @@ export const Text = ({
   visuallyHidden = false,
   textDecorationLine,
 }: TextProps) => {
-  if (
-    process.env.NODE_ENV === 'development' &&
-    variant &&
-    Object.prototype.hasOwnProperty.call(deprecatedVariants, variant)
-  ) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `Deprecation: <Text variant="${variant}" />. The value "${variant}" will be removed in a future major version of Polaris. Use "${deprecatedVariants[variant]}" instead.`,
-    );
-  }
-
   const Component = as || (visuallyHidden ? 'span' : 'p');
 
   const className = classNames(

diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts
@@ -14,13 +14,21 @@ export type FontSizeScale =
   | '450'
   | '500'
   | '550'
-  | '600';
+  | '600'
+  | '750';
 
 export type FontLineHeightPrefix = 'font-line-height';
-export type FontLineHeightScale = '300' | '400' | '500' | '600' | '700' | '800';
+export type FontLineHeightScale =
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '1000';
 
 export type FontLetterSpacingPrefix = 'font-letter-spacing';
-export type FontLetterSpacingAlias = 'dense' | 'normal';
+export type FontLetterSpacingAlias = 'denser' | 'dense' | 'normal';
 
 export type FontWeightPrefix = 'font-weight';
 export type FontWeightAlias = 'regular' | 'medium' | 'semibold' | 'bold';
@@ -81,6 +89,9 @@ export const font: {
   'font-size-600': {
     value: size[600],
   },
+  'font-size-750': {
+    value: size[750],
+  },
   'font-weight-regular': {
     value: '450',
   },
@@ -96,6 +107,9 @@ export const font: {
   'font-letter-spacing-dense': {
     value: '-0.2px',
   },
+  'font-letter-spacing-denser': {
+    value: '-0.3px',
+  },
   'font-letter-spacing-normal': {
     value: '0px',
   },
@@ -117,4 +131,7 @@ export const font: {
   'font-line-height-800': {
     value: size[800],
   },
+  'font-line-height-1000': {
+    value: size[1000],
+  },
 };
diff --git a/polaris-tokens/src/themes/base/text.ts b/polaris-tokens/src/themes/base/text.ts
@@ -4,6 +4,7 @@ import {createVar} from '../../utils';
 import type {FontPrefix} from './font';
 
 export type TextVariant =
+  | 'heading-2xl'
   | 'heading-xl'
   | 'heading-lg'
   | 'heading-md'
@@ -23,6 +24,22 @@ export type TextTokenGroup = {
 export const text: {
   [TokenName in TextTokenName]: MetaTokenProperties;
 } = {
+  // heading-2xl
+  'text-heading-2xl-font-family': {
+    value: createVar('font-family-sans'),
+  },
+  'text-heading-2xl-font-size': {
+    value: createVar('font-size-750'),
+  },
+  'text-heading-2xl-font-weight': {
+    value: createVar('font-weight-bold'),
+  },
+  'text-heading-2xl-font-letter-spacing': {
+    value: createVar('font-letter-spacing-denser'),
+  },
+  'text-heading-2xl-font-line-height': {
+    value: createVar('font-line-height-1000'),
+  },
   // heading-xl
   'text-heading-xl-font-family': {
     value: createVar('font-family-sans'),

diff --git a/polaris.shopify.com/content/components/deprecated/display-text.mdx b/polaris.shopify.com/content/components/deprecated/display-text.mdx
@@ -63,14 +63,14 @@ Display styles make a bold visual statement. Use them to create impact when the
 
 ```diff
 - <DisplayText size="large">Sales this year</DisplayText>
-+ <Text variant="headingXl" as="p">Sales this year</Text>
++ <Text variant="heading2xl" as="p">Sales this year</Text>
 ```
 
 ### Extra large
 
 ```diff
 - <DisplayText size="extraLarge">Sales this year</DisplayText>
-+ <Text variant="headingXl" as="p">Sales this year</Text>
++ <Text variant="heading2xl" as="p">Sales this year</Text>
 ```
 
 ---
diff --git a/polaris.shopify.com/content/components/typography/text.mdx b/polaris.shopify.com/content/components/typography/text.mdx
@@ -66,17 +66,16 @@ Typography helps establish hierarchy and communicate important content by creati
 
 Each variant uses a predetermined combination of the [font tokens](/tokens/font) to set the font size and line height. Heading variants have a set font weight but can be overridden by using the `fontWeight` prop. Nested Text components will inherit properties from its parent Text container.
 
-| Variant     | Font size token     | px value | rem value | Font line height token | Font weight token          | Responsive |
-| ----------- | ------------------- | -------- | --------- | ---------------------- | -------------------------- | ---------- |
-| `headingXl` | `--p-font-size-600` | 24       | 1.5       | `--p-line-height-800`  | `--p-font-weight-bold`     | Yes        |
-| `headingLg` | `--p-font-size-500` | 20       | 1.25      | `--p-line-height-600`  | `--p-font-weight-semibold` | Yes        |
-| `headingMd` | `--p-font-size-350` | 14       | 0.875     | `--p-line-height-500`  | `--p-font-weight-semibold` | No         |
-| `headingSm` | `--p-font-size-325` | 13       | 0.8125    | `--p-line-height-500`  | `--p-font-weight-semibold` | No         |
-| `headingXs` | `--p-font-size-300` | 12       | 0.75      | `--p-line-height-400`  | `--p-font-weight-semibold` | No         |
-| `bodyLg`    | `--p-font-size-350` | 14       | 0.875     | `--p-line-height-500`  | `--p-font-weight-regular`  | No         |
-| `bodyMd`    | `--p-font-size-325` | 13       | 0.8125    | `--p-line-height-500`  | `--p-font-weight-regular`  | No         |
-| `bodySm`    | `--p-font-size-300` | 12       | 0.75      | `--p-line-height-400`  | `--p-font-weight-regular`  | No         |
-| `bodyXs`    | `--p-font-size-275` | 11       | 0.6875    | `--p-line-height-300`  | `--p-font-weight-regular`  | No         |
+| Variant      | Font size token     | px value | rem value | Font line height token | Font weight token          | Responsive |
+| ------------ | ------------------- | -------- | --------- | ---------------------- | -------------------------- | ---------- |
+| `heading2xl` | `--p-font-size-750` | 30       | 1.875     | `--p-line-height-1000` | `--p-font-weight-bold`     | Yes        |
+| `headingMd`  | `--p-font-size-350` | 14       | 0.875     | `--p-line-height-500`  | `--p-font-weight-semibold` | No         |
+| `headingSm`  | `--p-font-size-325` | 13       | 0.8125    | `--p-line-height-500`  | `--p-font-weight-semibold` | No         |
+| `headingXs`  | `--p-font-size-300` | 12       | 0.75      | `--p-line-height-400`  | `--p-font-weight-semibold` | No         |
+| `bodyLg`     | `--p-font-size-350` | 14       | 0.875     | `--p-line-height-500`  | `--p-font-weight-regular`  | No         |
+| `bodyMd`     | `--p-font-size-325` | 13       | 0.8125    | `--p-line-height-500`  | `--p-font-weight-regular`  | No         |
+| `bodySm`     | `--p-font-size-300` | 12       | 0.75      | `--p-line-height-400`  | `--p-font-weight-regular`  | No         |
+| `bodyXs`     | `--p-font-size-275` | 11       | 0.6875    | `--p-line-height-300`  | `--p-font-weight-regular`  | No         |
 
 ---
 
@@ -104,14 +103,14 @@ These are suggested replacements for existing text style components, but ultimat
 
 ```diff
 - <DisplayText size="large">Sales this year</DisplayText>
-+ <Text variant="headingXl" as="p">Sales this year</Text>
++ <Text variant="heading2xl" as="p">Sales this year</Text>
 ```
 
 #### Extra large
 
 ```diff
 - <DisplayText size="extraLarge">Sales this year</DisplayText>
-+ <Text variant="headingXl" as="p">Sales this year</Text>
++ <Text variant="heading2xl" as="p">Sales this year</Text>
 ```
 
 ### Heading

diff --git a/polaris.shopify.com/content/version-guides/migrating-from-v12-to-v13.mdx b/polaris.shopify.com/content/version-guides/migrating-from-v12-to-v13.mdx
@@ -123,44 +123,13 @@ git commit -m "[Manual] Migrate X from Polaris v12 to v13"
 
 ### Text
 
-#### Replace `variant="heading2xl"` prop with `variant="headingXl"`
+#### Replace `variant="heading3xl"` prop with `variant="heading2xl"`
 
 <Code
   code={{
     title: 'polaris-migrator codemod',
     className: 'language-bash',
-    code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Text --fromProp variant --fromValue heading2xl --toValue headingXl "**/*.{ts,tsx}"`,
-  }}
-/>
-
-<CollapsibleDetails summary="✅ Post-migration RegExp validation">
-
-<Code
-  code={{
-    className: 'language-regex',
-    title: `Check RegExp for outdated <Text variant="heading2xl" /> prop`,
-    code: String.raw`<Text[^>\w](?:[^>]|\n)*?variant="heading2xl"`,
-  }}
-/>
-
-</CollapsibleDetails>
-
-<CollapsibleDetails summary="💡 Migration example">
-
-```diff
-- <Text variant="heading2xl">
-+ <Text variant="headingXl">
-```
-
-</CollapsibleDetails>
-
-#### Replace `variant="heading3xl"` prop with `variant="headingXl"`
-
-<Code
-  code={{
-    title: 'polaris-migrator codemod',
-    className: 'language-bash',
-    code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Text --fromProp variant --fromValue heading3xl --toValue headingXl "**/*.{ts,tsx}"`,
+    code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Text --fromProp variant --fromValue heading3xl --toValue heading2xl "**/*.{ts,tsx}"`,
   }}
 />
 
@@ -180,7 +149,7 @@ git commit -m "[Manual] Migrate X from Polaris v12 to v13"
 
 ```diff
 - <Text variant="heading3xl">
-+ <Text variant="headingXl">
++ <Text variant="heading2xl">
 ```
 
 </CollapsibleDetails>
@@ -194,18 +163,18 @@ To replace deprecated `font` custom properties, you can run the [v13-styles-repl
 <CollapsibleDetails summary="💡 Migration example">
 
 ```diff
-- font-size: var(--p-font-size-750);
-+ font-size: var(--p-font-size-600);
+- font-size: var(--p-font-size-800);
++ font-size: var(--p-font-size-750);
 ```
 
 ```diff
-- letter-spacing: var(--p-font-letter-spacing-denser);
-+ letter-spacing: var(--p-font-letter-spacing-dense);
+- letter-spacing: var(--p-font-letter-spacing-densest);
++ letter-spacing: var(--p-font-letter-spacing-denser);
 ```
 
 ```diff
-- line-height: var(--p-font-line-height-1000);
-+ line-height: var(--p-font-line-height-800);
+- line-height: var(--p-font-line-height-1200);
++ line-height: var(--p-font-line-height-1000);
 ```
 
 </CollapsibleDetails>
@@ -226,33 +195,25 @@ To replace deprecated `font` custom properties, you can run the [v13-styles-repl
     code={{
       title:
         'Check RegExp for hardcoded font custom properties across all file types',
-      code: String.raw`(?:--p-font-size-750|--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-denser|--p-font-letter-spacing-densest|--p-font-line-height-1000|--p-font-line-height-1200)|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height|--p-text-heading-2xl-font-family|--p-text-heading-2xl-font-size|--p-text-heading-2xl-font-weight|--p-text-heading-2xl-font-letter-spacing|--p-text-heading-2xl-font-line-height(?![\w-])`,
+      code: String.raw`(?:--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-densest|--p-font-line-height-1200|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height(?![\w-])`,
     }}
   />
 </CollapsibleDetails>
 
 <CollapsibleDetails summary="➡️ Token replacement mappings">
 
-| Deprecated Token                           | Replacement Value                         |
-| ------------------------------------------ | ----------------------------------------- |
-| `--p-font-size-750`                        | `--p-font-size-600`                       |
-| `--p-font-size-800`                        | `--p-font-size-600`                       |
-| `--p-font-size-900`                        | `--p-font-size-600`                       |
-| `--p-font-size-1000`                       | `--p-font-size-600`                       |
-| `--p-font-letter-spacing-denser`           | `--p-font-letter-spacing-dense`           |
-| `--p-font-letter-spacing-densest`          | `--p-font-letter-spacing-dense`           |
-| `--p-font-line-height-1000`                | `--p-font-line-height-800`                |
-| `--p-font-line-height-1200`                | `--p-font-line-height-800`                |
-| `--p-text-heading-2xl-font-family`         | `--p-text-heading-xl-font-family`         |
-| `--p-text-heading-2xl-font-size`           | `--p-text-heading-xl-font-size`           |
-| `--p-text-heading-2xl-font-weight`         | `--p-text-heading-xl-font-weight`         |
-| `--p-text-heading-2xl-font-letter-spacing` | `--p-text-heading-xl-font-letter-spacing` |
-| `--p-text-heading-2xl-font-line-height`    | `--p-text-heading-xl-font-line-height`    |
-| `--p-text-heading-3xl-font-family`         | `--p-text-heading-xl-font-family`         |
-| `--p-text-heading-3xl-font-size`           | `--p-text-heading-xl-font-size`           |
-| `--p-text-heading-3xl-font-weight`         | `--p-text-heading-xl-font-weight`         |
-| `--p-text-heading-3xl-font-letter-spacing` | `--p-text-heading-xl-font-letter-spacing` |
-| `--p-text-heading-3xl-font-line-height`    | `--p-text-heading-xl-font-line-height`    |
+| Deprecated Token                           | Replacement Value                          |
+| ------------------------------------------ | ------------------------------------------ |
+| `--p-font-size-800`                        | `--p-font-size-750`                        |
+| `--p-font-size-900`                        | `--p-font-size-750`                        |
+| `--p-font-size-1000`                       | `--p-font-size-750`                        |
+| `--p-font-letter-spacing-densest`          | `--p-font-letter-spacing-denser`           |
+| `--p-font-line-height-1200`                | `--p-font-line-height-1000`                |
+| `--p-text-heading-3xl-font-family`         | `--p-text-heading-2xl-font-family`         |
+| `--p-text-heading-3xl-font-size`           | `--p-text-heading-2xl-font-size`           |
+| `--p-text-heading-3xl-font-weight`         | `--p-text-heading-2xl-font-weight`         |
+| `--p-text-heading-3xl-font-letter-spacing` | `--p-text-heading-2xl-font-letter-spacing` |
+| `--p-text-heading-3xl-font-line-height`    | `--p-text-heading-2xl-font-line-height`    |
 
 </CollapsibleDetails>
 

diff --git a/polaris.shopify.com/pages/components/[group]/[component]/index.tsx b/polaris.shopify.com/pages/components/[group]/[component]/index.tsx
@@ -76,11 +76,7 @@ const componentUnionTypeDeprecations: {
   [componentName: string]: {
     [typeName: string]: string[];
   };
-} = {
-  Text: {
-    Variant: ['heading2xl', 'heading3xl'],
-  },
-};
+} = {};
 
 export const getStaticProps: GetStaticProps<
   Props,