Replace typography components with Text (#7530)

### WHY are these changes introduced?

Resolves #6588, resolves #7192, resolves #7584, resolves #7047, resolves
#7197, resolves #7048, resolves #7199, resolves #7206, resolves #7205,
resolves #7598, resolves #7583.

### WHAT is this pull request doing?

Replaces the old typography components with the new `Text` component.
These changes where created using the `replace-text-component`
migration:

```sh
polaris-migrator replace-text-component "./polaris-react/src/**/*.tsx" --relative
```

Additionally, manual updates for the following text mixins have been
updated to either use the `Text` component or the token inside the
classes directly:

- **text-style-body**
- **text-style-heading**
- **text-style-subheading**
- **text-style-caption**
- **text-style-button**
- **text-style-button-large**
- **text-emphasis-subdued**
- **text-emphasis-strong**
- **nav-item-text-attributes**

Co-authored-by: Lo Kim <[email protected]>
Co-authored-by: Kyle Durand <[email protected]>
Co-authored-by: Alex Page <[email protected]>

Author: 4 people

.changeset/calm-wasps-cough.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': patch
+---
+
+Replaced all typography components with the new `Text` component.
+Added support for `text-inverse` color type on `Text`.
+Removed references to the following mixins to use the new `Text` or tokens directly in classes: `text-style-body`, `text-style-heading`, `text-style-subheading`, `text-style-caption`, `text-style-button`, `text-style-button-large`, `text-emphasis-subdued`, `text-emphasis-strong`, `nav-item-text-attributes`.

polaris-react/src/components/AccountConnection/AccountConnection.tsx

@@ -5,7 +5,7 @@ import {Avatar} from '../Avatar';
 import {buttonFrom} from '../Button';
 import {Card} from '../Card';
 import {Stack} from '../Stack';
-import {TextStyle} from '../TextStyle';
+import {Text} from '../Text';
 import {SettingAction} from '../SettingAction';
 
 import styles from './AccountConnection.scss';
@@ -61,7 +61,9 @@ export function AccountConnection({
 
   const detailsMarkup = details ? (
     <div>
-      <TextStyle variation="subdued">{details}</TextStyle>
+      <Text variant="bodyMd" color="subdued" as="span">
+        {details}
+      </Text>
     </div>
   ) : null;
 

polaris-react/src/components/ActionList/ActionList.scss

@@ -15,7 +15,7 @@
   outline: none;
   list-style: none;
   margin: 0;
-  border-top: var(--p-border-divider);
+  border-bottom: var(--p-border-divider);
   padding: var(--p-space-2);
 }
 
@@ -24,16 +24,22 @@
   // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
   > .Section-withoutTitle .Actions {
     border-top: none;
+    border-bottom: none;
   }
 }
 
-.Title {
-  @include text-style-subheading;
-  padding: var(--p-space-3) var(--p-space-4) var(--p-space-3) var(--p-space-4);
+.ActionList .Section {
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators
+  .Actions {
+    padding-top: 0;
+  }
 }
 
-.Section:not(:first-child) .Title {
-  padding-top: var(--p-space-1);
+.ActionList .Section:last-child {
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
+  .Actions {
+    border-bottom: none;
+  }
 }
 
 .Item {

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -6,7 +6,7 @@ import {Scrollable} from '../../../Scrollable';
 import {Icon} from '../../../Icon';
 import {UnstyledLink} from '../../../UnstyledLink';
 import {Badge} from '../../../Badge';
-import {TextStyle} from '../../../TextStyle';
+import {Text} from '../../../Text';
 import styles from '../../ActionList.scss';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 
@@ -63,7 +63,9 @@ export function Item({
   const contentMarkup = helpText ? (
     <span className={styles.ContentBlock}>
       <span className={styles.ContentBlockInner}>{contentText}</span>
-      <TextStyle variation="subdued">{helpText}</TextStyle>
+      <Text variant="bodyMd" color="subdued" as="span">
+        {helpText}
+      </Text>
     </span>
   ) : (
     contentText

polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {Item} from '../Item';
-import {TextStyle} from '../../../../TextStyle';
+import {Text} from '../../../../Text';
 import {UnstyledLink} from '../../../../UnstyledLink';
 
 describe('<Item />', () => {
@@ -54,7 +54,7 @@ describe('<Item />', () => {
   it('renders helpText when the helpText prop is defined', () => {
     const helpText = 'Foo';
     const item = mountWithApp(<Item helpText={helpText} />);
-    expect(item.find(TextStyle)).toContainReactText(helpText);
+    expect(item.find(Text)).toContainReactText(helpText);
   });
 
   it('passes `accessibilityLabel` to `<button />`', () => {

polaris-react/src/components/ActionList/components/Section/Section.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import {Item} from '../Item';
+import {Box} from '../../../Box';
+import {Text} from '../../../Text';
 import type {
   ActionListItemDescriptor,
   ActionListSection,
@@ -56,7 +58,16 @@ export function Section({
   const className = section.title ? undefined : styles['Section-withoutTitle'];
 
   const titleMarkup = section.title ? (
-    <p className={styles.Title}>{section.title}</p>
+    <Box
+      paddingBlockStart="4"
+      paddingInlineStart="4"
+      paddingBlockEnd="2"
+      paddingInlineEnd="4"
+    >
+      <Text as="p" variant="headingXs">
+        {section.title}
+      </Text>
+    </Box>
   ) : null;
 
   let sectionRole;

polaris-react/src/components/AppProvider/AppProvider.scss

@@ -6,7 +6,13 @@
 
 html,
 body {
-  @include text-style-body;
+  font-size: var(--p-font-size-100);
+  line-height: var(--p-font-line-height-2);
+  font-weight: var(--p-font-weight-regular);
+
+  text-transform: initial;
+  letter-spacing: initial;
+
   @include text-emphasis-normal;
 }
 

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx

@@ -6,7 +6,7 @@ import {classNames} from '../../../../utilities/css';
 import {MappedActionContext} from '../../../../utilities/autocomplete';
 import {Listbox} from '../../../Listbox';
 import {Icon} from '../../../Icon';
-import {TextStyle} from '../../../TextStyle';
+import {Text} from '../../../Text';
 import {useI18n} from '../../../../utilities/i18n';
 
 import styles from './MappedAction.scss';
@@ -75,7 +75,11 @@ export function MappedAction({
   const contentMarkup = (
     <div className={styles.Text}>
       <div className={contentOverflowStyle}>{contentText}</div>
-      {helpText ? <TextStyle variation="subdued">{helpText}</TextStyle> : null}
+      {helpText ? (
+        <Text variant="bodyMd" color="subdued" as="span">
+          {helpText}
+        </Text>
+      ) : null}
     </div>
   );
 

polaris-react/src/components/Avatar/Avatar.stories.tsx

@@ -41,10 +41,6 @@ export function ExtraSmall() {
   );
 }
 
-export function Square() {
-  return <Avatar name="Shop One" shape="square" />;
-}
-
 export function ExternalImage() {
   return (
     <Avatar
@@ -55,20 +51,82 @@ export function ExternalImage() {
   );
 }
 
+export function Square() {
+  return <Avatar name="Shop One" shape="square" />;
+}
+
+export function SquareWithInitials() {
+  return (
+    <Stack vertical>
+      <Stack.Item>
+        <Avatar
+          shape="square"
+          initials="OE"
+          name="Oluwayemisi Eun-Jung"
+          size="extraSmall"
+        />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar
+          shape="square"
+          initials="OE"
+          name="Oluwayemisi Eun-Jung"
+          size="small"
+        />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar
+          shape="square"
+          initials="OE"
+          name="Oluwayemisi Eun-Jung"
+          size="medium"
+        />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar
+          shape="square"
+          initials="OE"
+          name="Oluwayemisi Eun-Jung"
+          size="large"
+        />
+      </Stack.Item>
+    </Stack>
+  );
+}
+
 export function Sizes() {
   return (
-    <Stack>
+    <Stack vertical>
+      <Stack.Item>
+        <Avatar name="Farrah" size="extraSmall" />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar name="Farrah" size="small" />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar name="Farrah" size="medium" />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar name="Farrah" size="large" />
+      </Stack.Item>
+    </Stack>
+  );
+}
+
+export function SizesWithInitials() {
+  return (
+    <Stack vertical>
       <Stack.Item>
-        <Avatar customer name="Farrah" size="extraSmall" />
+        <Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="extraSmall" />
       </Stack.Item>
       <Stack.Item>
-        <Avatar customer name="Farrah" size="small" />
+        <Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="small" />
       </Stack.Item>
       <Stack.Item>
-        <Avatar customer name="Farrah" size="medium" />
+        <Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="medium" />
       </Stack.Item>
       <Stack.Item>
-        <Avatar customer name="Farrah" size="large" />
+        <Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="large" />
       </Stack.Item>
     </Stack>
   );

polaris-react/src/components/Badge/Badge.scss

@@ -6,20 +6,12 @@
   padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
   background-color: var(--p-surface-neutral);
   border-radius: var(--p-border-radius-5);
-  font-size: 13px;
-  line-height: var(--p-font-line-height-1);
-  color: var(--p-text);
-  font-weight: var(--p-font-weight-regular);
 
   @media print {
     border: solid var(--p-border-width-1) var(--p-border);
   }
 }
 
-.sizeSmall {
-  font-size: var(--p-font-size-75);
-}
-
 .statusSuccess {
   background-color: var(--p-surface-success);
   color: var(--p-text);