feat: additional padding settings for container

Author: Aqib Mirza

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

@@ -91,6 +91,7 @@ export function TriContainer(props: TriContainerProps) {
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
             backgroundColor={style?.headerBackground}
+            style={{padding: style.containerheaderpadding}}
           />
         </BackgroundColorContext.Provider>
       )}
@@ -109,6 +110,7 @@ export function TriContainer(props: TriContainerProps) {
             hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
             backgroundColor={style?.background}
             borderColor={style?.border}
+            style={{padding: style.containerbodypadding}}
           />
         </BackgroundColorContext.Provider>
       )}
@@ -125,6 +127,7 @@ export function TriContainer(props: TriContainerProps) {
             showName={{ top: showHeader || showBody ? 20 : 0 }}
             backgroundColor={style?.footerBackground}
             borderColor={style?.border}
+            style={{padding: style.containerfooterpadding}}
           />
         </BackgroundColorContext.Provider>
       )}

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -239,7 +239,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       name === "cardRadius"
     ) {	
       childrenMap[name] = StringControl;	
-    } else if (name === "margin" || name === "padding") {	
+    } else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") {	
       childrenMap[name] = StringControl;	
     } else {	
       childrenMap[name] = ColorControl;	
@@ -281,7 +281,10 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                     if (	
                       name === "radius" ||	
                       name === "margin" ||	
-                      name === "padding"	
+                      name === "padding" ||
+                      name==="containerheaderpadding"	||
+                      name==="containerfooterpadding"	||
+                      name==="containerbodypadding"
                     ) {
                       children[name]?.dispatchChangeValueAction("");
                     } else {
@@ -338,7 +341,10 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                           preInputNode: <MarginIcon title="" />,	
                           placeholder: props[name],	
                         })	
-                      : name === "padding"	
+                      : name === "padding" ||
+                      name === "containerheaderpadding"	||
+                      name === "containerfooterpadding"	||
+                      name === "containerbodypadding"
                       ? (	
                           children[name] as InstanceType<typeof StringControl>	
                         ).propertyView({	

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -16,19 +16,33 @@ export type SimpleColorConfig = CommonColorConfig & {
 export type RadiusConfig = CommonColorConfig & {
   readonly radius: string;
 };
+
+export type ContainerHeaderPaddigConfig = CommonColorConfig & {
+  readonly containerheaderpadding: string;
+};
+
+export type ContainerBodyPaddigConfig = CommonColorConfig & {
+  readonly containerbodypadding: string;
+};
+
+export type ContainerFooterPaddigConfig = CommonColorConfig & {
+  readonly containerfooterpadding: string;
+};
+
 export type MarginConfig = CommonColorConfig & {	
   readonly margin: string;	
 };	
 export type PaddingConfig = CommonColorConfig & {	
   readonly padding: string;	
 };
+
 export type DepColorConfig = CommonColorConfig & {
   readonly depName?: string;
   readonly depTheme?: keyof ThemeDetail;
   readonly depType?: DEP_TYPE;
   transformer: (color: string, ...rest: string[]) => string;
 };
-export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig;
+export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -239,12 +253,32 @@ const MARGIN = {
   label: trans("style.margin"),	
   margin: "margin",	
 } as const;	
+
 const PADDING = {	
   name: "padding",	
   label: trans("style.padding"),	
   padding: "padding",	
 } as const;
 
+const CONTAINERHEADERPADDING = {	
+  name: "containerheaderpadding",	
+  label: trans("style.containerheaderpadding"),	
+  containerheaderpadding: "padding",	
+} as const;
+
+const CONTAINERFOOTERPADDING = {	
+  name: "containerfooterpadding",	
+  label: trans("style.containerfooterpadding"),	
+  containerfooterpadding: "padding",	
+} as const;
+
+
+const CONTAINERBODYPADDING = {	
+  name: "containerbodypadding",	
+  label: trans("style.containerbodypadding"),	
+  containerbodypadding: "padding",	
+} as const;
+
 const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
   ({
     name: "border",
@@ -370,6 +404,9 @@ export const ContainerStyle = [
   },
   MARGIN,	
   PADDING,
+  CONTAINERHEADERPADDING,
+  CONTAINERFOOTERPADDING,
+  CONTAINERBODYPADDING
 ] as const;
 
 export const SliderStyle = [

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -284,6 +284,8 @@ export const en = {
     marginDesc: "The default margin is typically used for most components",
     padding: "Padding",
     paddingDesc: "The default padding is typically used for most components",
+    containerheaderpadding: "Header Padding",
+    containerheaderpaddingDesc: "The default headerpadding is typically used for most components",
     //Added By Aqib Mirza
     gridColumns: "Grid Columns",
     gridColumnsDesc:
@@ -336,6 +338,9 @@ export const en = {
     marginRight: "Margin Right",
     marginTop: "Margin Top",
     marginBottom: "Margin Bottom",
+    containerheaderpadding: "Header Padding",
+    containerfooterpadding: "Footer Padding",
+    containerbodypadding: "Body Padding",
   },
   export: {
     hiddenDesc: "If true, the component is hidden",