[polaris.shopify.com] Replace typography with Text component (#7634)

### WHY are these changes introduced?

Resolves #6588.

### WHAT is this pull request doing?

Replaces usage of legacy typography components in the style guide to use
the new `<Text />` component with the polaris migrator:
```sh
polaris-migrator replace-text-component "./polaris.shopify.com/pages/**/*.tsx"
```

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: laurkim

.changeset/blue-tools-fetch.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Replaced usage of typography components (`DisplayText`, `Heading`, `Subheading`, `Caption`, `VisuallyHidden`, `TextStyle`) with the new `Text` component

polaris.shopify.com/pages/examples/app-provider-default.tsx

@@ -4,7 +4,7 @@ import {
   Card,
   ResourceList,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -53,9 +53,9 @@ function AppProviderExample() {
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
-                  <h3>
-                    <TextStyle variation="strong">{name}</TextStyle>
-                  </h3>
+                  <Text variant="bodyMd" fontWeight="bold" as="h3">
+                    {name}
+                  </Text>
                   <div>{location}</div>
                 </ResourceList.Item>
               );

polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx

@@ -4,7 +4,7 @@ import {
   Card,
   ResourceList,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -53,9 +53,9 @@ function AppProviderI18NExample() {
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
-                  <h3>
-                    <TextStyle variation="strong">{name}</TextStyle>
-                  </h3>
+                  <Text variant="bodyMd" fontWeight="bold" as="h3">
+                    {name}
+                  </Text>
                   <div>{location}</div>
                 </ResourceList.Item>
               );

polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx

@@ -1,4 +1,4 @@
-import {Card, Stack, Icon, Subheading, List} from '@shopify/polaris';
+import {Card, Stack, Icon, List, Text} from '@shopify/polaris';
 import {ProductsMajor} from '@shopify/polaris-icons';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -10,7 +10,9 @@ function CardExample() {
         title={
           <Stack>
             <Icon source={ProductsMajor} />
-            <Subheading>New Products</Subheading>
+            <Text variant="headingXs" as="h3">
+              New Products
+            </Text>
           </Stack>
         }
       >

polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx

@@ -1,10 +1,10 @@
 import {
-  TextStyle,
   Stack,
   Tag,
   Listbox,
   EmptySearchResult,
   Combobox,
+  Text,
 } from '@shopify/polaris';
 import {useState, useCallback, useMemo} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -68,7 +68,9 @@ function MultiselectTagComboboxExample() {
       return (
         <p>
           {start}
-          <TextStyle variation="strong">{highlight}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {highlight}
+          </Text>
           {end}
         </p>
       );

polaris.shopify.com/pages/examples/drop-zone-accepts-only-svg-files.tsx

@@ -1,11 +1,4 @@
-import {
-  Stack,
-  Thumbnail,
-  Caption,
-  Banner,
-  List,
-  DropZone,
-} from '@shopify/polaris';
+import {Stack, Thumbnail, Banner, List, DropZone, Text} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -32,7 +25,10 @@ function DropZoneAcceptingSVGFilesExample() {
             source={window.URL.createObjectURL(file)}
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}

polaris.shopify.com/pages/examples/drop-zone-default.tsx

@@ -1,4 +1,4 @@
-import {DropZone, Stack, Thumbnail, Caption} from '@shopify/polaris';
+import {DropZone, Stack, Thumbnail, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -30,7 +30,10 @@ function DropZoneExample() {
               }
             />
             <div>
-              {file.name} <Caption>{file.size} bytes</Caption>
+              {file.name}{' '}
+              <Text variant="bodySm" as="p">
+                {file.size} bytes
+              </Text>
             </div>
           </Stack>
         ))}

polaris.shopify.com/pages/examples/drop-zone-nested.tsx

@@ -1,4 +1,4 @@
-import {DropZone, Stack, Thumbnail, Caption, Card} from '@shopify/polaris';
+import {DropZone, Stack, Thumbnail, Card, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -29,7 +29,10 @@ function NestedDropZoneExample() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}

polaris.shopify.com/pages/examples/drop-zone-with-custom-file-dialog-trigger.tsx

@@ -1,4 +1,4 @@
-import {Stack, Thumbnail, Caption, Card, DropZone} from '@shopify/polaris';
+import {Stack, Thumbnail, Card, DropZone, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -33,7 +33,10 @@ function DropZoneWithCustomFileDialogExample() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}

polaris.shopify.com/pages/examples/drop-zone-with-custom-file-upload-text.tsx

@@ -1,4 +1,4 @@
-import {DropZone, Stack, Thumbnail, Caption} from '@shopify/polaris';
+import {DropZone, Stack, Thumbnail, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -32,7 +32,10 @@ function DropZoneExample() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}