Use Text component to apply Button text styles

.changeset/lucky-wasps-scream.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Replace CSS font styles with Text component in Button

.changeset/ten-squids-nail.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Used `Text` component to apply text styles for `Button`

polaris-react/src/components/Button/Button.module.css

@@ -34,19 +34,9 @@
   border-radius: var(--p-border-radius-200);
   box-shadow: var(--pc-button-box-shadow);
   color: var(--pc-button-color);
-
-  font-size: var(--p-font-size-325);
-  font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-500);
-
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-
-  @media (--p-breakpoints-md-up) {
-    font-size: var(--p-font-size-300);
-    line-height: var(--p-font-line-height-400);
-  }
 }
 
 // stylelint-disable selector-max-specificity -- Duplicate selectors to bump specificity to be greater than Icon's svg fill (0, 1, 1)
@@ -166,7 +156,7 @@
   --pc-button-color_active: var(--p-color-text-link-active);
 }
 
-.variantPlain:is(:hover, :active, :focus-visible) {
+.variantPlain:is(:hover, :active, :focus-visible):not(.removeUnderline) {
   text-decoration: underline;
 }
 
@@ -179,9 +169,6 @@
   --pc-button-bg_disabled: transparent;
   margin: calc(-1 * var(--pc-button-padding-block))
     calc(-1 * var(--pc-button-padding-inline));
-  font-size: var(--p-font-size-325);
-  font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-400);
 }
 
 .variantPlain:focus-visible,
@@ -252,8 +239,6 @@
 .sizeLarge {
   --pc-button-padding-block: var(--p-space-150);
   --pc-button-padding-inline: var(--p-space-300);
-  font-size: var(--p-font-size-325);
-  line-height: var(--p-font-line-height-500);
   min-height: var(--p-height-900);
   min-width: var(--p-height-900);
 
@@ -349,7 +334,7 @@
 
 // INTERACTION
 .pressable:active:not(.variantTertiary, .variantPlain, .variantMonochromePlain)
-  > * {
+> * {
   transform: translate3d(0, 1px, 0);
 }
 
@@ -377,10 +362,10 @@
 }
 
 // BUTTON GROUP
-/* stylelint-disable -- selector-max-combinators */
+
 [data-buttongroup-variant='segmented']
-  > *:not(:first-child)
-  .Button:is(.variantPrimary) {
+> *:not(:first-child)
+.Button:is(.variantPrimary) {
   margin-left: calc(-1 * var(--p-space-025));
 }
 

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

@@ -5,13 +5,16 @@ import {
   ChevronUpIcon,
 } from '@shopify/polaris-icons';
 
+import {useBreakpoints} from '../../utilities/breakpoints';
 import type {BaseButton, IconSource} from '../../types';
 import {classNames, variationName} from '../../utilities/css';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 import type {MouseUpBlurHandler} from '../../utilities/focus';
 import {useI18n} from '../../utilities/i18n';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
+import {Text} from '../Text';
+import type {TextProps} from '../Text';
 import {UnstyledButton} from '../UnstyledButton';
 import type {UnstyledButtonProps} from '../UnstyledButton';
 
@@ -121,6 +124,7 @@ export function Button({
 }: ButtonProps) {
   const i18n = useI18n();
   const isDisabled = disabled || loading;
+  const {mdUp} = useBreakpoints();
 
   const className = classNames(
     styles.Button,
@@ -164,14 +168,24 @@ export function Button({
     <span className={loading ? styles.hidden : styles.Icon}>{iconSource}</span>
   ) : null;
 
+  const hasPlainText = ['plain', 'monochromePlain'].includes(variant);
+  let textFontWeight: TextProps['fontWeight'] = 'medium';
+  if (hasPlainText) {
+    textFontWeight = 'regular';
+  } else if (variant === 'primary') {
+    textFontWeight = mdUp ? 'medium' : 'semibold';
+  }
+
   const childMarkup = children ? (
-    <span
-      className={removeUnderline ? styles.removeUnderline : ''}
+    <Text
+      as="span"
+      variant={size === 'large' || hasPlainText ? 'bodyMd' : 'bodySm'}
+      fontWeight={textFontWeight}
       // Fixes Safari bug that doesn't re-render button text to correct color
       key={disabled ? 'text-disabled' : 'text'}
     >
       {children}
-    </span>
+    </Text>
   ) : null;
 
   const spinnerSVGMarkup = loading ? (

polaris-react/src/components/Button/tests/Button.test.tsx

@@ -9,17 +9,27 @@ import {mountWithApp} from 'tests/utilities';
 
 import {Icon} from '../../Icon';
 import {Spinner} from '../../Spinner';
+import {Text} from '../../Text';
 import {UnstyledButton} from '../../UnstyledButton';
 import {Button} from '../Button';
 
+jest.mock('../../../utilities/breakpoints', () => ({
+  ...(jest.requireActual('../../../utilities/breakpoints') as any),
+  useBreakpoints: jest.fn(),
+}));
+
 describe('<Button />', () => {
   let warnSpy: jest.SpyInstance | null = null;
 
   beforeEach(() => {
     warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    mockUseBreakpoints(false);
   });
 
-  afterEach(() => warnSpy?.mockRestore());
+  afterEach(() => {
+    warnSpy?.mockRestore();
+    jest.clearAllMocks();
+  });
 
   describe('children', () => {
     it('passes prop', () => {
@@ -356,15 +366,6 @@ describe('<Button />', () => {
         className: expect.stringContaining('removeUnderline'),
       });
     });
-
-    it('passes prop to <span/> className', () => {
-      const children = 'Sample children';
-      const button = mountWithApp(<Button removeUnderline>{children}</Button>);
-      const childrenSpan = button.find('span', {children})!;
-      expect(childrenSpan).toHaveReactProps({
-        className: expect.stringContaining('removeUnderline'),
-      });
-    });
   });
 
   describe('dataPrimaryLink', () => {
@@ -390,4 +391,24 @@ describe('<Button />', () => {
       expect(link).toContainReactComponent('button', selector);
     });
   });
+
+  it('renders with medium fontWeight when on a small screen', () => {
+    mockUseBreakpoints(true);
+    const wrapper = mountWithApp(<Button variant="primary">Test</Button>);
+    expect(wrapper).toContainReactComponent(Text, {
+      variant: 'bodySm',
+      fontWeight: 'medium',
+      children: 'Test',
+    });
+  });
 });
+
+function mockUseBreakpoints(mdUp: boolean) {
+  const useBreakpoints: jest.Mock = jest.requireMock(
+    '../../../utilities/breakpoints',
+  ).useBreakpoints;
+
+  useBreakpoints.mockReturnValue({
+    mdUp,
+  });
+}

polaris-react/src/components/TrapFocus/tests/TrapFocus.test.tsx

@@ -158,14 +158,8 @@ describe('<TrapFocus />', () => {
   });
 
   describe('handleBlur', () => {
-    const externalDomNode = mountWithApp(<Button />).find('button')!.domNode;
-
-    const event: FocusEvent = new FocusEvent('focusout', {
-      relatedTarget: externalDomNode,
-    });
-    Object.assign(event, {preventDefault: jest.fn()});
-
     it('allows default when trapping is false', () => {
+      const externalDomNode = mountWithApp(<Button />).find('button')!.domNode;
       const trapFocus = mountWithApp(
         <TrapFocus trapping={false}>
           <TextField
@@ -212,6 +206,7 @@ describe('<TrapFocus />', () => {
     });
 
     it('focuses focusTrapWrapper when focusTrapWrapper does not contain a focusable element and the event target is not the firstFocusableNode', () => {
+      const externalDomNode = mountWithApp(<Button />).find('button')!.domNode;
       const trapFocus = mountWithApp(
         <TrapFocus>
           <div id="other" />