field styles added to input

MenaamAfzal · MenaamAfzal · commit e42c53e30e89 · 2024-04-18T02:42:36.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -1,7 +1,7 @@
 import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
-import { InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
+import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
 import {
   NameConfig,
   NameConfigPlaceHolder,
@@ -53,6 +53,7 @@ const childrenMap = {
   labelStyle: styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
+  field: styleControl(ComponentStyle),
 };
 
 let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
@@ -72,6 +73,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
     ),
     style: props.style,
     labelStyle: props.labelStyle,
+    field:props.field,
     ...validateState,
   });
 })
@@ -102,6 +104,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
           <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
+            <Section name={sectionNames.field}>{children.field.getPropertyView()}</Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -21,6 +21,7 @@ type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"
   children: ReactNode;
   style?: Record<string, string>;
   labelStyle?: Record<string, string>;
+  field?: Record<string, string>;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -41,7 +42,15 @@ function getStyle(style: any) {
   `;
 }
 
-const LabelViewWrapper = styled.div<{ $style: any }>`
+const LabelViewWrapper = styled.div<{ $style: any, field: any }>`
+${(props) => {
+    return (
+      props.field && {
+        ...props.field,
+        borderRadius: props.field.radius,
+      }
+    );
+  }}
   ${(props) => props.$style && getStyle(props.$style)}
   display: flex;
   flex-direction: column;
@@ -159,7 +168,7 @@ export const LabelControl = (function () {
   };
 
   return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => (
-    <LabelViewWrapper $style={args.style}>
+    <LabelViewWrapper $style={args.style} field={args.field}>
       <MainWrapper
         $position={props.position}
         $hasLabel={!!props.text}
