Fixed issue when apply bulk margin and padding

Author: imtananikhwa

client/packages/lowcoder-design/src/components/Label.tsx

@@ -5,7 +5,6 @@ export const labelCss: any = css`
   user-select: none;
 
   font-size: 13px;
-  color: #222222;
 
   &:hover {
     cursor: default;

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

@@ -278,7 +278,8 @@ let AutoCompleteCompBase = (function () {
           </ConfigProvider>
         </>
       ),
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       ...validateState,
     });
   })

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

@@ -165,7 +165,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
   }
   return props.label({
     required: props.required,
-    style: props.labelStyle,
+    style: props.style,
+    labelStyle:props.labelStyle,
     children: (
       <DateUIView
         viewRef={props.viewRef}
@@ -315,7 +316,8 @@ export const dateRangeControl = (function () {
 
     return props.label({
       required: props.required,
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: children,
       ...(startResult.validateStatus !== "success"
         ? startResult

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

@@ -378,7 +378,8 @@ const NumberInputTmpComp = (function () {
     return props.label({
       required: props.required,
       children: <CustomInputNumber {...props} />,
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       ...validate(props),
     });
   })

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

@@ -14,7 +14,8 @@ const RangeSliderBasicComp = (function () {
   };
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle: props.labelStyle,
       children: (
         <SliderWrapper
           onMouseDown={(e: any) => {
@@ -28,7 +29,7 @@ const RangeSliderBasicComp = (function () {
             range={true}
             value={[props.start.value, props.end.value]}
             $style={props.style}
-            style={{margin: 0}}
+            style={{ margin: 0 }}
             onChange={([start, end]) => {
               props.start.onChange(start);
               props.end.onChange(end);

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

@@ -18,7 +18,8 @@ const SliderBasicComp = (function () {
   };
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <SliderWrapper
           onMouseDown={(e: any) => {

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

@@ -64,7 +64,8 @@ const RatingBasicComp = (function () {
     }, [value]);
 
     return props.label({
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle: props.labelStyle,
       children: (
         <RateStyled
           count={props.max}

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

@@ -20,7 +20,8 @@ let CascaderBasicComp = (function () {
 
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <CascaderStyle
           ref={props.viewRef}

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

@@ -62,13 +62,13 @@ export const getStyle = (style: CheckboxStyleType) => {
       &:hover .ant-checkbox-inner, 
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input + ant-checkbox-inner {
-        background-color:${style.hoverBackground ? style.hoverBackground :'#fff'};
+        background-color:${style.hoverBackground ? style.hoverBackground : '#fff'};
       }
 
       &:hover .ant-checkbox-checked .ant-checkbox-inner, 
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input + ant-checkbox-inner {
-        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+        background-color:${style.hoverBackground ? style.hoverBackground : '#ffff'};
       }
 
       &:hover .ant-checkbox-inner,
@@ -135,7 +135,7 @@ const CheckboxBasicComp = (function () {
     onEvent: ChangeEventHandlerControl,
     options: SelectInputOptionControl,
     style: styleControl(CheckboxStyle),
-    labelStyle:styleControl(LabelStyle),
+    labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
     layout: dropdownControl(RadioLayoutOptions, "horizontal"),
     viewRef: RefControl<HTMLDivElement>,
 
@@ -149,7 +149,8 @@ const CheckboxBasicComp = (function () {
     ] = useSelectInputValidate(props);
     return props.label({
       required: props.required,
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle: props.labelStyle,
       children: (
         <CheckboxGroup
           ref={props.viewRef}

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

@@ -35,7 +35,8 @@ const MultiSelectBasicComp = (function () {
 
     return props.label({
       required: props.required,
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <SelectUIView
           {...props}

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

@@ -101,7 +101,8 @@ const RadioBasicComp = (function () {
     ] = useSelectInputValidate(props);
     return props.label({
       required: props.required,
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <Radio
           ref={props.viewRef}

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

@@ -39,7 +39,8 @@ const SelectBasicComp = (function () {
 
     return props.label({
       required: props.required,
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <SelectUIView
           {...props}

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

@@ -127,7 +127,8 @@ let SignatureTmpComp = (function () {
       }
     };
     return props.label({
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <ReactResizeDetector
           onResize={(width, height) => {

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

@@ -90,14 +90,15 @@ let SwitchTmpComp = (function () {
     onEvent: eventHandlerControl(EventOptions),
     disabled: BoolCodeControl,
     style: migrateOldData(styleControl(SwitchStyle), fixOldData),
-    labelStyle: styleControl(LabelStyle),
+    labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
     viewRef: RefControl<HTMLElement>,
 
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <SwitchWrapper disabled={props.disabled} $style={props.style}>
           <Switch

client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx

@@ -38,7 +38,7 @@ import { EditorContext } from "comps/editorState";
  * Input Comp
  */
 
-const InputStyle = styled(Input) <{ $style: InputLikeStyleType}>`
+const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
@@ -68,7 +68,8 @@ export const InputComp = new UICompBuilder(childrenMap, (props) => {
         suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
       />
     ),
-    style: props.labelStyle,
+    style: props.style,
+    labelStyle: props.labelStyle,
     ...validateState,
   });
 })

client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx

@@ -71,7 +71,8 @@ const PasswordTmpComp = (function () {
           $style={props.style}
         />
       ),
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle:props.labelStyle,
       ...validateState,
     });
   })

client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx

@@ -46,7 +46,7 @@ const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
   height: 100% !important;
-
+  
   .ant-input { 
     height:100% !important;
   }
@@ -87,7 +87,8 @@ let TextAreaTmpComp = (function () {
           />
         </Wrapper>
       ),
-      style: props.labelStyle,
+      style: props.style,
+      labelStyle: props.labelStyle,
       ...validateState,
     });
   })

client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

@@ -250,7 +250,7 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType)
       font-style:${style.fontStyle};
       text-transform:${style.textTransform};
       text-decoration:${style.textDecoration};
-      background-color: ${style.background};
+      // background-color: ${style.background};
       border-color: ${style.border};
 
       &:focus,

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

@@ -96,7 +96,8 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
   return props.label({
     required: props.required,
     ...selectInputValidate(props),
-    style: labelStyle,
+    style,
+    labelStyle,
     children: (
       <ReactResizeDetector onResize={(w, h) => setHeight(h)}>
         <Container {...style}>

client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx

@@ -100,7 +100,8 @@ const TreeCompView = (
   return props.label({
     required: props.required,
     ...validateState,
-    style: labelStyle,
+    style,
+    labelStyle,
     children: (
       <StyledTreeSelect
         ref={props.viewRef}

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

@@ -20,6 +20,7 @@ import { LabelStyleType, heightCalculator, widthCalculator } from "./styleContro
 type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"> & {
   children: ReactNode;
   style?: Record<string, string>;
+  labelStyle?: Record<string, string>;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -76,18 +77,21 @@ const LabelWrapper = styled.div<{
   flex-shrink: 0;
 `;
 // ${(props) => props.$border && UnderlineCss};
+// ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`}
+
 const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $validateStatus: "success" | "warning" | "error" | "validating" | null }>`
   ${labelCss};
   font-family:${(props) => props.$labelStyle.fontFamily};
-  font-weight:${(props) => props.$labelStyle.fontWeight};
+  font-weight:${(props) => props.$labelStyle.textWeight};
   font-style:${(props) => props.$labelStyle.fontStyle};
   text-transform:${(props) => props.$labelStyle.textTransform};
   text-decoration:${(props) => props.$labelStyle.textDecoration};
   font-size:${(props) => props.$labelStyle.textSize};
-  color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.text} !important;
-  ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`}
+  color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.label} !important;
+  ${(props) => `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`}
   border-radius:${(props) => props.$labelStyle.radius};
   padding:${(props) => props.$labelStyle.padding};
+  margin:${(props) => props.$labelStyle.margin};
   width: fit-content;
   user-select: text;
   white-space: nowrap;
@@ -194,7 +198,7 @@ export const LabelControl = (function () {
               <Label
                 $border={!!props.tooltip}
                 $validateStatus={args && args.validateStatus ? args.validateStatus : null}
-                $labelStyle={{ ...args.style }}>
+                $labelStyle={{ ...args.labelStyle }}>
                 {props.text}
               </Label>
             </Tooltip>