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('); - const childrenSpan = button.find('span', {children})!; - expect(childrenSpan).toHaveReactProps({ - className: expect.stringContaining('removeUnderline'), - }); - }); }); describe('dataPrimaryLink', () => { @@ -390,4 +391,24 @@ describe('); + 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(