Replace typography components with new Text component

Author: sam-b-rose

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/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/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/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import React, {useContext} from 'react';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {WithinFilterContext} from '../../utilities/within-filter-context';
-import {VisuallyHidden} from '../VisuallyHidden';
+import {Text} from '../Text';
 import {Icon} from '../Icon';
 import type {IconSource} from '../../types';
 
@@ -61,7 +61,9 @@ export function Badge({
     : getDefaultAccessibilityLabel(i18n, progress, status);
 
   let accessibilityMarkup = Boolean(accessibilityLabel) && (
-    <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
+    <Text variant="bodySm" as="span" visuallyHidden>
+      {accessibilityLabel}
+    </Text>
   );
 
   if (progress && !icon) {

polaris-react/src/components/Badge/components/Pip/Pip.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {classNames, variationName} from '../../../../utilities/css';
 import type {Progress, Status} from '../../types';
-import {VisuallyHidden} from '../../../VisuallyHidden';
+import {Text} from '../../../Text';
 import {useI18n} from '../../../../utilities/i18n';
 import {getDefaultAccessibilityLabel} from '../../utils';
 
@@ -32,7 +32,9 @@ export function Pip({
 
   return (
     <span className={className}>
-      <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
+      <Text variant="bodySm" as="span" visuallyHidden>
+        {accessibilityLabel}
+      </Text>
     </span>
   );
 }

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

@@ -19,7 +19,7 @@ import {useUniqueId} from '../../utilities/unique-id';
 import {useI18n} from '../../utilities/i18n';
 import type {Action, DisableableAction, LoadableAction} from '../../types';
 import {Button} from '../Button';
-import {Heading} from '../Heading';
+import {Text} from '../Text';
 import {ButtonGroup} from '../ButtonGroup';
 import {UnstyledButton, unstyledButtonFrom} from '../UnstyledButton';
 import {UnstyledLink} from '../UnstyledLink';
@@ -85,7 +85,9 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
     headingID = `${id}Heading`;
     headingMarkup = (
       <div className={styles.Heading} id={headingID}>
-        <Heading element="p">{title}</Heading>
+        <Text as="p" variant="headingLg">
+          {title}
+        </Text>
       </div>
     );
   }

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

@@ -5,7 +5,7 @@ import {Icon} from '../Icon';
 import {UnstyledLink} from '../UnstyledLink';
 import type {CallbackAction, LinkAction} from '../../types';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
-import {VisuallyHidden} from '../VisuallyHidden';
+import {Text} from '../Text';
 
 import styles from './Breadcrumbs.scss';
 
@@ -27,7 +27,9 @@ export function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
       <span className={styles.Icon}>
         <Icon source={ArrowLeftMinor} />
       </span>
-      <VisuallyHidden>{content}</VisuallyHidden>
+      <Text variant="bodySm" as="span" visuallyHidden>
+        {content}
+      </Text>
     </>
   );
 

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

@@ -7,7 +7,7 @@ import {Card} from '../Card';
 import {TextContainer} from '../TextContainer';
 import {ButtonGroup} from '../ButtonGroup';
 import {Button, buttonFrom} from '../Button';
-import {Heading} from '../Heading';
+import {Text} from '../Text';
 import {Image} from '../Image';
 
 import styles from './CalloutCard.scss';
@@ -78,7 +78,9 @@ export function CalloutCard({
           <div className={styles.CalloutCard}>
             <div className={styles.Content}>
               <div className={styles.Title}>
-                <Heading>{title}</Heading>
+                <Text variant="headingLg" as="h2">
+                  {title}
+                </Text>
               </div>
               <TextContainer>{children}</TextContainer>
               <div className={styles.Buttons}>{buttonMarkup}</div>

polaris-react/src/components/Card/components/Header/Header.tsx

@@ -4,7 +4,7 @@ import type {DisableableAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
 import {ButtonGroup} from '../../../ButtonGroup';
 import {Stack} from '../../../Stack';
-import {Heading} from '../../../Heading';
+import {Text} from '../../../Text';
 import styles from '../../Card.scss';
 
 export interface CardHeaderProps {
@@ -21,7 +21,9 @@ export function Header({children, title, actions}: CardHeaderProps) {
   const titleMarkup = isValidElement(title) ? (
     title
   ) : (
-    <Heading>{title}</Heading>
+    <Text variant="headingLg" as="h2">
+      {title}
+    </Text>
   );
 
   const headingMarkup =

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

@@ -5,7 +5,7 @@ import type {ComplexAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
 import {Stack} from '../../../Stack';
 import {ButtonGroup} from '../../../ButtonGroup';
-import {Subheading} from '../../../Subheading';
+import {Text} from '../../../Text';
 import styles from '../../Card.scss';
 
 export interface CardSectionProps {
@@ -41,7 +41,13 @@ export function Section({
   ) : null;
 
   const titleMarkup =
-    typeof title === 'string' ? <Subheading>{title}</Subheading> : title;
+    typeof title === 'string' ? (
+      <Text variant="headingSm" as="h3">
+        {title}
+      </Text>
+    ) : (
+      title
+    );
 
   const titleAreaMarkup =
     titleMarkup || actionMarkup ? (