variant prop on Text component not required (#8539)

Fixes #7645 and fixes
#8516
- [x] Makes `variant` optional
- [x] Makes `font-weight` added only if there is a variant that has a
fontWeight or a fontWeight is provided
- [x] Adds a test for `font-weight` adding logic
- [x] Removes `variant` from all `<Text>` components with
`visuallyHidden`
- [ ] Removes `variant` from components where they only add a visual
style like `color` `fontWeight` and do not need to change their
`font-size` and `line-height`

To tophat this change:
- [x] Compare visual difference in chromatic
- [x] Check the changed storybook stories

---------

Co-authored-by: Kyle Durand <[email protected]>
Co-authored-by: Aaron Casanova <[email protected]>

Author: 3 people

.changeset/real-turkeys-poke.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `variant` prop on `Text` component to be optional to better support children with similar styles

polaris-react/playground/DetailsPage.tsx

@@ -451,7 +451,7 @@ export function DetailsPage() {
   const loadingMarkup = isLoading ? <Loading /> : null;
 
   const skipToContentTarget = (
-    <Text as="span" variant="bodySm" visuallyHidden>
+    <Text as="span" visuallyHidden>
       <a
         href="#SkipToContent"
         id="SkipToContentTarget"

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

@@ -55,7 +55,7 @@ export function AccountConnection({
   const titleMarkup = title ? title : accountName;
 
   const detailsMarkup = details ? (
-    <Text as="span" variant="bodyMd" color="subdued">
+    <Text as="span" color="subdued">
       {details}
     </Text>
   ) : null;

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -66,7 +66,7 @@ export function Item({
   const contentMarkup = helpText ? (
     <>
       <Box>{contentText}</Box>
-      <Text variant="bodyMd" color="subdued" as="span">
+      <Text color="subdued" as="span">
         {helpText}
       </Text>
     </>

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

@@ -21,9 +21,7 @@ export function Default() {
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
-        <Text variant="bodyMd" as="p">
-          View a summary of your online store’s performance.
-        </Text>
+        <p>View a summary of your online store’s performance.</p>
       </AlphaStack>
     </AlphaCard>
   );
@@ -36,9 +34,7 @@ export function WithBackgroundSubdued() {
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
-        <Text variant="bodyMd" as="p">
-          View a summary of your online store’s performance.
-        </Text>
+        <p>View a summary of your online store’s performance.</p>
       </AlphaStack>
     </AlphaCard>
   );
@@ -51,9 +47,7 @@ export function WithBorderRadiusRoundedAbove() {
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
-        <Text variant="bodyMd" as="p">
-          View a summary of your online store’s performance.
-        </Text>
+        <p>View a summary of your online store’s performance.</p>
       </AlphaStack>
     </AlphaCard>
   );
@@ -66,9 +60,7 @@ export function WithResponsivePadding() {
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
-        <Text variant="bodyMd" as="p">
-          View a summary of your online store’s performance.
-        </Text>
+        <p>View a summary of your online store’s performance.</p>
       </AlphaStack>
     </AlphaCard>
   );

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

@@ -63,7 +63,7 @@ export function Default() {
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
                   <h3>
-                    <Text variant="bodyMd" fontWeight="bold" as="span">
+                    <Text fontWeight="bold" as="span">
                       {name}
                     </Text>
                   </h3>
@@ -123,7 +123,7 @@ export function WithI18n() {
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
                   <h3>
-                    <Text variant="bodyMd" fontWeight="bold" as="span">
+                    <Text fontWeight="bold" as="span">
                       {name}
                     </Text>
                   </h3>

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx

@@ -76,7 +76,7 @@ export function MappedAction({
     <div className={styles.Text}>
       <div className={contentOverflowStyle}>{contentText}</div>
       {helpText ? (
-        <Text variant="bodyMd" color="subdued" as="span">
+        <Text color="subdued" as="span">
           {helpText}
         </Text>
       ) : null}

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

@@ -63,7 +63,7 @@ export function Badge({
     : getDefaultAccessibilityLabel(i18n, progress, status);
 
   let accessibilityMarkup = Boolean(accessibilityLabel) && (
-    <Text variant="bodySm" as="span" visuallyHidden>
+    <Text as="span" visuallyHidden>
       {accessibilityLabel}
     </Text>
   );

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

@@ -32,7 +32,7 @@ export function Pip({
 
   return (
     <span className={className}>
-      <Text variant="bodySm" as="span" visuallyHidden>
+      <Text as="span" visuallyHidden>
         {accessibilityLabel}
       </Text>
     </span>

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

@@ -63,33 +63,25 @@ export function WithHorizontalDirection() {
 export function WithSpecificDirection() {
   return (
     <LegacyStack vertical>
-      <Text variant="bodyMd" as="p">
-        Block Start
-      </Text>
+      <p>Block Start</p>
       <Box background="surface" padding="4" border="base">
         <Bleed marginInline="4" marginBlockStart="6">
           <div style={styles} />
         </Bleed>
       </Box>
-      <Text variant="bodyMd" as="p">
-        Block End
-      </Text>
+      <p>Block End</p>
       <Box background="surface" padding="4" border="base">
         <Bleed marginInline="4" marginBlockEnd="6">
           <div style={styles} />
         </Bleed>
       </Box>
-      <Text variant="bodyMd" as="p">
-        Inline Start
-      </Text>
+      <p>Inline Start</p>
       <Box background="surface" padding="4" border="base">
         <Bleed marginInline="0" marginInlineStart="6">
           <div style={styles} />
         </Bleed>
       </Box>
-      <Text variant="bodyMd" as="p">
-        Inline End
-      </Text>
+      <p>Inline End</p>
       <Box background="surface" padding="4" border="base">
         <Bleed marginInline="0" marginInlineEnd="6">
           <div style={styles} />