Merge branch 'main' into common-action-pattern-guidelines

.changeset/four-years-nail.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated responsive styles for `Text` component

.changeset/tall-buttons-search.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed bug in math.ts for popover with position cover

.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);
-  }
 }
 
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector
@@ -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);
 

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/PositionedOverlay/utilities/math.ts

@@ -67,7 +67,7 @@ export function calculateVerticalPosition(
 
   const positionIfCoverBelow = {
     height: heightIfBelowCover - verticalMargins,
-    top: activatorTop - containerRectTop,
+    top: activatorTop + containerRectTop,
     positioning: 'cover',
   };
 

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

@@ -63,101 +63,117 @@
 }
 
 .headingXs {
-  font-size: var(--p-text-heading-xs-font-size);
-  font-weight: var(--p-text-heading-xs-font-weight);
-  letter-spacing: var(--p-text-heading-xs-font-letter-spacing);
-  line-height: var(--p-text-heading-xs-font-line-height);
+  font-size: var(--p-font-size-300);
+  font-weight: var(--p-font-weight-semibold);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-400);
 }
 
 .headingSm {
-  font-size: var(--p-text-heading-sm-font-size);
-  font-weight: var(--p-text-heading-sm-font-weight);
-  letter-spacing: var(--p-text-heading-sm-font-letter-spacing);
-  line-height: var(--p-text-heading-sm-font-line-height);
+  font-size: var(--p-font-size-350);
+  font-weight: var(--p-font-weight-semibold);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-500);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+  }
 }
 
 .headingMd {
-  font-size: var(--p-text-heading-md-font-size);
-  font-weight: var(--p-text-heading-md-font-weight);
-  letter-spacing: var(--p-text-heading-md-font-letter-spacing);
-  line-height: var(--p-text-heading-md-font-line-height);
-}
+  font-size: var(--p-font-size-400);
+  font-weight: var(--p-font-weight-semibold);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-500);
 
-.headingLg {
-  font-size: var(--p-text-heading-lg-font-size);
-  font-weight: var(--p-text-heading-lg-font-weight);
-  letter-spacing: var(--p-text-heading-lg-font-letter-spacing);
-  line-height: var(--p-text-heading-lg-font-line-height);
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-350);
+  }
 }
 
-.headingXl {
+.headingLg {
   font-size: var(--p-font-size-500);
   font-weight: var(--p-font-weight-semibold);
   letter-spacing: var(--p-font-letter-spacing-dense);
   line-height: var(--p-font-line-height-600);
+}
+
+.headingXl {
+  font-size: var(--p-font-size-550);
+  font-weight: var(--p-font-weight-bold);
+  letter-spacing: var(--p-font-letter-spacing-dense);
+  line-height: var(--p-font-line-height-800);
 
   @media (--p-breakpoints-md-up) {
-    font-size: var(--p-text-heading-xl-font-size);
-    font-weight: var(--p-text-heading-xl-font-weight);
-    letter-spacing: var(--p-text-heading-xl-font-letter-spacing);
-    line-height: var(--p-text-heading-xl-font-line-height);
+    font-size: var(--p-font-size-600);
   }
 }
 
 .heading2xl {
   font-size: var(--p-font-size-600);
   font-weight: var(--p-font-weight-bold);
-  letter-spacing: var(--p-font-letter-spacing-dense);
+  letter-spacing: var(--p-font-letter-spacing-denser);
   line-height: var(--p-font-line-height-800);
 
   @media (--p-breakpoints-md-up) {
-    font-size: var(--p-text-heading-2xl-font-size);
-    font-weight: var(--p-text-heading-2xl-font-weight);
-    letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
-    line-height: var(--p-text-heading-2xl-font-line-height);
+    font-size: var(--p-font-size-750);
+    line-height: var(--p-font-line-height-1000);
   }
 }
 
 .heading3xl {
-  font-size: var(--p-font-size-750);
+  font-size: var(--p-font-size-800);
   font-weight: var(--p-font-weight-bold);
   letter-spacing: var(--p-font-letter-spacing-denser);
   line-height: var(--p-font-line-height-1000);
-
-  @media (--p-breakpoints-md-up) {
-    font-size: var(--p-text-heading-3xl-font-size);
-    font-weight: var(--p-text-heading-3xl-font-weight);
-    letter-spacing: var(--p-text-heading-3xl-font-letter-spacing);
-    line-height: var(--p-text-heading-3xl-font-line-height);
-  }
 }
 
 .bodyXs {
-  font-size: var(--p-text-body-xs-font-size);
-  font-weight: var(--p-text-body-xs-font-weight);
-  letter-spacing: var(--p-text-body-xs-font-letter-spacing);
-  line-height: var(--p-text-body-xs-font-line-height);
+  font-size: var(--p-font-size-300);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-400);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-275);
+    line-height: var(--p-font-line-height-300);
+  }
 }
 
 .bodySm {
-  font-size: var(--p-text-body-sm-font-size);
-  font-weight: var(--p-text-body-sm-font-weight);
-  letter-spacing: var(--p-text-body-sm-font-letter-spacing);
-  line-height: var(--p-text-body-sm-font-line-height);
+  font-size: var(--p-font-size-350);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-500);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-300);
+    line-height: var(--p-font-line-height-400);
+  }
 }
 
 .bodyMd {
-  font-size: var(--p-text-body-md-font-size);
-  font-weight: var(--p-text-body-sm-font-weight);
-  letter-spacing: var(--p-text-body-md-font-letter-spacing);
-  line-height: var(--p-text-body-md-font-line-height);
+  font-size: var(--p-font-size-400);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-600);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
 }
 
 .bodyLg {
-  font-size: var(--p-text-body-lg-font-size);
-  font-weight: var(--p-text-body-sm-font-weight);
-  letter-spacing: var(--p-text-body-lg-font-letter-spacing);
-  line-height: var(--p-text-body-lg-font-line-height);
+  font-size: var(--p-font-size-450);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-600);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-350);
+    line-height: var(--p-font-line-height-500);
+  }
 }
 
 /* font-weight must be below variant styles so

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" />