feat[reactSdk][gen1]: ENG-7984 Add another breakpoint

packages/core/src/types/element.ts

@@ -26,8 +26,8 @@ export interface BuilderElement {
     large?: SerializableCSSStyleDeclaration;
     medium?: SerializableCSSStyleDeclaration;
     small?: SerializableCSSStyleDeclaration;
-    /** @deprecated */
     xsmall?: SerializableCSSStyleDeclaration;
+    xlarge?: SerializableCSSStyleDeclaration;
   };
   component?: {
     name: string;

packages/react/src/blocks/Image.tsx

@@ -144,6 +144,11 @@ export const getSizes = (
       generatedSizes.push(widthAndQuery);
     }
 
+    if (block.responsiveStyles?.xlarge?.width) {
+      const width = block.responsiveStyles.xlarge.width.replace('%', 'vw');
+      generatedSizes.push(width);
+    }
+
     if (block.responsiveStyles?.large?.width) {
       const width = block.responsiveStyles.large.width.replace('%', 'vw');
       generatedSizes.push(width);

packages/react/src/components/builder-block.component.tsx

@@ -181,8 +181,34 @@ export class BuilderBlock extends React.Component<
     const reversedNames = sizeNames.slice().reverse();
     const styles: any = {};
     if (responsiveStyles) {
+      const contentHasLargeBreakpoint = Boolean(
+        this.privateState.context.builderContent?.meta?.breakpoints?.large
+      );
+      const contentHasXSmallBreakpoint = Boolean(
+        this.privateState.context.builderContent?.meta?.breakpoints?.xsmall
+      );
       for (const size of reversedNames) {
-        if (size === 'large') {
+        if (!contentHasLargeBreakpoint && size === 'xlarge') {
+          // Only apply xlarge styles if xlarge breakpoint is enabled on content
+          continue;
+        }
+
+        if (!contentHasXSmallBreakpoint && size === 'xsmall') {
+          // Only apply xsmall styles if xsmall breakpoint is enabled on content
+          continue;
+        }
+
+        if (size === 'xlarge') {
+          if (!this.props.emailMode) {
+            styles[`&.builder-block`] = Object.assign(
+              {},
+              // apply large styles first so they act as fallback styles for xlarge
+              responsiveStyles.large || {},
+              responsiveStyles[size],
+              initialAnimationStepStyles
+            );
+          }
+        } else if (size === 'large' && !contentHasLargeBreakpoint) {
           if (!this.props.emailMode) {
             styles[`&.builder-block`] = Object.assign(
               {},

packages/react/src/components/builder-component.component.tsx

@@ -103,9 +103,11 @@ if (globalThis.fetch) fetch = globalThis.fetch;
 fetch ??= require('node-fetch');
 
 const sizeMap = {
+  xlarge: 'xlarge',
   desktop: 'large',
   tablet: 'medium',
   mobile: 'small',
+  xsmall: 'xsmall',
 };
 
 const fetchCache: { [key: string]: any } = {};

packages/react/src/constants/device-sizes.constant.ts

@@ -1,17 +1,17 @@
 import { fastClone } from '../functions/utils';
 
-export type Size = 'large' | 'medium' | 'small' | 'xsmall';
-export const sizeNames: Size[] = ['xsmall', 'small', 'medium', 'large'];
+export type Size = 'large' | 'medium' | 'small' | 'xsmall' | 'xlarge';
+export const sizeNames: Size[] = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
 
 // TODO: put in @builder.io/core
 const sizes = {
   xsmall: {
     min: 0,
-    default: 0,
-    max: 0,
+    default: 160,
+    max: 320,
   },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640,
   },
@@ -25,6 +25,11 @@ const sizes = {
     default: 991,
     max: 1200,
   },
+  xlarge: {
+    min: 1201,
+    default: 1400,
+    max: 2000,
+  },
   getWidthForSize(size: Size) {
     return this[size].default;
   },
@@ -35,46 +40,65 @@ const sizes = {
         return size;
       }
     }
-    return 'large';
+    return 'xlarge';
   },
 };
 export type Sizes = typeof sizes;
 
 export interface Breakpoints {
+  xsmall?: number;
   small?: number;
   medium?: number;
+  large?: number;
 }
 
-export const getSizesForBreakpoints = ({ small, medium }: Breakpoints) => {
+export const getSizesForBreakpoints = (breakpoints: Breakpoints) => {
   const newSizes = {
     ...sizes, // Note: this helps get the function from sizes
     ...fastClone(sizes), // Note: this helps to get a deep clone of fields like small, medium etc
   };
 
-  if (!small || !medium) {
+  if (!breakpoints) {
     return newSizes;
   }
 
-  const smallMin = Math.floor(small / 2);
-  newSizes.small = {
-    max: small,
-    min: smallMin,
-    default: smallMin + 1,
-  };
+  const { xsmall, small, medium, large } = breakpoints;
 
-  const mediumMin = newSizes.small.max + 1;
-  newSizes.medium = {
-    max: medium,
-    min: mediumMin,
-    default: mediumMin + 1,
-  };
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1,
+    };
+  }
 
-  const largeMin = newSizes.medium.max + 1;
-  newSizes.large = {
-    max: 2000, // TODO: decide upper limit
-    min: largeMin,
-    default: largeMin + 1,
-  };
+  if (small) {
+    const smallMin = Math.floor(small / 2);
+    newSizes.small = {
+      max: small,
+      min: smallMin,
+      default: smallMin + 1,
+    };
+  }
+
+  if (medium) {
+    const mediumMin = newSizes.small.max + 1;
+    newSizes.medium = {
+      max: medium,
+      min: mediumMin,
+      default: mediumMin + 1,
+    };
+  }
+
+  if (large) {
+    const largeMin = newSizes.medium.max + 1;
+    newSizes.large = {
+      max: large ?? 2000,
+      min: largeMin,
+      default: largeMin + 1,
+    };
+  }
 
   return newSizes;
 };