diff --git a/.changeset/four-years-nail.md b/.changeset/four-years-nail.md
new file mode 100644
index 00000000000..5e6f29e86e3
--- /dev/null
+++ b/.changeset/four-years-nail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated responsive styles for `Text` component
diff --git a/.changeset/tall-buttons-search.md b/.changeset/tall-buttons-search.md
new file mode 100644
index 00000000000..073730a9078
--- /dev/null
+++ b/.changeset/tall-buttons-search.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed bug in math.ts for popover with position cover
diff --git a/.changeset/ten-squids-nail.md b/.changeset/ten-squids-nail.md
new file mode 100644
index 00000000000..0f9d7b13953
--- /dev/null
+++ b/.changeset/ten-squids-nail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Used `Text` component to apply text styles for `Button`
diff --git a/polaris-react/src/components/Button/Button.module.css b/polaris-react/src/components/Button/Button.module.css
index d701417f25f..ba01a680a65 100644
--- a/polaris-react/src/components/Button/Button.module.css
+++ b/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);
diff --git a/polaris-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx
index 285fd2bee5d..57dab4772e4 100644
--- a/polaris-react/src/components/Button/Button.tsx
+++ b/polaris-react/src/components/Button/Button.tsx
@@ -5,6 +5,7 @@ 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';
@@ -12,6 +13,8 @@ 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({
{iconSource}
) : 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 ? (
-
{children}
-
+
) : null;
const spinnerSVGMarkup = loading ? (
diff --git a/polaris-react/src/components/Button/tests/Button.test.tsx b/polaris-react/src/components/Button/tests/Button.test.tsx
index 38743eb64ef..e587461e752 100644
--- a/polaris-react/src/components/Button/tests/Button.test.tsx
+++ b/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('', () => {
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('', () => {
className: expect.stringContaining('removeUnderline'),
});
});
-
- it('passes prop to className', () => {
- const children = 'Sample children';
- const button = mountWithApp();
- const childrenSpan = button.find('span', {children})!;
- expect(childrenSpan).toHaveReactProps({
- className: expect.stringContaining('removeUnderline'),
- });
- });
});
describe('dataPrimaryLink', () => {
@@ -390,4 +391,24 @@ describe('', () => {
expect(link).toContainReactComponent('button', selector);
});
});
+
+ it('renders with medium fontWeight when on a small screen', () => {
+ mockUseBreakpoints(true);
+ const wrapper = mountWithApp();
+ 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,
+ });
+}
diff --git a/polaris-react/src/components/PositionedOverlay/utilities/math.ts b/polaris-react/src/components/PositionedOverlay/utilities/math.ts
index b63579feb94..cdce1f82830 100644
--- a/polaris-react/src/components/PositionedOverlay/utilities/math.ts
+++ b/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',
};
diff --git a/polaris-react/src/components/Text/Text.module.css b/polaris-react/src/components/Text/Text.module.css
index af3574c763b..327691d67e4 100644
--- a/polaris-react/src/components/Text/Text.module.css
+++ b/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
diff --git a/polaris-react/src/components/TrapFocus/tests/TrapFocus.test.tsx b/polaris-react/src/components/TrapFocus/tests/TrapFocus.test.tsx
index 6956ecec230..3a1978c2475 100644
--- a/polaris-react/src/components/TrapFocus/tests/TrapFocus.test.tsx
+++ b/polaris-react/src/components/TrapFocus/tests/TrapFocus.test.tsx
@@ -158,14 +158,8 @@ describe('', () => {
});
describe('handleBlur', () => {
- const externalDomNode = mountWithApp().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().find('button')!.domNode;
const trapFocus = mountWithApp(
', () => {
});
it('focuses focusTrapWrapper when focusTrapWrapper does not contain a focusable element and the event target is not the firstFocusableNode', () => {
+ const externalDomNode = mountWithApp().find('button')!.domNode;
const trapFocus = mountWithApp(