Use semantic Text component for responsive typography

Shopify · Mar 18, 2024 · e0841c4 · e0841c4
1 parent 97184dc
commit e0841c4
Show file tree

Hide file tree

Showing 31 changed files with 96 additions and 209 deletions.
diff --git a/.changeset/cool-dolls-lie.md b/.changeset/cool-dolls-lie.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Applied semantic type styles using the `Text` component
diff --git a/polaris-react/src/components/BulkActions/BulkActions.module.css b/polaris-react/src/components/BulkActions/BulkActions.module.css
@@ -66,16 +66,7 @@
   pointer-events: none;
 }
 
-.PaginatedSelectAll {
-  font-size: var(--p-text-body-sm-font-size);
-  font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-text-body-sm-font-line-height);
-}
-
 .AllAction {
-  font-size: var(--p-text-body-sm-font-size);
-  font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-text-body-sm-font-line-height);
   border: 0;
   background: none;
   padding: 0;

diff --git a/polaris-react/src/components/BulkActions/BulkActions.tsx b/polaris-react/src/components/BulkActions/BulkActions.tsx
@@ -20,6 +20,7 @@ import {ActionList} from '../ActionList';
 import {Popover} from '../Popover';
 import {InlineStack} from '../InlineStack';
 import {CheckableButton} from '../CheckableButton';
+import {Text} from '../Text';
 import {UnstyledButton} from '../UnstyledButton';
 import type {ButtonProps} from '../Button';
 
@@ -164,25 +165,21 @@ export const BulkActions = forwardRef(function BulkActions(
           'Polaris.ResourceList.BulkActions.moreActionsActivatorLabel',
         );
 
-  const paginatedSelectAllActionMarkup = paginatedSelectAllAction ? (
+  const paginatedSelectAllMarkup = paginatedSelectAllAction ? (
     <UnstyledButton
       className={styles.AllAction}
       onClick={paginatedSelectAllAction.onAction}
       size="slim"
       disabled={disabled}
     >
-      {paginatedSelectAllAction.content}
+      <Text as="span" variant="bodySm" fontWeight="medium">
+        {paginatedSelectAllAction.content}
+      </Text>
     </UnstyledButton>
   ) : null;
 
   const hasTextAndAction = paginatedSelectAllText && paginatedSelectAllAction;
 
-  const paginatedSelectAllMarkup = paginatedSelectAllActionMarkup ? (
-    <div className={styles.PaginatedSelectAll}>
-      {paginatedSelectAllActionMarkup}
-    </div>
-  ) : null;
-
   const ariaLive: AriaLive = hasTextAndAction ? 'polite' : undefined;
 
   const checkableButtonProps = {

diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.module.css b/polaris-react/src/components/CheckableButton/CheckableButton.module.css
@@ -1,9 +1,5 @@
 .CheckableButton {
   color: var(--p-color-text);
-  font-size: var(--p-font-size-300);
-  font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-400);
-  letter-spacing: initial;
   display: flex;
   align-items: center;
   gap: calc(var(--p-space-300) + var(--p-space-025));
@@ -58,6 +54,4 @@
 
   /* padding to fix the bottom of letters being cutoff by overflow: hidden */
   padding: var(--p-space-025) 0;
-  /* stylelint-disable-next-line polaris/typography/declaration-property-unit-disallowed-list -- custom label line height */
-  line-height: 18px;
 }
diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.tsx b/polaris-react/src/components/CheckableButton/CheckableButton.tsx
@@ -1,8 +1,8 @@
 import React, {useRef, useImperativeHandle, forwardRef} from 'react';
 
 import type {CheckboxHandles} from '../../types';
-import {classNames} from '../../utilities/css';
 import {Checkbox} from '../Checkbox';
+import {Text} from '../Text';
 
 import styles from './CheckableButton.module.css';
 
@@ -38,10 +38,8 @@ export const CheckableButton = forwardRef(function CheckableButton(
     };
   });
 
-  const className = classNames(styles.CheckableButton);
-
   return (
-    <div className={className} onClick={onToggleAll}>
+    <div className={styles.CheckableButton} onClick={onToggleAll}>
       <div className={styles.Checkbox}>
         <Checkbox
           label={accessibilityLabel}
@@ -54,7 +52,9 @@ export const CheckableButton = forwardRef(function CheckableButton(
       </div>
       {label ? (
         <span className={styles.Label} aria-live={ariaLive}>
-          {label}
+          <Text as="span" variant="bodySm" fontWeight="medium">
+            {label}
+          </Text>
         </span>
       ) : null}
     </div>

diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.css b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.css
@@ -27,9 +27,6 @@
   border: none;
   margin: 0;
   text-decoration: none;
-  font-size: var(--p-font-size-300);
-  font-weight: var(--p-font-weight-semibold);
-  line-height: 1;
   cursor: pointer;
   text-align: center;
   appearance: none;

diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -37,7 +37,13 @@ export function FileUpload(props: FileUploadProps) {
     disabled && styles.disabled,
   );
 
-  const actionMarkup = <div className={actionClassNames}>{actionTitle}</div>;
+  const actionMarkup = (
+    <div className={actionClassNames}>
+      <Text as="span" variant="bodySm" fontWeight="semibold">
+        {actionTitle}
+      </Text>
+    </div>
+  );
 
   const fileUploadClassName = classNames(
     styles.FileUpload,

diff --git a/polaris-react/src/components/Filters/Filters.module.css b/polaris-react/src/components/Filters/Filters.module.css
@@ -73,7 +73,6 @@
   padding: 0 var(--p-space-200) 0 var(--p-space-300);
   height: 28px;
   cursor: pointer;
-  color: var(--p-color-text);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -86,8 +85,6 @@
   }
 
   @media (--p-breakpoints-md-up) {
-    font-size: var(--p-font-size-300);
-    line-height: var(--p-font-line-height-400);
     height: 24px;
     /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
     padding: 0 0.375rem 0 var(--p-space-200);
@@ -217,22 +214,12 @@
 
 .ClearAll {
   margin-left: var(--p-space-200);
-
-  span {
-    font-size: var(--p-font-size-300);
-    font-weight: var(--p-font-weight-medium);
-  }
 }
 
 @media (--p-breakpoints-md-down) {
   .ClearAll {
     margin-left: 0;
     padding-right: var(--p-space-400);
-
-    span {
-      font-size: var(--p-font-size-350);
-      font-weight: var(--p-font-weight-medium);
-    }
   }
 
   .MultiplePinnedFilterClearAll {

diff --git a/polaris-react/src/components/Filters/components/FiltersBar/FiltersBar.tsx b/polaris-react/src/components/Filters/components/FiltersBar/FiltersBar.tsx
@@ -10,7 +10,6 @@ import {ActionList} from '../../../ActionList';
 import {Text} from '../../../Text';
 import {UnstyledButton} from '../../../UnstyledButton';
 import {classNames} from '../../../../utilities/css';
-import {useBreakpoints} from '../../../../utilities/breakpoints';
 import type {
   ActionListItemDescriptor,
   AppliedFilterInterface,
@@ -62,7 +61,6 @@ export function FiltersBar({
   children,
 }: PropsWithChildren<FiltersBarProps>) {
   const i18n = useI18n();
-  const {mdDown} = useBreakpoints();
   const [popoverActive, setPopoverActive] = useState(false);
   const hasMounted = useRef(false);
   useEffect(() => {
@@ -162,8 +160,6 @@ export function FiltersBar({
 
   const hasOneOrMorePinnedFilters = pinnedFilters.length >= 1;
 
-  const labelVariant = mdDown ? 'bodyMd' : 'bodySm';
-
   const addFilterActivator = (
     <div>
       <UnstyledButton
@@ -177,7 +173,7 @@ export function FiltersBar({
           disableFilters
         }
       >
-        <Text variant={labelVariant} as="span">
+        <Text as="span" variant="bodySm">
           {i18n.translate('Polaris.Filters.addFilter')}{' '}
         </Text>
         <PlusIcon />
@@ -258,7 +254,6 @@ export function FiltersBar({
       <Button
         size="micro"
         onClick={handleClearAllFilters}
-        removeUnderline
         variant="monochromePlain"
       >
         {i18n.translate('Polaris.Filters.clearFilters')}

diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.module.css b/polaris-react/src/components/FooterHelp/FooterHelp.module.css
@@ -4,11 +4,3 @@
   margin: var(--p-space-500);
   width: auto;
 }
-
-.Text {
-  font-size: var(--p-font-size-350);
-  font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-500);
-  border: none;
-  letter-spacing: initial;
-}
diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.tsx b/polaris-react/src/components/FooterHelp/FooterHelp.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {Text} from '../Text';
+
 import styles from './FooterHelp.module.css';
 
 export interface FooterHelpProps {
@@ -10,7 +12,9 @@ export interface FooterHelpProps {
 export function FooterHelp({children}: FooterHelpProps) {
   return (
     <div className={styles.FooterHelp}>
-      <div className={styles.Text}>{children}</div>
+      <Text as="p" variant="bodyLg">
+        {children}
+      </Text>
     </div>
   );
 }
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -313,10 +313,6 @@
     @mixin button-base;
     /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
     @mixin focus-ring base, 1px;
-    font-size: var(--p-font-size-350);
-    font-weight: var(--p-font-weight-medium);
-    line-height: var(--p-font-line-height-400);
-    letter-spacing: initial;
     color: var(--p-color-text);
 
     &:focus {

diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -11,6 +11,7 @@ import {Icon} from '../Icon';
 // eslint-disable-next-line import/no-deprecated
 import {EventListener} from '../EventListener';
 import {Backdrop} from '../Backdrop';
+import {Text} from '../Text';
 import {TrapFocus} from '../TrapFocus';
 import {dataPolarisTopBar, layer} from '../shared';
 import {setRootProperty} from '../../utilities/set-root-property';
@@ -224,7 +225,9 @@ class FrameInner extends PureComponent<CombinedProps, State> {
           onBlur={this.handleBlur}
           onClick={this.handleClick}
         >
-          {i18n.translate('Polaris.Frame.skipToContent')}
+          <Text as="span" variant="bodyLg" fontWeight="medium">
+            {i18n.translate('Polaris.Frame.skipToContent')}
+          </Text>
         </a>
       </div>
     );

diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.module.css b/polaris-react/src/components/Frame/components/Toast/Toast.module.css
@@ -76,8 +76,6 @@
 .WithActionOnComponent {
   border: none;
   cursor: pointer;
-  line-height: var(--p-font-line-height-500);
-  font-size: var(--p-font-size-325);
   padding-right: var(--p-space-500);
 }
 

diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.tsx b/polaris-react/src/components/Frame/components/Toast/Toast.tsx
@@ -131,6 +131,7 @@ export function Toast({
         <InlineStack gap="400" blockAlign="center">
           <Text
             as="span"
+            variant="bodyMd"
             fontWeight="medium"
             {...(tone === 'magic' && {tone: 'magic'})}
           >

diff --git a/.../IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.module.css b/.../IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.module.css
@@ -4,10 +4,10 @@
   border-radius: var(--p-border-radius-200);
   padding: var(--p-space-100) var(--p-space-300) var(--p-space-100)
     var(--p-space-200);
-  font-size: var(--p-font-size-350);
-  display: flex;
+  display: grid;
   align-items: center;
-  justify-content: flex-start;
+  grid-template-columns: auto 1fr;
+  gap: var(--p-space-050);
   cursor: pointer;
   width: 100%;
   border: none;
@@ -33,12 +33,3 @@
   color: var(--p-color-text);
   background: var(--p-color-bg-fill-transparent-active);
 }
-
-.Label {
-  flex: 1;
-  color: var(--p-color-text);
-  margin-left: var(--p-space-050);
-  font-size: var(--p-font-size-300);
-  font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-400);
-}
diff --git a/...ponents/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.tsx b/...ponents/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.tsx
@@ -5,6 +5,7 @@ import {ArrowDownIcon, ArrowUpIcon} from '@shopify/polaris-icons';
 import {classNames} from '../../../../../../utilities/css';
 import {UnstyledButton} from '../../../../../UnstyledButton';
 import {Icon} from '../../../../../Icon';
+import {Text} from '../../../../../Text';
 
 import styles from './DirectionButton.module.css';
 
@@ -38,7 +39,9 @@ export function DirectionButton({
         source={direction === 'asc' ? ArrowUpIcon : ArrowDownIcon}
         tone="base"
       />
-      <span className={styles.Label}>{children}</span>
+      <Text as="span" variant="bodySm" fontWeight="medium">
+        {children}
+      </Text>
     </UnstyledButton>
   );
 }
diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.module.css b/polaris-react/src/components/LegacyCard/LegacyCard.module.css
@@ -7,12 +7,6 @@
   @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-0), null, '',
     101;
 
-  /* Override custom heading font sizes */
-  h2,
-  h3 {
-    font-size: var(--p-font-size-325);
-  }
-
   + .LegacyCard {
     margin-top: var(--p-space-400);