[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" ```  ### 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
Shopify · Nov 3, 2022 · 4db4417 · 4db4417
1 parent b7b0ef5
commit 4db4417
Show file tree

Hide file tree

Showing 73 changed files with 335 additions and 377 deletions.
diff --git a/.changeset/blue-tools-fetch.md b/.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
diff --git a/polaris.shopify.com/pages/examples/app-provider-default.tsx b/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>
               );

diff --git a/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx b/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>
               );

diff --git a/polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx b/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>
         }
       >

diff --git a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx b/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>
       );

diff --git a/polaris.shopify.com/pages/examples/drop-zone-accepts-only-svg-files.tsx b/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>
       ))}

diff --git a/polaris.shopify.com/pages/examples/drop-zone-default.tsx b/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>
         ))}

diff --git a/polaris.shopify.com/pages/examples/drop-zone-nested.tsx b/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>
       ))}

diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-custom-file-dialog-trigger.tsx b/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>
       ))}

diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-custom-file-upload-text.tsx b/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>
       ))}

diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-drop-on-page.tsx b/polaris.shopify.com/pages/examples/drop-zone-with-drop-on-page.tsx
@@ -1,4 +1,4 @@
-import {Stack, Thumbnail, Caption, DropZone, Page} from '@shopify/polaris';
+import {Stack, Thumbnail, DropZone, Page, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -28,7 +28,10 @@ function DropZoneWithDropOnPageExample() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}

diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-image-file-upload.tsx b/polaris.shopify.com/pages/examples/drop-zone-with-image-file-upload.tsx
@@ -1,11 +1,4 @@
-import {
-  DropZone,
-  Stack,
-  Thumbnail,
-  Caption,
-  Banner,
-  List,
-} from '@shopify/polaris';
+import {DropZone, Stack, Thumbnail, Banner, List, Text} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -33,7 +26,10 @@ function DropZoneWithImageFileUpload() {
             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>
       ))}

diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-single-file-upload.tsx b/polaris.shopify.com/pages/examples/drop-zone-with-single-file-upload.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';
@@ -27,7 +27,10 @@ function DropZoneExample() {
         }
       />
       <div>
-        {file.name} <Caption>{file.size} bytes</Caption>
+        {file.name}{' '}
+        <Text variant="bodySm" as="p">
+          {file.size} bytes
+        </Text>
       </div>
     </Stack>
   );

diff --git a/polaris.shopify.com/pages/examples/filters-disabled.tsx b/polaris.shopify.com/pages/examples/filters-disabled.tsx
@@ -5,7 +5,7 @@ import {
   Filters,
   Button,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -107,9 +107,9 @@ function DisableAllFiltersExample() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );

diff --git a/polaris.shopify.com/pages/examples/filters-some-disabled.tsx b/polaris.shopify.com/pages/examples/filters-some-disabled.tsx
@@ -5,7 +5,7 @@ import {
   Filters,
   Button,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -126,9 +126,9 @@ function DisableSomeFiltersExample() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );

diff --git a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx b/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
@@ -6,7 +6,7 @@ import {
   ResourceList,
   Filters,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -172,9 +172,9 @@ function ResourceListFiltersExample() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );

diff --git a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx b/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
@@ -5,7 +5,7 @@ import {
   Filters,
   Button,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -103,9 +103,9 @@ function FiltersExample() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );

diff --git a/polaris.shopify.com/pages/examples/filters-with-help-text.tsx b/polaris.shopify.com/pages/examples/filters-with-help-text.tsx
@@ -6,7 +6,7 @@ import {
   ResourceList,
   Filters,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -174,9 +174,9 @@ function ResourceListFiltersExample() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );

diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx b/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
@@ -6,7 +6,7 @@ import {
   ResourceList,
   Filters,
   Avatar,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -173,9 +173,9 @@ function ResourceListFiltersExample() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );