diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-1-snap.png new file mode 100644 index 0000000000..0614e10292 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-2-snap.png new file mode 100644 index 0000000000..2f045d66dd Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-3-snap.png new file mode 100644 index 0000000000..7bb676237d Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-3-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-4-snap.png new file mode 100644 index 0000000000..1ac2b11b29 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-4-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-5-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-5-snap.png new file mode 100644 index 0000000000..096a546f59 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-5-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-6-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-6-snap.png new file mode 100644 index 0000000000..3a78c59d1f Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-6-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-7-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-7-snap.png new file mode 100644 index 0000000000..e0e6877816 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-7-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-8-snap.png b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-8-snap.png new file mode 100644 index 0000000000..ea6785dec9 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/responsive-layout-screenshot-test-tsx-responsive-layout-8-snap.png differ diff --git a/src/__screenshot_tests__/responsive-layout-screenshot-test.tsx b/src/__screenshot_tests__/responsive-layout-screenshot-test.tsx new file mode 100644 index 0000000000..d73a401993 --- /dev/null +++ b/src/__screenshot_tests__/responsive-layout-screenshot-test.tsx @@ -0,0 +1,21 @@ +import {openStoryPage} from '../test-utils'; + +const TEST_CASES = [ + {id: 'layout-responsive-layout--default', device: 'MOBILE_IOS'}, + {id: 'layout-responsive-layout--default', device: 'TABLET'}, + {id: 'layout-responsive-layout--default', device: 'DESKTOP'}, + {id: 'layout-responsive-layout--default', device: 'DESKTOP', viewport: {width: 1368, height: 770}}, + {id: 'layout-responsive-layout--nested', device: 'MOBILE_IOS'}, + {id: 'layout-responsive-layout--nested', device: 'TABLET'}, + {id: 'layout-responsive-layout--nested', device: 'DESKTOP'}, + {id: 'layout-responsive-layout--nested', device: 'DESKTOP', viewport: {width: 1368, height: 770}}, +] as const; + +test.each(TEST_CASES)('ResponsiveLayout', async (testCase) => { + await openStoryPage({ + ...testCase, + }); + + const image = await page.screenshot(); + expect(image).toMatchImageSnapshot(); +}); diff --git a/src/__stories__/responsive-layout-story.tsx b/src/__stories__/responsive-layout-story.tsx index 9ee80088d5..d17dc9e37d 100644 --- a/src/__stories__/responsive-layout-story.tsx +++ b/src/__stories__/responsive-layout-story.tsx @@ -34,3 +34,17 @@ Default.args = { isInverse: false, withBackgroundColor: false, }; + +export const Nested: StoryComponent = () => ( + + + + + + + + + +); + +Nested.storyName = 'Nested responsive layouts'; diff --git a/src/button-fixed-footer-layout.tsx b/src/button-fixed-footer-layout.tsx index ebc70f9482..808fb60b38 100644 --- a/src/button-fixed-footer-layout.tsx +++ b/src/button-fixed-footer-layout.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import FixedFooterLayout from './fixed-footer-layout'; import ButtonLayout from './button-layout'; import {useScreenSize} from './hooks'; -import ResponsiveLayout from './responsive-layout'; +import {InternalResponsiveLayout} from './responsive-layout'; import Box from './box'; import type {ButtonLink, NullableButtonElement} from './button'; @@ -40,7 +40,7 @@ const ButtonFixedFooterLayout: React.FC = ({ footerBgColor={footerBgColor} containerBgColor={containerBgColor} footer={ - + = ({ {secondaryButton} - + } > {children} diff --git a/src/carousel.css.ts b/src/carousel.css.ts index 44edbd0fb6..6f511c454e 100644 --- a/src/carousel.css.ts +++ b/src/carousel.css.ts @@ -147,7 +147,12 @@ export const carousel = style([ const responsiveLayoutSideMargin = fallbackVar(responsiveLayoutVars.sideMargin, '0px'); export const carouselWithScroll = style({ - margin: `0 calc(${responsiveLayoutSideMargin} * -1)`, + margin: 0, + '@media': { + [mq.tabletOrSmaller]: { + margin: `0 calc(${responsiveLayoutSideMargin} * -1)`, + }, + }, }); export const centeredCarousel = style({ diff --git a/src/responsive-layout.css.ts b/src/responsive-layout.css.ts index 595c6ca6f6..442e26d365 100644 --- a/src/responsive-layout.css.ts +++ b/src/responsive-layout.css.ts @@ -11,7 +11,55 @@ export const LARGE_DESKTOP_MAX_WIDTH = 1224; const sideMargin = createVar(); export const vars = {sideMargin}; -export const container = sprinkles({width: '100%'}); +export const responsiveLayoutContainer = style([ + sprinkles({width: '100%'}), + { + vars: { + [sideMargin]: '0px', + }, + '@media': { + [mq.desktopOrBigger]: { + vars: { + [sideMargin]: `${SMALL_DESKTOP_SIDE_MARGIN}px`, + }, + }, + [mq.tablet]: { + vars: { + [sideMargin]: `${TABLET_SIDE_MARGIN}px`, + }, + }, + [mq.mobile]: { + vars: { + [sideMargin]: `${MOBILE_SIDE_MARGIN}px`, + }, + }, + }, + }, +]); + +export const expandedResponsiveLayoutContainer = style([ + { + selectors: { + '& &': { + width: 'auto', + margin: `0 calc(-1 * ${sideMargin})`, + '@media': { + [mq.largeDesktop]: { + margin: `0 calc(-1 * (100vw - ${LARGE_DESKTOP_MAX_WIDTH}px) / 2)`, + }, + }, + }, + }, + }, +]); + +export const fullwidthContainer = style([ + { + vars: { + [sideMargin]: '0px', + }, + }, +]); export const backgroundVariant = { inverse: sprinkles({background: skinVars.colors.backgroundBrand}), @@ -19,42 +67,16 @@ export const backgroundVariant = { }; export const responsiveLayout = style({ - margin: 'auto', paddingLeft: 'env(safe-area-inset-left)', paddingRight: 'env(safe-area-inset-right)', - vars: { - [sideMargin]: '0px', - }, + margin: `0 ${sideMargin}`, +}); +export const expandedResponsiveLayout = style({ '@media': { [mq.largeDesktop]: { - width: LARGE_DESKTOP_MAX_WIDTH, - maxWidth: `calc(100% - ${SMALL_DESKTOP_SIDE_MARGIN * 2}px)`, // to make ResponsiveLayout work inside desktop modals - }, - [mq.desktop]: { - margin: `0 ${SMALL_DESKTOP_SIDE_MARGIN}px`, - }, - [mq.tablet]: { - margin: `0 ${TABLET_SIDE_MARGIN}px`, - - vars: { - [sideMargin]: `${TABLET_SIDE_MARGIN}px`, - }, - }, - [mq.mobile]: { - margin: `0 ${MOBILE_SIDE_MARGIN}px`, - - vars: { - [sideMargin]: `${MOBILE_SIDE_MARGIN}px`, - }, - }, - }, - - selectors: { - '& &': { - margin: 0, - width: 'auto', + margin: `0 calc((100vw - ${LARGE_DESKTOP_MAX_WIDTH}px) / 2)`, }, }, }); diff --git a/src/responsive-layout.tsx b/src/responsive-layout.tsx index 2b28131a7c..c1ff9afd45 100644 --- a/src/responsive-layout.tsx +++ b/src/responsive-layout.tsx @@ -17,7 +17,7 @@ type Props = { dataAttributes?: DataAttributes; }; -const ResponsiveLayout: React.FC = ({ +export const InternalResponsiveLayout: React.FC = ({ children, isInverse = false, variant, @@ -25,6 +25,7 @@ const ResponsiveLayout: React.FC = ({ className, fullWidth, dataAttributes, + shouldExpandWhenNested = false, }) => { const outsideVariant: Variant = useThemeVariant(); const internalVariant: Variant | undefined = variant || (isInverse && 'inverse') || undefined; @@ -33,19 +34,33 @@ const ResponsiveLayout: React.FC = ({
-
{children}
+
+ {children} +
); }; +const ResponsiveLayout: React.FC = ({children, ...props}) => ( + + {children} + +); + export default ResponsiveLayout; diff --git a/src/sheet.css.ts b/src/sheet.css.ts index 59863d1068..1eaf0fc81c 100644 --- a/src/sheet.css.ts +++ b/src/sheet.css.ts @@ -1,8 +1,11 @@ -import {keyframes, style} from '@vanilla-extract/css'; +import {createVar, keyframes, style} from '@vanilla-extract/css'; import * as mq from './media-queries.css'; import {vars as skinVars} from './skins/skin-contract.css'; import {sprinkles} from './sprinkles.css'; +const insideSheetDialog = createVar(); +export const vars = {insideSheetDialog}; + export const transitionDuration = process.env.NODE_ENV === 'test' ? 0 : 400; const sheetClosedStyle = { @@ -41,6 +44,10 @@ export const SheetContainer = style([ '@media': { [mq.desktopOrBigger]: { + vars: { + [insideSheetDialog]: '1', + }, + pointerEvents: 'none', // allow clicks to go through this layer and hit the overlay top: 0, display: 'flex', diff --git a/src/sheet.tsx b/src/sheet.tsx index e5cde6740a..fa13c61e96 100644 --- a/src/sheet.tsx +++ b/src/sheet.tsx @@ -9,7 +9,6 @@ import {Text2, Text3, Text5} from './text'; import {vars as skinVars} from './skins/skin-contract.css'; import {RadioGroup} from './radio-button'; import {Row, RowList} from './list'; -import ResponsiveLayout from './responsive-layout'; import NegativeBox from './negative-box'; import Stack from './stack'; import Box from './box'; @@ -23,6 +22,7 @@ import IconCloseRegular from './generated/mistica-icons/icon-close-regular'; import IconButton from './icon-button'; import ButtonLayout from './button-layout'; import Image from './image'; +import {InternalResponsiveLayout} from './responsive-layout'; import type {ExclusifyUnion} from './utils/utility-types'; import type {DataAttributes, IconProps, RendersNullableElement, TrackingEvent} from './utils/types'; @@ -338,11 +338,11 @@ export const SheetBody = ({
{title ? ( - + {title} - + ) : ( @@ -351,7 +351,7 @@ export const SheetBody = ({
- + {subtitle || description ? ( @@ -387,19 +387,19 @@ export const SheetBody = ({ ) : null} {children} - +
{hasButtons && (
{showButtonsDivider && } - + {button} {secondaryButton} - +
)}