Replace typography component in stories with Text

.changeset/breezy-rivers-wink.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Replaced usage of text components in component stories with `Text` component

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

@@ -9,7 +9,7 @@ import {
   Page,
   ResourceList,
   SettingToggle,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 
 export default {
@@ -63,7 +63,9 @@ export function Default() {
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
                   <h3>
-                    <TextStyle variation="strong">{name}</TextStyle>
+                    <Text variant="bodyMd" fontWeight="bold" as="span">
+                      {name}
+                    </Text>
                   </h3>
                   <div>{location}</div>
                 </ResourceList.Item>
@@ -121,7 +123,9 @@ export function WithI18n() {
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
                   <h3>
-                    <TextStyle variation="strong">{name}</TextStyle>
+                    <Text variant="bodyMd" fontWeight="bold" as="span">
+                      {name}
+                    </Text>
                   </h3>
                   <div>{location}</div>
                 </ResourceList.Item>

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

@@ -8,7 +8,7 @@ import {
   Stack,
   Tag,
   TextContainer,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 
@@ -481,7 +481,9 @@ export function WithMultiSelectAndVerticalContent() {
       return (
         <p>
           {start}
-          <TextStyle variation="strong">{highlight}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {highlight}
+          </Text>
           {end}
         </p>
       );

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

@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
   Banner,
-  Caption,
+  Text,
   Card,
   DropZone,
   List,
@@ -44,7 +44,10 @@ export function Default() {
               }
             />
             <div>
-              {file.name} <Caption>{file.size} bytes</Caption>
+              {file.name}{' '}
+              <Text variant="bodySm" as="p">
+                {file.size} bytes
+              </Text>
             </div>
           </Stack>
         ))}
@@ -93,7 +96,10 @@ export function WithImageFileUpload() {
             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>
       ))}
@@ -151,7 +157,10 @@ export function WithSingleFileUpload() {
         }
       />
       <div>
-        {file.name} <Caption>{file.size} bytes</Caption>
+        {file.name}{' '}
+        <Text variant="bodySm" as="p">
+          {file.size} bytes
+        </Text>
       </div>
     </Stack>
   );
@@ -190,7 +199,10 @@ export function WithDropOnPage() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}
@@ -245,7 +257,10 @@ export function AcceptsOnlySVGFiles() {
             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>
       ))}
@@ -309,7 +324,10 @@ export function Nested() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}
@@ -378,7 +396,10 @@ export function WithCustomFileUploadText() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}
@@ -424,7 +445,10 @@ export function WithCustomFileDialogTrigger() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text variant="bodySm" as="p">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}

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

@@ -10,7 +10,7 @@ import {
   RangeSlider,
   ResourceList,
   TextField,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 
 export default {
@@ -187,9 +187,9 @@ export function WithAResourceList() {
                 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>
             );
@@ -498,9 +498,9 @@ export function WithChildrenContent() {
                 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>
             );
@@ -625,9 +625,9 @@ export function Disabled() {
                 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>
             );
@@ -771,9 +771,9 @@ export function SomeDisabled() {
                 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>
             );
@@ -899,9 +899,9 @@ export function WithoutClearButton() {
                 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>
             );
@@ -1092,9 +1092,9 @@ export function WithHelpText() {
                 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>
             );
@@ -1288,9 +1288,9 @@ export function WithQueryFieldHidden() {
                 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>
             );
@@ -1484,9 +1484,9 @@ export function WithQueryFieldDisabled() {
                 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>
             );

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

@@ -19,7 +19,7 @@ import {
   TextField,
   Toast,
   TopBar,
-  VisuallyHidden,
+  Text,
 } from '@shopify/polaris';
 import {
   ArrowLeftMinor,
@@ -218,7 +218,7 @@ export function InAnApplication() {
   const loadingMarkup = isLoading ? <Loading /> : null;
 
   const skipToContentTarget = (
-    <VisuallyHidden>
+    <Text variant="bodySm" as="span" visuallyHidden>
       <a
         id="SkipToContentTarget"
         ref={skipToContentRef}
@@ -227,7 +227,7 @@ export function InAnApplication() {
       >
         Account details
       </a>
-    </VisuallyHidden>
+    </Text>
   );
 
   const actualPageMarkup = (
@@ -557,7 +557,7 @@ export function WithAnOffset() {
   const loadingMarkup = isLoading ? <Loading /> : null;
 
   const skipToContentTarget = (
-    <VisuallyHidden>
+    <Text variant="bodySm" as="span" visuallyHidden>
       <a
         id="SkipToContentTarget"
         ref={skipToContentRef}
@@ -566,7 +566,7 @@ export function WithAnOffset() {
       >
         Account details
       </a>
-    </VisuallyHidden>
+    </Text>
   );
 
   const actualPageMarkup = (