Merge pull request #12371 from ToolJet/container-padding

Add padding for Tab and ModalV2

frontend/src/AppBuilder/AppCanvas/Container.jsx

@@ -5,7 +5,12 @@ import WidgetWrapper from './WidgetWrapper';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 import { useDrop } from 'react-dnd';
-import { addChildrenWidgetsToParent, addNewWidgetToTheEditor, computeViewerBackgroundColor } from './appCanvasUtils';
+import {
+  addChildrenWidgetsToParent,
+  addNewWidgetToTheEditor,
+  computeViewerBackgroundColor,
+  getSubContainerWidthAfterPadding,
+} from './appCanvasUtils';
 import {
   CANVAS_WIDTHS,
   NO_OF_GRIDS,
@@ -104,12 +109,7 @@ export const Container = React.memo(
       if (canvasWidth !== undefined) {
         if (componentType === 'Listview' && listViewMode == 'grid') return canvasWidth / columns - 2;
         if (id === 'canvas') return canvasWidth;
-        if (componentType === 'Container' || componentType === 'Form') {
-          return (
-            canvasWidth - (2 * CONTAINER_FORM_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING)
-          );
-        }
-        return canvasWidth - 2; // Need to update this 2 to correct value for other subcontainers
+        return getSubContainerWidthAfterPadding(canvasWidth, componentType, id);
       }
       return realCanvasRef?.current?.offsetWidth;
     }

frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js

@@ -23,3 +23,7 @@ export const CONTAINER_FORM_CANVAS_PADDING = 7;
 export const SUBCONTAINER_CANVAS_BORDER_WIDTH = 1;
 
 export const BOX_PADDING = 2;
+
+export const TAB_CANVAS_PADDING = 7.5;
+
+export const MODAL_CANVAS_PADDING = 5;

frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js

@@ -6,7 +6,16 @@ import { toast } from 'react-hot-toast';
 import _, { debounce } from 'lodash';
 import { useGridStore } from '@/_stores/gridStore';
 import { findHighestLevelofSelection } from './Grid/gridUtils';
-import { CANVAS_WIDTHS, NO_OF_GRIDS, WIDGETS_WITH_DEFAULT_CHILDREN } from './appCanvasConstants';
+import {
+  CANVAS_WIDTHS,
+  NO_OF_GRIDS,
+  WIDGETS_WITH_DEFAULT_CHILDREN,
+  CONTAINER_FORM_CANVAS_PADDING,
+  SUBCONTAINER_CANVAS_BORDER_WIDTH,
+  BOX_PADDING,
+  TAB_CANVAS_PADDING,
+  MODAL_CANVAS_PADDING,
+} from './appCanvasConstants';
 
 export function snapToGrid(canvasWidth, x, y) {
   const gridX = canvasWidth / 43;
@@ -712,3 +721,25 @@ export const getSubContainerIdWithSlots = (parentId) => {
   }
   return cleanParentId;
 };
+
+export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, componentId) => {
+  let padding = 2; //Need to update this 2 to correct value for other subcontainers
+  if (componentType === 'Container' || componentType === 'Form') {
+    padding = 2 * CONTAINER_FORM_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING;
+  }
+  if (componentType === 'Tabs') {
+    padding = 2 * TAB_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING;
+  }
+  if (componentType === 'ModalV2') {
+    const isModalHeader = componentId?.includes('header');
+    if (isModalHeader) {
+      const isModalHeaderCloseBtnEnabled = !useStore.getState().getResolvedComponent(componentId)?.properties
+        ?.hideCloseButton;
+      console.log('isModalHeaderCloseBtnEnabled', isModalHeaderCloseBtnEnabled);
+      padding = 2 * (MODAL_CANVAS_PADDING + (isModalHeaderCloseBtnEnabled ? 56 : 0));
+    } else {
+      padding = 2 * MODAL_CANVAS_PADDING;
+    }
+  }
+  return canvasWidth - padding;
+};

frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx

@@ -19,6 +19,7 @@ export const ModalFooter = React.memo(({ id, isDisabled, customStyles, darkMode,
           overflowX: 'hidden',
           overflowY: isDisabled ? 'hidden' : 'auto',
         }}
+        componentType="ModalV2"
       />
       {isDisabled && (
         <div

frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx

@@ -21,6 +21,7 @@ export const ModalHeader = React.memo(
               overflowX: 'hidden',
               overflowY: isDisabled ? 'hidden' : 'auto',
             }}
+            componentType="ModalV2"
           />
         </div>
         {isDisabled && (

frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx

@@ -105,9 +105,10 @@ export const ModalWidget = ({ ...restProps }) => {
             <SubContainer
               id={`${id}`}
               canvasHeight={modalBodyHeight}
-              styles={{ backgroundColor: customStyles.modalBody.backgroundColor, height: 'inherit' }}
+              styles={{ backgroundColor: customStyles.modalBody.backgroundColor }}
               canvasWidth={modalWidth}
               darkMode={darkMode}
+              componentType="ModalV2"
             />
           </>
         ) : (

frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js

@@ -1,4 +1,5 @@
-var tinycolor = require('tinycolor2');
+const tinycolor = require('tinycolor2');
+import { MODAL_CANVAS_PADDING } from '@/AppBuilder/AppCanvas/appCanvasConstants';
 
 export function createModalStyles({
   height,
@@ -17,25 +18,27 @@ export function createModalStyles({
   boxShadow,
 }) {
   const backwardCompatibilityCheck = height == '34' || modalHeight != undefined ? true : false;
-
   return {
     modalBody: {
       height: backwardCompatibilityCheck ? computedCanvasHeight : height,
       backgroundColor:
         ['#fff', '#ffffffff'].includes(bodyBackgroundColor) && darkMode ? '#1F2837' : bodyBackgroundColor,
       overflowY: isDisabledModal ? 'hidden' : 'auto',
+      padding: `${MODAL_CANVAS_PADDING}px`,
     },
     modalHeader: {
       backgroundColor:
         ['#fff', '#ffffffff'].includes(headerBackgroundColor) && darkMode ? '#1F2837' : headerBackgroundColor,
       height: headerHeightPx,
       overflowY: isDisabledModal ? 'hidden' : 'auto',
+      padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
     },
     modalFooter: {
       backgroundColor:
         ['#fff', '#ffffffff'].includes(footerBackgroundColor) && darkMode ? '#1F2837' : footerBackgroundColor,
       height: footerHeightPx,
       overflowY: isDisabledModal ? 'hidden' : 'auto',
+      padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
     },
     buttonStyles: {
       backgroundColor: triggerButtonBackgroundColor,

frontend/src/AppBuilder/Widgets/Tabs.jsx

@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { resolveWidgetFieldValue, isExpectedDataType } from '@/_helpers/utils';
 import useStore from '@/AppBuilder/_stores/store';
-
+import { TAB_CANVAS_PADDING } from '@/AppBuilder/AppCanvas/appCanvasConstants';
 export const Tabs = function Tabs({
   id,
   component,
@@ -117,6 +117,7 @@ export const Tabs = function Tabs({
           position: 'absolute',
           top: parsedHideTabs ? '0px' : '41px',
           width: '100%',
+          padding: TAB_CANVAS_PADDING,
         }}
       >
         <SubContainer
@@ -144,7 +145,12 @@ export const Tabs = function Tabs({
     <div
       data-disabled={parsedDisabledState}
       className="card tabs-component"
-      style={{ height, display: parsedWidgetVisibility ? 'flex' : 'none', backgroundColor: bgColor, boxShadow }}
+      style={{
+        height,
+        display: parsedWidgetVisibility ? 'flex' : 'none',
+        backgroundColor: bgColor,
+        boxShadow,
+      }}
       data-cy={dataCy}
     >
       <ul