From f528acfab81c478af17436eeb0dfa768fdb37687 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Fri, 28 Oct 2022 16:15:36 -0400
Subject: [PATCH 1/6] Replace typography component in stories with Text

---
 .../AppProvider/AppProvider.stories.tsx       | 10 ++-
 .../components/Combobox/Combobox.stories.tsx  |  6 +-
 .../components/DropZone/DropZone.stories.tsx  | 42 ++++++++---
 .../components/Filters/Filters.stories.tsx    | 34 ++++++---
 .../src/components/Frame/Frame.stories.tsx    | 10 +--
 .../IndexTable/IndexTable.stories.tsx         | 70 ++++++++++++++-----
 .../src/components/Inline/Inline.stories.tsx  |  2 +-
 .../src/components/Layout/Layout.stories.tsx  | 43 ++++++++----
 .../Navigation/Navigation.stories.tsx         |  6 +-
 .../ResourceItem/ResourceItem.stories.tsx     | 24 ++++---
 .../ResourceList/ResourceList.stories.tsx     | 54 ++++++++++----
 .../src/components/Select/Select.stories.tsx  |  6 +-
 .../SettingToggle/SettingToggle.stories.tsx   |  8 ++-
 .../src/components/Sheet/Sheet.stories.tsx    | 24 ++++---
 .../src/components/Stack/Stack.stories.tsx    | 18 +++--
 .../TextContainer/TextContainer.stories.tsx   | 10 ++-
 .../components/Tooltip/Tooltip.stories.tsx    | 12 ++--
 .../src/components/TopBar/TopBar.stories.tsx  | 12 ++--
 18 files changed, 264 insertions(+), 127 deletions(-)

diff --git a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
index 864690191b7..08c12f70a11 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
+++ b/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>
diff --git a/polaris-react/src/components/Combobox/Combobox.stories.tsx b/polaris-react/src/components/Combobox/Combobox.stories.tsx
index a984a4332ba..22d1e710871 100644
--- a/polaris-react/src/components/Combobox/Combobox.stories.tsx
+++ b/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>
       );
diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
index 37426f79423..391d4fb6a37 100644
--- a/polaris-react/src/components/DropZone/DropZone.stories.tsx
+++ b/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>
       ))}
diff --git a/polaris-react/src/components/Filters/Filters.stories.tsx b/polaris-react/src/components/Filters/Filters.stories.tsx
index 67a86e2e435..be695aaff50 100644
--- a/polaris-react/src/components/Filters/Filters.stories.tsx
+++ b/polaris-react/src/components/Filters/Filters.stories.tsx
@@ -10,7 +10,7 @@ import {
   RangeSlider,
   ResourceList,
   TextField,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 
 export default {
@@ -188,7 +188,9 @@ export function WithAResourceList() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
@@ -499,7 +501,9 @@ export function WithChildrenContent() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
@@ -626,7 +630,9 @@ export function Disabled() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
@@ -772,7 +778,9 @@ export function SomeDisabled() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
@@ -900,7 +908,9 @@ export function WithoutClearButton() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
@@ -1093,7 +1103,9 @@ export function WithHelpText() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
@@ -1289,7 +1301,9 @@ export function WithQueryFieldHidden() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
@@ -1485,7 +1499,9 @@ export function WithQueryFieldDisabled() {
                 accessibilityLabel={`View details for ${name}`}
               >
                 <h3>
-                  <TextStyle variation="strong">{name}</TextStyle>
+                  <Text variant="bodyMd" fontWeight="bold" as="span">
+                    {name}
+                  </Text>
                 </h3>
                 <div>{location}</div>
               </ResourceList.Item>
diff --git a/polaris-react/src/components/Frame/Frame.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx
index 40d5efe32d2..0e6d44d065e 100644
--- a/polaris-react/src/components/Frame/Frame.stories.tsx
+++ b/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 = (
diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
index 4708780d521..375aad5665b 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -9,7 +9,7 @@ import {
   Link,
   Select,
   TextField,
-  TextStyle,
+  Text,
   useIndexResourceState,
 } from '@shopify/polaris';
 
@@ -53,7 +53,9 @@ export function Default() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -120,7 +122,9 @@ export function Flush() {
         position={index}
       >
         <IndexTable.Cell flush>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell flush>{location}</IndexTable.Cell>
         <IndexTable.Cell flush>{orders}</IndexTable.Cell>
@@ -188,7 +192,9 @@ export function SmallScreen() {
       >
         <div style={{padding: '12px 16px'}}>
           <p>
-            <TextStyle variation="strong">{name}</TextStyle>
+            <Text variant="bodyMd" fontWeight="bold" as="span">
+              {name}
+            </Text>
           </p>
           <p>{location}</p>
           <p>{orders}</p>
@@ -250,7 +256,9 @@ export function WithEmptyState() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -339,7 +347,9 @@ export function WithBulkActions() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -455,7 +465,9 @@ export function WithMultiplePromotedBulkActions() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -545,7 +557,9 @@ export function WithBulkActionsAndSelectionAcrossPages() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -615,7 +629,9 @@ export function WithLoadingState() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -731,7 +747,9 @@ export function WithFiltering() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -839,7 +857,9 @@ export function WithRowStatus() {
         status={status}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -927,7 +947,9 @@ export function WithStickyLastColumn() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -1008,7 +1030,9 @@ export function WithRowNavigationLink() {
             url={url}
             onClick={() => console.log(`Clicked ${name}`)}
           >
-            <TextStyle variation="strong">{name}</TextStyle>
+            <Text variant="bodyMd" fontWeight="bold" as="span">
+              {name}
+            </Text>
           </Link>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
@@ -1081,7 +1105,9 @@ export function WithClickableButtonColumn() {
             url={url}
             onClick={() => console.log(`Clicked ${name}`)}
           >
-            <TextStyle variation="strong">{name}</TextStyle>
+            <Text variant="bodyMd" fontWeight="bold" as="span">
+              {name}
+            </Text>
           </Button>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
@@ -1141,7 +1167,9 @@ export function WithoutCheckboxes() {
     ({id, name, location, orders, amountSpent}, index) => (
       <IndexTable.Row id={id} key={id} position={index}>
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -1274,7 +1302,9 @@ export function WithAllOfItsElements() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -1468,7 +1498,9 @@ export function WithSortableHeadings() {
         position={index}
       >
         <IndexTable.Cell>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </IndexTable.Cell>
         <IndexTable.Cell>{date}</IndexTable.Cell>
         <IndexTable.Cell>{orders}</IndexTable.Cell>
@@ -1619,7 +1651,9 @@ export function SmallScreenWithAllOfItsElements() {
       >
         <div style={{padding: '.75rem 1rem'}}>
           <p>
-            <TextStyle variation="strong">{name}</TextStyle>
+            <Text variant="bodyMd" fontWeight="bold" as="span">
+              {name}
+            </Text>
           </p>
           <p>{location}</p>
           <p>{orders}</p>
diff --git a/polaris-react/src/components/Inline/Inline.stories.tsx b/polaris-react/src/components/Inline/Inline.stories.tsx
index fd56382c62e..da57cae59ac 100644
--- a/polaris-react/src/components/Inline/Inline.stories.tsx
+++ b/polaris-react/src/components/Inline/Inline.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Box, Badge, Heading, Icon, Inline, Thumbnail} from '@shopify/polaris';
+import {Box, Badge, Icon, Inline, Thumbnail} from '@shopify/polaris';
 import {CapitalMajor, ImageMajor} from '@shopify/polaris-icons';
 
 export default {
diff --git a/polaris-react/src/components/Layout/Layout.stories.tsx b/polaris-react/src/components/Layout/Layout.stories.tsx
index 932eb95b8bf..799d4bc5c92 100644
--- a/polaris-react/src/components/Layout/Layout.stories.tsx
+++ b/polaris-react/src/components/Layout/Layout.stories.tsx
@@ -4,13 +4,12 @@ import {
   Banner,
   Card,
   FormLayout,
-  Heading,
+  Text,
   Layout,
   Page,
   ResourceList,
   TextContainer,
   TextField,
-  TextStyle,
   Thumbnail,
 } from '@shopify/polaris';
 
@@ -63,7 +62,9 @@ export function TwoColumnsWithEqualWidth() {
         <Layout.Section oneHalf>
           <Card title="Florida" actions={[{content: 'Manage'}]}>
             <Card.Section>
-              <TextStyle variation="subdued">455 units available</TextStyle>
+              <Text variant="bodyMd" color="subdued" as="span">
+                455 units available
+              </Text>
             </Card.Section>
             <Card.Section title="Items">
               <ResourceList
@@ -107,7 +108,9 @@ export function TwoColumnsWithEqualWidth() {
                       accessibilityLabel={`View details for ${name}`}
                     >
                       <h3>
-                        <TextStyle variation="strong">{name}</TextStyle>
+                        <Text variant="bodyMd" fontWeight="bold" as="span">
+                          {name}
+                        </Text>
                       </h3>
                       <div>SKU: {sku}</div>
                       <div>{quantity} available</div>
@@ -121,7 +124,9 @@ export function TwoColumnsWithEqualWidth() {
         <Layout.Section oneHalf>
           <Card title="Nevada" actions={[{content: 'Manage'}]}>
             <Card.Section>
-              <TextStyle variation="subdued">301 units available</TextStyle>
+              <Text variant="bodyMd" color="subdued" as="span">
+                301 units available
+              </Text>
             </Card.Section>
             <Card.Section title="Items">
               <ResourceList
@@ -165,7 +170,9 @@ export function TwoColumnsWithEqualWidth() {
                       accessibilityLabel={`View details for ${name}`}
                     >
                       <h3>
-                        <TextStyle variation="strong">{name}</TextStyle>
+                        <Text variant="bodyMd" fontWeight="bold" as="span">
+                          {name}
+                        </Text>
                       </h3>
                       <div>SKU: {sku}</div>
                       <div>{quantity} available</div>
@@ -188,7 +195,9 @@ export function ThreeColumnsWithEqualWidth() {
         <Layout.Section oneThird>
           <Card title="Florida" actions={[{content: 'Manage'}]}>
             <Card.Section>
-              <TextStyle variation="subdued">455 units available</TextStyle>
+              <Text variant="bodyMd" color="subdued" as="span">
+                455 units available
+              </Text>
             </Card.Section>
             <Card.Section title="Items">
               <ResourceList
@@ -232,7 +241,9 @@ export function ThreeColumnsWithEqualWidth() {
                       accessibilityLabel={`View details for ${name}`}
                     >
                       <h3>
-                        <TextStyle variation="strong">{name}</TextStyle>
+                        <Text variant="bodyMd" fontWeight="bold" as="span">
+                          {name}
+                        </Text>
                       </h3>
                       <div>SKU: {sku}</div>
                       <div>{quantity} available</div>
@@ -246,7 +257,9 @@ export function ThreeColumnsWithEqualWidth() {
         <Layout.Section oneThird>
           <Card title="Nevada" actions={[{content: 'Manage'}]}>
             <Card.Section>
-              <TextStyle variation="subdued">301 units available</TextStyle>
+              <Text variant="bodyMd" color="subdued" as="span">
+                301 units available
+              </Text>
             </Card.Section>
             <Card.Section title="Items">
               <ResourceList
@@ -290,7 +303,9 @@ export function ThreeColumnsWithEqualWidth() {
                       accessibilityLabel={`View details for ${name}`}
                     >
                       <h3>
-                        <TextStyle variation="strong">{name}</TextStyle>
+                        <Text variant="bodyMd" fontWeight="bold" as="span">
+                          {name}
+                        </Text>
                       </h3>
                       <div>SKU: {sku}</div>
                       <div>{quantity} available</div>
@@ -304,7 +319,9 @@ export function ThreeColumnsWithEqualWidth() {
         <Layout.Section oneThird>
           <Card title="Minneapolis" actions={[{content: 'Manage'}]}>
             <Card.Section>
-              <TextStyle variation="subdued">1931 units available</TextStyle>
+              <Text variant="bodyMd" color="subdued" as="span">
+                1931 units available
+              </Text>
             </Card.Section>
             <Card.Section title="Items">
               <ResourceList
@@ -348,7 +365,9 @@ export function ThreeColumnsWithEqualWidth() {
                       accessibilityLabel={`View details for ${name}`}
                     >
                       <h3>
-                        <TextStyle variation="strong">{name}</TextStyle>
+                        <Text variant="bodyMd" fontWeight="bold" as="span">
+                          {name}
+                        </Text>
                       </h3>
                       <div>SKU: {sku}</div>
                       <div>{quantity} available</div>
diff --git a/polaris-react/src/components/Navigation/Navigation.stories.tsx b/polaris-react/src/components/Navigation/Navigation.stories.tsx
index 9c7b0aaeedc..b464659139e 100644
--- a/polaris-react/src/components/Navigation/Navigation.stories.tsx
+++ b/polaris-react/src/components/Navigation/Navigation.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Frame, Navigation, VisuallyHidden} from '@shopify/polaris';
+import {Frame, Navigation, Text} from '@shopify/polaris';
 import {
   CirclePlusOutlineMinor,
   CustomersMajor,
@@ -468,9 +468,9 @@ export function WithAriaLabelledby() {
   return (
     <Frame>
       <Navigation location="/" ariaLabelledBy="label-id">
-        <VisuallyHidden>
+        <Text variant="bodySm" as="span" visuallyHidden>
           <p id="label-id">Hidden label</p>
-        </VisuallyHidden>
+        </Text>
         <Navigation.Section
           items={[
             {
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx
index a6a33666690..14a1db4aa31 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx
@@ -1,12 +1,6 @@
 import React, {useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {
-  Avatar,
-  Card,
-  ResourceItem,
-  ResourceList,
-  TextStyle,
-} from '@shopify/polaris';
+import {Avatar, Card, ResourceItem, ResourceList, Text} from '@shopify/polaris';
 
 export default {
   component: ResourceItem,
@@ -41,7 +35,9 @@ export function Default() {
               name={title}
             >
               <h3>
-                <TextStyle variation="strong">{title}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {title}
+                </Text>
               </h3>
               {authorMarkup}
             </ResourceItem>
@@ -86,7 +82,9 @@ export function WithMedia() {
               name={name}
             >
               <h3>
-                <TextStyle variation="strong">{name}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
               </h3>
               <div>{location}</div>
             </ResourceItem>
@@ -136,7 +134,9 @@ export function WithShortcutActions() {
               name={name}
             >
               <h3>
-                <TextStyle variation="strong">{name}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
               </h3>
               <div>{location}</div>
             </ResourceItem>
@@ -182,7 +182,9 @@ export function WithVerticalAlignment() {
               name={name}
             >
               <h3>
-                <TextStyle variation="strong">{name}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
               </h3>
               <div>{location}</div>
               <div>{lastOrder}</div>
diff --git a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
index 0ceff5fc780..6b614ff7844 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
+++ b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
@@ -11,7 +11,7 @@ import {
   ResourceItem,
   ResourceList,
   TextField,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 
 export default {
@@ -49,7 +49,9 @@ export function Default() {
               accessibilityLabel={`View details for ${name}`}
             >
               <h3>
-                <TextStyle variation="strong">{name}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
               </h3>
               <div>{location}</div>
             </ResourceItem>
@@ -155,7 +157,9 @@ export function WithSelectionAndNoBulkActions() {
         accessibilityLabel={`View details for ${name}`}
       >
         <h3>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </h3>
         <div>{location}</div>
       </ResourceItem>
@@ -234,7 +238,9 @@ export function WithBulkActions() {
         accessibilityLabel={`View details for ${name}`}
       >
         <h3>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </h3>
         <div>{location}</div>
       </ResourceItem>
@@ -314,7 +320,9 @@ export function WithLoadingState() {
         accessibilityLabel={`View details for ${name}`}
       >
         <h3>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </h3>
         <div>{location}</div>
       </ResourceItem>
@@ -353,7 +361,9 @@ export function WithTotalCount() {
               accessibilityLabel={`View details for ${name}`}
             >
               <h3>
-                <TextStyle variation="strong">{name}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
               </h3>
               <div>{location}</div>
             </ResourceItem>
@@ -420,7 +430,9 @@ export function WithSorting() {
         accessibilityLabel={`View details for ${name}`}
       >
         <h3>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </h3>
         <div>{location}</div>
       </ResourceItem>
@@ -472,7 +484,9 @@ export function WithAlternateTool() {
         accessibilityLabel={`View details for ${name}`}
       >
         <h3>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </h3>
         <div>{location}</div>
       </ResourceItem>
@@ -575,7 +589,9 @@ export function WithFiltering() {
     return (
       <ResourceItem 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>
       </ResourceItem>
@@ -686,7 +702,9 @@ export function WithACustomEmptySearchResultState() {
     return (
       <ResourceItem 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>
       </ResourceItem>
@@ -754,7 +772,9 @@ export function WithItemShortcutActions() {
               shortcutActions={shortcutActions}
             >
               <h3>
-                <TextStyle variation="strong">{name}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
               </h3>
               <div>{location}</div>
             </ResourceItem>
@@ -809,7 +829,9 @@ export function WithPersistentItemShortcutActions() {
               persistActions
             >
               <h3>
-                <TextStyle variation="strong">{name}</TextStyle>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
               </h3>
               <div>{location}</div>
             </ResourceItem>
@@ -917,7 +939,9 @@ export function WithMultiselect() {
         accessibilityLabel={`View details for ${name}`}
       >
         <h3>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </h3>
         <div>{location}</div>
       </ResourceItem>
@@ -1076,7 +1100,9 @@ export function WithAllOfItsElements() {
         persistActions
       >
         <h3>
-          <TextStyle variation="strong">{name}</TextStyle>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
         </h3>
         <div>{location}</div>
       </ResourceItem>
diff --git a/polaris-react/src/components/Select/Select.stories.tsx b/polaris-react/src/components/Select/Select.stories.tsx
index 69e58a80357..358cd6a6b62 100644
--- a/polaris-react/src/components/Select/Select.stories.tsx
+++ b/polaris-react/src/components/Select/Select.stories.tsx
@@ -9,7 +9,7 @@ import {
   Select,
   Stack,
   TextField,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {CaretDownMinor, CaretUpMinor} from '@shopify/polaris-icons';
 
@@ -171,12 +171,12 @@ export function WithSeparateValidationError() {
 
     return (
       <span>
-        <TextStyle variation="negative">
+        <Text variant="bodyMd" color="critical" as="span">
           <p>
             {`${weightError}${unitError} is required when weight based shipping rates are enabled. `}
             <Link>Manage shipping</Link>
           </p>
-        </TextStyle>
+        </Text>
       </span>
     );
   }
diff --git a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
index 52574ef4562..1694237e251 100644
--- a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
+++ b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {SettingToggle, TextStyle} from '@shopify/polaris';
+import {SettingToggle, Text} from '@shopify/polaris';
 
 export default {
   component: SettingToggle,
@@ -22,7 +22,11 @@ export function Default() {
       }}
       enabled={active}
     >
-      This setting is <TextStyle variation="strong">{textStatus}</TextStyle>.
+      This setting is{' '}
+      <Text variant="bodyMd" fontWeight="bold" as="span">
+        {textStatus}
+      </Text>
+      .
     </SettingToggle>
   );
 }
diff --git a/polaris-react/src/components/Sheet/Sheet.stories.tsx b/polaris-react/src/components/Sheet/Sheet.stories.tsx
index 3b2559be066..1f703d0b971 100644
--- a/polaris-react/src/components/Sheet/Sheet.stories.tsx
+++ b/polaris-react/src/components/Sheet/Sheet.stories.tsx
@@ -4,7 +4,7 @@ import {
   Button,
   Card,
   ChoiceList,
-  Heading,
+  Text,
   List,
   Page,
   Scrollable,
@@ -13,8 +13,6 @@ import {
   Listbox,
   TextField,
   TextContainer,
-  TextStyle,
-  Subheading,
   Icon,
   AutoSelection,
 } from '@shopify/polaris';
@@ -119,7 +117,9 @@ export function Default() {
               width: '100%',
             }}
           >
-            <Heading>Manage sales channels</Heading>
+            <Text variant="headingMd" as="h2">
+              Manage sales channels
+            </Text>
             <Button
               accessibilityLabel="Cancel"
               icon={MobileCancelMajor}
@@ -468,9 +468,11 @@ export function WithSearchableListbox() {
                 marginBottom: 'var(--p-space-2)',
               }}
             >
-              <TextStyle variation="subdued">
-                <Subheading>Action</Subheading>
-              </TextStyle>
+              <Text variant="bodyMd" color="subdued" as="span">
+                <Text variant="headingXs" as="h3">
+                  Action
+                </Text>
+              </Text>
               <Button
                 accessibilityLabel="Cancel"
                 icon={MobileCancelMajor}
@@ -479,10 +481,12 @@ export function WithSearchableListbox() {
               />
             </div>
             <TextContainer>
-              <Heading>Look up customer segmentation membership</Heading>
-              <TextStyle variation="subdued">
+              <Text variant="headingMd" as="h2">
+                Look up customer segmentation membership
+              </Text>
+              <Text variant="bodyMd" color="subdued" as="span">
                 Look up whether a customer is included in a segment.
-              </TextStyle>
+              </Text>
             </TextContainer>
           </div>
           <div
diff --git a/polaris-react/src/components/Stack/Stack.stories.tsx b/polaris-react/src/components/Stack/Stack.stories.tsx
index 016cb65d2e3..7394573ce2d 100644
--- a/polaris-react/src/components/Stack/Stack.stories.tsx
+++ b/polaris-react/src/components/Stack/Stack.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Badge, Heading, Stack} from '@shopify/polaris';
+import {Badge, Text, Stack} from '@shopify/polaris';
 
 export default {
   component: Stack,
@@ -40,13 +40,13 @@ export function Spacing() {
 export function VerticalCentering() {
   return (
     <Stack alignment="center">
-      <Heading>
+      <Text variant="headingMd" as="h2">
         Order
         <br />
         #1136
         <br />
         was paid
-      </Heading>
+      </Text>
       <Badge>Paid</Badge>
       <Badge>Fulfilled</Badge>
     </Stack>
@@ -56,7 +56,9 @@ export function VerticalCentering() {
 export function FillAvailableSpaceProportionally() {
   return (
     <Stack distribution="fill">
-      <Heading>Order #1136</Heading>
+      <Text variant="headingMd" as="h2">
+        Order #1136
+      </Text>
       <Badge>Paid</Badge>
       <Badge>Fulfilled</Badge>
     </Stack>
@@ -66,7 +68,9 @@ export function FillAvailableSpaceProportionally() {
 export function WhereItemsFillSpaceEvenly() {
   return (
     <Stack distribution="fillEvenly">
-      <Heading>Order #1136</Heading>
+      <Text variant="headingMd" as="h2">
+        Order #1136
+      </Text>
       <Badge>Paid</Badge>
       <Badge>Fulfilled</Badge>
     </Stack>
@@ -77,7 +81,9 @@ export function WhereASingleItemFillsTheRemainingSpace() {
   return (
     <Stack>
       <Stack.Item fill>
-        <Heading>Order #1136</Heading>
+        <Text variant="headingMd" as="h2">
+          Order #1136
+        </Text>
       </Stack.Item>
       <Stack.Item>
         <Badge>Paid</Badge>
diff --git a/polaris-react/src/components/TextContainer/TextContainer.stories.tsx b/polaris-react/src/components/TextContainer/TextContainer.stories.tsx
index 430f97a209c..5af854fb1f6 100644
--- a/polaris-react/src/components/TextContainer/TextContainer.stories.tsx
+++ b/polaris-react/src/components/TextContainer/TextContainer.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Heading, TextContainer} from '@shopify/polaris';
+import {Text, TextContainer} from '@shopify/polaris';
 
 export default {
   component: TextContainer,
@@ -9,7 +9,9 @@ export default {
 export function Default() {
   return (
     <TextContainer>
-      <Heading>Install the Shopify POS App</Heading>
+      <Text variant="headingMd" as="h2">
+        Install the Shopify POS App
+      </Text>
       <p>
         Shopify POS is the easiest way to sell your products in person.
         Available for iPad, iPhone, and Android.
@@ -21,7 +23,9 @@ export function Default() {
 export function Tight() {
   return (
     <TextContainer spacing="tight">
-      <Heading>Install the Shopify POS App</Heading>
+      <Text variant="headingMd" as="h2">
+        Install the Shopify POS App
+      </Text>
       <p>
         Shopify POS is the easiest way to sell your products in person.
         Available for iPad, iPhone, and Android.
diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 2c7ac612760..acbcdf7af71 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,12 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {
-  Button,
-  ButtonGroup,
-  TextField,
-  TextStyle,
-  Tooltip,
-} from '@shopify/polaris';
+import {Button, ButtonGroup, TextField, Text, Tooltip} from '@shopify/polaris';
 
 export default {
   component: Tooltip,
@@ -16,7 +10,9 @@ export function Default() {
   return (
     <div style={{padding: '75px 0'}}>
       <Tooltip active content="This order has shipping labels.">
-        <TextStyle variation="strong">Order #1001</TextStyle>
+        <Text variant="bodyMd" fontWeight="bold" as="span">
+          Order #1001
+        </Text>
       </Tooltip>
     </div>
   );
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index a368809a111..9e6b897a11d 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -1,12 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {
-  ActionList,
-  Frame,
-  Icon,
-  TopBar,
-  VisuallyHidden,
-} from '@shopify/polaris';
+import {ActionList, Frame, Icon, TopBar, Text} from '@shopify/polaris';
 import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
 
 export default {
@@ -89,7 +83,9 @@ export function Default() {
       activatorContent={
         <span>
           <Icon source={QuestionMarkMajor} />
-          <VisuallyHidden>Secondary menu</VisuallyHidden>
+          <Text variant="bodySm" as="span" visuallyHidden>
+            Secondary menu
+          </Text>
         </span>
       }
       open={isSecondaryMenuOpen}

From 3e76560e894db509350895fdba01fd04e5b72d47 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Fri, 28 Oct 2022 16:16:12 -0400
Subject: [PATCH 2/6] Add changeset

---
 .changeset/breezy-rivers-wink.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/breezy-rivers-wink.md

diff --git a/.changeset/breezy-rivers-wink.md b/.changeset/breezy-rivers-wink.md
new file mode 100644
index 00000000000..8f4dccba2a4
--- /dev/null
+++ b/.changeset/breezy-rivers-wink.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Replaced usage of text components in component stories with `Text` component

From 81483f905d23330332fb50c8861bf2fcc2b01efb Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 3 Nov 2022 11:56:19 -0400
Subject: [PATCH 3/6] Update content in `DropZone.stories.tsx`

Co-authored-by: Sam Rose <sam.rose@shopify.com>
---
 polaris-react/src/components/DropZone/DropZone.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
index 391d4fb6a37..fa89b7a206e 100644
--- a/polaris-react/src/components/DropZone/DropZone.stories.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.stories.tsx
@@ -46,7 +46,7 @@ export function Default() {
             <div>
               {file.name}{' '}
               <Text variant="bodySm" as="p">
-                {file.size}bytes
+                {file.size} bytes
               </Text>
             </div>
           </Stack>

From ccec2389d58edcaf3bbf09f8fdb43fc4350b2d1d Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 3 Nov 2022 12:02:28 -0400
Subject: [PATCH 4/6] Fix spacing between text content in `DropZone` stories

---
 .../src/components/DropZone/DropZone.stories.tsx   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
index fa89b7a206e..e4898b201ba 100644
--- a/polaris-react/src/components/DropZone/DropZone.stories.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.stories.tsx
@@ -98,7 +98,7 @@ export function WithImageFileUpload() {
           <div>
             {file.name}{' '}
             <Text variant="bodySm" as="p">
-              {file.size}bytes
+              {file.size} bytes
             </Text>
           </div>
         </Stack>
@@ -159,7 +159,7 @@ export function WithSingleFileUpload() {
       <div>
         {file.name}{' '}
         <Text variant="bodySm" as="p">
-          {file.size}bytes
+          {file.size} bytes
         </Text>
       </div>
     </Stack>
@@ -201,7 +201,7 @@ export function WithDropOnPage() {
           <div>
             {file.name}{' '}
             <Text variant="bodySm" as="p">
-              {file.size}bytes
+              {file.size} bytes
             </Text>
           </div>
         </Stack>
@@ -259,7 +259,7 @@ export function AcceptsOnlySVGFiles() {
           <div>
             {file.name}{' '}
             <Text variant="bodySm" as="p">
-              {file.size}bytes
+              {file.size} bytes
             </Text>
           </div>
         </Stack>
@@ -326,7 +326,7 @@ export function Nested() {
           <div>
             {file.name}{' '}
             <Text variant="bodySm" as="p">
-              {file.size}bytes
+              {file.size} bytes
             </Text>
           </div>
         </Stack>
@@ -398,7 +398,7 @@ export function WithCustomFileUploadText() {
           <div>
             {file.name}{' '}
             <Text variant="bodySm" as="p">
-              {file.size}bytes
+              {file.size} bytes
             </Text>
           </div>
         </Stack>
@@ -447,7 +447,7 @@ export function WithCustomFileDialogTrigger() {
           <div>
             {file.name}{' '}
             <Text variant="bodySm" as="p">
-              {file.size}bytes
+              {file.size} bytes
             </Text>
           </div>
         </Stack>

From 66922eb894a3a813769d4ae91c7ed447b64452aa Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 3 Nov 2022 12:06:13 -0400
Subject: [PATCH 5/6] Update extraneous `h3` element in `Filters` stories

---
 .../components/Filters/Filters.stories.tsx    | 64 +++++++------------
 1 file changed, 24 insertions(+), 40 deletions(-)

diff --git a/polaris-react/src/components/Filters/Filters.stories.tsx b/polaris-react/src/components/Filters/Filters.stories.tsx
index be695aaff50..adf9766123d 100644
--- a/polaris-react/src/components/Filters/Filters.stories.tsx
+++ b/polaris-react/src/components/Filters/Filters.stories.tsx
@@ -187,11 +187,9 @@ export function WithAResourceList() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );
@@ -500,11 +498,9 @@ export function WithChildrenContent() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );
@@ -629,11 +625,9 @@ export function Disabled() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );
@@ -777,11 +771,9 @@ export function SomeDisabled() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );
@@ -907,11 +899,9 @@ export function WithoutClearButton() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );
@@ -1102,11 +1092,9 @@ export function WithHelpText() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );
@@ -1300,11 +1288,9 @@ export function WithQueryFieldHidden() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );
@@ -1498,11 +1484,9 @@ export function WithQueryFieldDisabled() {
                 media={media}
                 accessibilityLabel={`View details for ${name}`}
               >
-                <h3>
-                  <Text variant="bodyMd" fontWeight="bold" as="span">
-                    {name}
-                  </Text>
-                </h3>
+                <Text as="h3" variant="bodyMd" fontWeight="bold">
+                  {name}
+                </Text>
                 <div>{location}</div>
               </ResourceList.Item>
             );

From 495e8f66fd9f4c921597e152e1e9f29aefb2f66a Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 3 Nov 2022 12:08:07 -0400
Subject: [PATCH 6/6] Update extraneous `Text` component for styling in `Sheet`
 stories

---
 polaris-react/src/components/Sheet/Sheet.stories.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/polaris-react/src/components/Sheet/Sheet.stories.tsx b/polaris-react/src/components/Sheet/Sheet.stories.tsx
index 1f703d0b971..7e621b434de 100644
--- a/polaris-react/src/components/Sheet/Sheet.stories.tsx
+++ b/polaris-react/src/components/Sheet/Sheet.stories.tsx
@@ -468,10 +468,8 @@ export function WithSearchableListbox() {
                 marginBottom: 'var(--p-space-2)',
               }}
             >
-              <Text variant="bodyMd" color="subdued" as="span">
-                <Text variant="headingXs" as="h3">
-                  Action
-                </Text>
+              <Text as="h3" variant="headingXs" color="subdued">
+                Action
               </Text>
               <Button
                 accessibilityLabel="Cancel"