feat: margin padding and select box options

Author: Aqib Mirza

client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

@@ -12,13 +12,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
   const activeColor = genActiveColor(buttonStyle.background);
   return css`
     border-radius: ${buttonStyle.radius};
+    margin: ${buttonStyle.margin};	
+    padding: ${buttonStyle.padding};
     &:not(:disabled) {
       // click animation color
       --antd-wave-shadow-color: ${buttonStyle.border};
       border-color: ${buttonStyle.border};
       color: ${buttonStyle.text};
       background-color: ${buttonStyle.background};
       border-radius: ${buttonStyle.radius};
+      margin: ${buttonStyle.margin};	
+      padding: ${buttonStyle.padding};
 
       :hover,
       :focus {
@@ -37,12 +41,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
           : buttonStyle.border};
       }
     }
+    
   `;
 }
 
 export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
   ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
-  width: 100%;
+  width: -webkit-fill-available;	
+  height: auto;
   display: inline-flex;
   justify-content: center;
   align-items: center;

client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

@@ -29,23 +29,30 @@ const DropdownButton = styled(Dropdown.Button)`
 
 const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
   width: calc(100% - 32px);
-
+  ${(props) => `margin: ${props.$buttonStyle.margin};`}
+  margin-right: 0;
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
+    margin: 0 !important;
+    height: 100%;
     &.ant-btn-default {
+      margin: 0 !important;
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
     }
     width: 100%;
   }
 `;
 
 const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
-  width: 32px;
+  // width: 32px;
+  ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-left: -1px;
-
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
+    margin: 0 !important;
+    height: 100%;
     &.ant-btn-default {
+      margin: 0 !important;
       ${(props) => `border-radius: 0 ${props.$buttonStyle.radius} ${props.$buttonStyle.radius} 0;`}
     }
     width: 100%;
@@ -69,6 +76,7 @@ const DropdownTmpComp = (function () {
       .map((option, index) => ({
         title: option.label,
         label: option.label,
+        style: {padding: props.style.padding},
         key: option.label + " - " + index,
         disabled: option.disabled,
         icon: hasIcon && <span>{option.prefixIcon}</span>,
@@ -83,6 +91,7 @@ const DropdownTmpComp = (function () {
 
     return (
       <ButtonCompWrapper disabled={props.disabled}>
+        {console.log("props,", props)}
         {props.onlyMenu ? (
           <Dropdown disabled={props.disabled} overlay={menu}>
             <Button100 $buttonStyle={props.style} disabled={props.disabled}>

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -21,7 +21,7 @@ import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
 const Link = styled(Button)<{ $style: LinkStyleType }>`
-  ${(props) => `color: ${props.$style.text};`}
+  ${(props) => `color: ${props.$style.text};margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
   &.ant-btn {
     display: inline-flex;
     align-items: center;

client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

@@ -63,7 +63,7 @@ export const disabledTime = (min: string, max: string) => {
 export const getStyle = (style: DateTimeStyleType) => {
   return css`
     border-radius: ${style.radius};
-
+    padding: ${style.padding};
     &:not(.ant-picker-disabled) {
       border-color: ${style.border};
       background-color: ${style.background};

client/packages/lowcoder/src/comps/comps/dividerComp.tsx

@@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design";
 import _ from "lodash";
 import styled from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
-import { DividerStyle, DividerStyleType } from "comps/controls/styleControlConstants";
+import { DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -22,6 +22,17 @@ const StyledDivider = styled(Divider)<IProps>`
     display: flex;
     align-items: center;
   }
+  min-width: 0;	
+  width: ${(props) => {	
+    return widthCalculator(props.$style.margin);	
+  }};	
+  min-height: ${(props) => {	
+    return heightCalculator(props.$style.margin);	
+  }};	
+  margin: ${(props) => {	
+    return props.$style.margin;	
+  }};	
+  padding: ${(props) => props.$style.padding};
   border-top: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
 
   &.ant-divider-horizontal.ant-divider-with-text {

client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx

@@ -6,7 +6,7 @@ import { darkenColor } from "components/colorSelect/colorUtils";
 import { Section, sectionNames } from "components/Section";
 import { IconControl } from "comps/controls/iconControl";
 import { styleControl } from "comps/controls/styleControl";
-import { FileStyle, FileStyleType } from "comps/controls/styleControlConstants";
+import { FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { hasIcon } from "comps/utils";
 import { getComponentDocUrl } from "comps/utils/compDocUtil";
@@ -133,6 +133,10 @@ const getStyle = (style: FileStyleType) => {
   return css`
     .ant-btn {
       border-radius: ${style.radius};
+      margin: ${style.margin};	
+      padding: ${style.padding};	
+      width: ${widthCalculator(style.margin)};	
+      height: ${heightCalculator(style.margin)};
     }
 
     .ant-btn:not(:disabled) {

client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx

@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import { FileViewerStyle, FileViewerStyleType } from "comps/controls/styleControlConstants";
+import { FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { isEmpty } from "lodash";
 import { useState } from "react";
 import { DocumentViewer } from "react-documents";
@@ -13,6 +13,11 @@ import { trans } from "i18n";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
+    width: ${widthCalculator(style.margin)};	
+    height: ${heightCalculator(style.margin)};	
+    margin: ${style.margin};	
+    padding: ${style.padding};
+
     overflow: hidden;
     background-color: ${style.background};
     border: 1px solid ${style.border};

client/packages/lowcoder/src/comps/comps/imageComp.tsx

@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import ReactResizeDetector from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
-import { ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
+import { ImageStyle, ImageStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
@@ -23,7 +23,6 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
   .ant-image,
   img {
     width: 100%;
@@ -43,6 +42,10 @@ const getStyle = (style: ImageStyleType) => {
     img {
       border: 1px solid ${style.border};
       border-radius: ${style.radius};
+      margin: ${style.margin};	
+      padding: ${style.padding};	
+      max-width: ${widthCalculator(style.margin)};	
+      max-height: ${heightCalculator(style.margin)};
     }
 
     .ant-image-mask {

client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx

@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { RefControl } from "../../controls/refControl";
 import { styleControl } from "comps/controls/styleControl";
-import { InputLikeStyle, InputLikeStyleType } from "comps/controls/styleControlConstants";
+import { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import {
   disabledPropertyView,
   hiddenPropertyView,
@@ -58,7 +58,9 @@ const getStyle = (style: InputLikeStyleType) => {
       color: ${style.text};
       background-color: ${style.background};
       border-color: ${style.border};
-
+      //margin: ${style.margin};	
+      padding: 0;	
+      width: ${widthCalculator(style.margin)};
       &.ant-input-number-focused {
         border-color: ${style.accent};
       }
@@ -71,6 +73,14 @@ const getStyle = (style: InputLikeStyleType) => {
         color: ${style.text};
         opacity: 0.4;
       }
+      .ant-input-number {	
+        margin: 0;	
+      }	
+      .ant-input-number input {	
+        margin: 0;	
+        padding: ${style.padding};	
+        height: ${heightCalculator(style.margin)};	
+      }
 
       .ant-input-number-handler-wrap {
         background-color: ${style.background};

client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx

@@ -28,6 +28,7 @@ const RangeSliderBasicComp = (function () {
             range={true}
             value={[props.start.value, props.end.value]}
             $style={props.style}
+            style={{margin: 0}}
             onChange={([start, end]) => {
               props.start.onChange(start);
               props.end.onChange(end);

client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx

@@ -31,6 +31,7 @@ const SliderBasicComp = (function () {
             {...props}
             value={props.value.value}
             $style={props.style}
+            style={{margin: 0}}
             onChange={(e) => {
               props.value.onChange(e);
               props.onEvent("change");

client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx

@@ -1,6 +1,6 @@
 import { Progress } from "antd";
 import { styleControl } from "comps/controls/styleControl";
-import { ProgressStyle, ProgressStyleType } from "comps/controls/styleControlConstants";
+import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { numberExposingStateControl } from "../controls/codeStateControl";
@@ -11,6 +11,10 @@ import { trans } from "i18n";
 
 const getStyle = (style: ProgressStyleType) => {
   return css`
+    width: ${widthCalculator(style.margin)};	
+    height: ${heightCalculator(style.margin)};	
+    margin: ${style.margin};	
+    padding: ${style.padding};
     .ant-progress-text {
       color: ${style.text};
     }

client/packages/lowcoder/src/comps/comps/progressComp.tsx

@@ -5,7 +5,7 @@ import { BoolControl } from "../controls/boolControl";
 import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { styleControl } from "comps/controls/styleControl";
-import { ProgressStyle, ProgressStyleType } from "comps/controls/styleControlConstants";
+import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -16,6 +16,10 @@ const getStyle = (style: ProgressStyleType) => {
     .ant-progress-text {
       color: ${style.text};
     }
+    width: ${widthCalculator(style.margin)};	
+    height: ${heightCalculator(style.margin)};	
+    margin: ${style.margin};	
+    padding: ${style.padding};
     .ant-progress-inner {
       background-color: ${style.track};
       .ant-progress-bg {

client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx

@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
-import { QRCodeStyle } from "comps/controls/styleControlConstants";
+import { QRCodeStyle, heightCalculator,	widthCalculator } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -34,18 +34,28 @@ const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
     return <>{trans("QRCode.maxLength")}</>;
   }
   return (
-    <QRCodeSVG
-      value={value}
-      level={props.level}
-      width="100%"
-      height="100%"
-      bgColor={props.style.background}
-      fgColor={props.style.color}
-      includeMargin={props.includeMargin}
-      imageSettings={
-        props.image ? { src: props.image, width: 0, height: 0, excavate: true } : undefined
-      }
-    />
+    <div
+      style={{
+        margin: props.style.margin,
+        padding: props.includeMargin ? props.style.padding : 0,
+        width: widthCalculator(props.style.margin),
+        height: heightCalculator(props.style.margin),
+        background: props.style.background,
+      }}
+    >
+      <QRCodeSVG
+        value={value}
+        level={props.level}
+        width="100%"
+        height="100%"
+        bgColor={props.style.background}
+        fgColor={props.style.color}
+        includeMargin={false}
+        imageSettings={
+          props.image ? { src: props.image, width: 0, height: 0, excavate: true } : undefined
+        }
+      />
+    </div>
   );
 };
 

client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx

@@ -18,6 +18,9 @@ import { i18nObjs, trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { CascaderRef } from "antd/lib/cascader";
 
+import { MarginControl } from "../../controls/marginControl";	
+import { PaddingControl } from "../../controls/paddingControl";
+
 export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " ");
 
 export const CascaderChildren = {
@@ -31,6 +34,8 @@ export const CascaderChildren = {
   style: styleControl(CascaderStyle),
   showSearch: BoolControl.DEFAULT_TRUE,
   viewRef: RefControl<CascaderRef>,
+  margin: MarginControl,	
+  padding: PaddingControl,
 };
 
 export const CascaderPropertyView = (

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -64,6 +64,7 @@ export const getStyle = (style: CheckboxStyleType) => {
     }
 
     .ant-checkbox-wrapper {
+      padding: ${style.padding};
       .ant-checkbox-inner,
       .ant-checkbox-checked::after {
         border-radius: ${style.radius};

client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx

@@ -12,11 +12,16 @@ import {
 } from "./selectCompConstants";
 import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputConstants";
 
+import { PaddingControl } from "../../controls/paddingControl";	
+import { MarginControl } from "../../controls/marginControl";
+
 const MultiSelectBasicComp = (function () {
   const childrenMap = {
     ...SelectChildrenMap,
     value: arrayStringExposingStateControl("value", ["1", "2"]),
     style: styleControl(MultiSelectStyle),
+    margin: MarginControl,	
+    padding: PaddingControl,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user

client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

@@ -16,9 +16,9 @@ const getStyle = (style: RadioStyleType) => {
   return css`
     .ant-radio-wrapper:not(.ant-radio-wrapper-disabled) {
       color: ${style.staticText};
-      height: 22px;
+      // height: 22px;
       max-width: calc(100% - 8px);
-
+      padding: ${style.padding};
       span:not(.ant-radio) {
         ${EllipsisTextCss};
       }