feat(Layout): add extraLargeDesktop breakpoint

playroom.config.js

@@ -14,6 +14,7 @@ const getMediaQueriesConfig = () => {
             tabletMinWidth: impossibleSize,
             desktopMinWidth: impossibleSize,
             largeDesktopMinWidth: impossibleSize,
+            extraLargeDesktopMinWidth: impossibleSize,
             desktopOrTabletMinHeight: impossibleSize,
         };
     }
@@ -22,6 +23,7 @@ const getMediaQueriesConfig = () => {
             tabletMinWidth: 0,
             desktopMinWidth: 0,
             largeDesktopMinWidth: impossibleSize,
+            extraLargeDesktopMinWidth: impossibleSize,
             desktopOrTabletMinHeight: 0,
         };
     }
@@ -49,7 +51,7 @@ const getWidths = () => {
     if (process.env.FORCE_DESKTOP) {
         return [1024];
     }
-    return [320, 360, 768, 1024, 1512];
+    return [360, 768, 1024, 1512, 1832];
 };
 
 const exampleCode = `

src/grid-layout.css.ts

@@ -16,6 +16,10 @@ const collapsedGrid = {
 export const grid = style({
     display: 'grid',
     '@media': {
+        [mq.extraLargeDesktop]: {
+            gridTemplateColumns: 'repeat(12, 1fr)',
+            gridColumnGap: 24,
+        },
         [mq.largeDesktop]: {
             gridTemplateColumns: 'repeat(12, 1fr)',
             gridColumnGap: 24,

src/media-queries.css.ts

@@ -2,11 +2,13 @@ export const mediaQueriesConfig: {
     tabletMinWidth: number;
     desktopMinWidth: number;
     largeDesktopMinWidth: number;
+    extraLargeDesktopMinWidth: number;
     desktopOrTabletMinHeight: number;
 } = {
     tabletMinWidth: 768,
     desktopMinWidth: 1024,
     largeDesktopMinWidth: 1512,
+    extraLargeDesktopMinWidth: 1832,
     desktopOrTabletMinHeight: 550,
     ...(process.env.MISTICA_MEDIA_QUERIES_CONFIG ? JSON.parse(process.env.MISTICA_MEDIA_QUERIES_CONFIG) : {}),
 };
@@ -25,6 +27,15 @@ export const desktop =
     `and (min-width: ${mediaQueriesConfig.desktopMinWidth}px) ` +
     `and (max-width: ${mediaQueriesConfig.largeDesktopMinWidth - 1}px)`;
 export const largeDesktop =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.largeDesktopMinWidth}px) ` +
+    `and (max-width: ${mediaQueriesConfig.extraLargeDesktopMinWidth - 1}px)`;
+export const extraLargeDesktop =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.extraLargeDesktopMinWidth}px)`;
+export const largeDesktopOrBigger =
     `only screen ` +
     `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
     `and (min-width: ${mediaQueriesConfig.largeDesktopMinWidth}px)`;

src/responsive-layout.css.ts

@@ -6,10 +6,12 @@ import {vars as skinVars} from './skins/skin-contract.css';
 export const MOBILE_SIDE_MARGIN = 16;
 export const TABLET_SIDE_MARGIN = 32;
 export const SMALL_DESKTOP_SIDE_MARGIN = 48;
-export const LARGE_DESKTOP_MAX_WIDTH = 1416;
+export const LARGE_DESKTOP_SIDE_MARGIN = 64;
+export const EXTRA_LARGE_DESKTOP_MAX_WIDTH = 1704;
 
 const marginValue = {
-    largeDesktop: `calc((100vw - ${LARGE_DESKTOP_MAX_WIDTH}px) / 2)`,
+    extraLargeDesktop: `calc((100vw - ${EXTRA_LARGE_DESKTOP_MAX_WIDTH}px) / 2)`,
+    largeDesktop: `${LARGE_DESKTOP_SIDE_MARGIN}px`,
     desktop: `${SMALL_DESKTOP_SIDE_MARGIN}px`,
     tablet: `${TABLET_SIDE_MARGIN}px`,
     mobile: `${MOBILE_SIDE_MARGIN}px`,
@@ -67,6 +69,11 @@ export const responsiveLayoutContainer = style({
 
 export const desktopContainer = style({
     '@media': {
+        [mq.extraLargeDesktop]: {
+            vars: {
+                [currentMargin]: marginValue.extraLargeDesktop,
+            },
+        },
         [mq.largeDesktop]: {
             vars: {
                 [currentMargin]: marginValue.largeDesktop,
@@ -82,6 +89,11 @@ export const desktopContainer = style({
 
 export const forcedMarginDesktopContainer = style({
     '@media': {
+        [mq.extraLargeDesktop]: {
+            vars: {
+                [currentMargin]: `calc(${marginValue.extraLargeDesktop} + ${fallbackVar(sideMargin, '0px')})`,
+            },
+        },
         [mq.largeDesktop]: {
             vars: {
                 [currentMargin]: `calc(${marginValue.largeDesktop} + ${fallbackVar(sideMargin, '0px')})`,

src/screen-size-context-provider.tsx

@@ -36,6 +36,9 @@ const ScreenSizeContextProvider = ({children}: Props): JSX.Element => {
     const [isLargeDesktop, setIsLargeDesktop] = React.useState(
         () => !isServerSide && window.matchMedia(mq.largeDesktop).matches
     );
+    const [isExtraLargeDesktop, setIsExtraLargeDesktop] = React.useState(
+        () => !isServerSide && window.matchMedia(mq.extraLargeDesktop).matches
+    );
 
     useIsomorphicLayoutEffect(() => {
         if (!window.matchMedia) {
@@ -48,6 +51,7 @@ const ScreenSizeContextProvider = ({children}: Props): JSX.Element => {
             [mq.tabletOrBigger, setIsTabletOrBigger],
             [mq.tabletOrSmaller, setIsTabletOrSmaller],
             [mq.largeDesktop, setIsLargeDesktop],
+            [mq.extraLargeDesktop, setIsExtraLargeDesktop],
         ];
 
         const cleanupFunctions = entries.map(([query, setState]) => {
@@ -73,8 +77,17 @@ const ScreenSizeContextProvider = ({children}: Props): JSX.Element => {
             isTabletOrSmaller,
             isDesktopOrBigger: isServerSide ? false : !isTabletOrSmaller,
             isLargeDesktop,
+            isExtraLargeDesktop,
         }),
-        [isMobile, isTablet, isTabletOrBigger, isTabletOrSmaller, isLargeDesktop, isServerSide]
+        [
+            isMobile,
+            isTablet,
+            isTabletOrBigger,
+            isTabletOrSmaller,
+            isLargeDesktop,
+            isExtraLargeDesktop,
+            isServerSide,
+        ]
     );
 
     return <ScreenSizeContext.Provider value={value}>{children}</ScreenSizeContext.Provider>;

src/screen-size-context.tsx

@@ -7,6 +7,7 @@ export type ScreenSizeContextType = Readonly<{
     isTabletOrSmaller: boolean;
     isDesktopOrBigger: boolean;
     isLargeDesktop: boolean;
+    isExtraLargeDesktop: boolean;
 }>;
 
 const ScreenSizeContext = React.createContext<ScreenSizeContextType>({
@@ -16,6 +17,7 @@ const ScreenSizeContext = React.createContext<ScreenSizeContextType>({
     isTabletOrSmaller: false,
     isDesktopOrBigger: false,
     isLargeDesktop: false,
+    isExtraLargeDesktop: false,
 });
 
 export default ScreenSizeContext;

src/test-utils/index.tsx

@@ -20,6 +20,7 @@ const MOBILE_DEVICE_ANDROID = 'MOBILE_ANDROID';
 const TABLET_DEVICE = 'TABLET';
 const DESKTOP_DEVICE = 'DESKTOP';
 const LARGE_DESKTOP_DEVICE = 'LARGE_DESKTOP';
+const EXTRA_LARGE_DESKTOP_DEVICE = 'EXTRA_LARGE_DESKTOP';
 
 export type Device =
     | typeof MOBILE_DEVICE_IOS_SMALL
@@ -28,7 +29,8 @@ export type Device =
     | typeof MOBILE_DEVICE_ANDROID
     | typeof TABLET_DEVICE
     | typeof DESKTOP_DEVICE
-    | typeof LARGE_DESKTOP_DEVICE;
+    | typeof LARGE_DESKTOP_DEVICE
+    | typeof EXTRA_LARGE_DESKTOP_DEVICE;
 
 type DeviceCollection = Record<
     Device,
@@ -122,6 +124,17 @@ const DEVICES: DeviceCollection = {
         },
     },
     [LARGE_DESKTOP_DEVICE]: {
+        platform: undefined,
+        viewport: {
+            width: 1600,
+            height: 900,
+            deviceScaleFactor: 1,
+            isMobile: false,
+            hasTouch: false,
+            isLandscape: false,
+        },
+    },
+    [EXTRA_LARGE_DESKTOP_DEVICE]: {
         platform: undefined,
         viewport: {
             width: 1920,