border amd color styling fixes

Author: MenamAfzal

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

@@ -50,6 +50,11 @@ import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
 
 import { EditorContext } from "comps/editorState";
 
+const defaultStyle = {
+  borderStyle: 'solid',
+  borderWidth: '1px',
+}
+
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
 const validationChildren = {
@@ -76,7 +81,7 @@ const commonChildren = {
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
-  inputFieldStyle:styleControl(DateTimeStyle)
+  inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle),
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 

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

@@ -257,11 +257,11 @@ const childrenMap = {
   allowNull: BoolControl,
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
-  style: styleControl(InputFieldStyle),
+  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
   labelStyle:styleControl(LabelStyle),
   prefixText : stringExposingStateControl("defaultValue"),
   prefixIcon: IconControl,
-  inputFieldStyle:styleControl(InputLikeStyle),
+  inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) ,
   // validation
   required: BoolControl,
   min: UndefinedNumberControl,

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

@@ -71,7 +71,7 @@ export const SliderChildren = {
   label: LabelControl,
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
-  style: styleControl(InputFieldStyle),
+  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
   labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
   prefixIcon: IconControl,
   suffixIcon: IconControl,

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

@@ -43,7 +43,7 @@ const RatingBasicComp = (function () {
     allowHalf: BoolControl,
     disabled: BoolCodeControl,
     onEvent: eventHandlerControl(EventOptions),
-    style: styleControl(InputFieldStyle),
+    style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
     labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
     inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData),
     ...formDataChildren,

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

@@ -25,14 +25,19 @@ import { RefControl } from "comps/controls/refControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 
 const getStyle = (style: SegmentStyleType) => {
   return css`
-    &.ant-segmented:not(.ant-segmented-disabled) {
       background-color: ${style.background};
+      border: ${style?.border};
+      border-style: ${style?.borderStyle};
+      border-width: ${style?.borderWidth};
+      border-radius: ${style?.radius};
+    &.ant-segmented:not(.ant-segmented-disabled) {
+      
 
       &,
       .ant-segmented-item-selected,
@@ -79,7 +84,7 @@ const SegmentChildrenMap = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: SelectOptionControl,
-  style: styleControl(SegmentStyle),
+  style: withDefault(styleControl(SegmentStyle),{borderWidth:'1px'}),
   viewRef: RefControl<HTMLDivElement>,
 
   ...SelectInputValidationChildren,

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

@@ -7,7 +7,7 @@ import { StepOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
 import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
-import { UICompBuilder } from "../../generators";
+import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { selectDivRefMethods, } from "./selectInputConstants";
 import { Section, sectionNames } from "lowcoder-design";
@@ -91,7 +91,7 @@ const StepsChildrenMap = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: StepOptionControl,
-  style: styleControl(StepsStyle),
+  style: withDefault( styleControl(StepsStyle), {text:'#D7D9E0'}),
   viewRef: RefControl<HTMLDivElement>
 };
 

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

@@ -31,7 +31,7 @@ import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { InputRef } from "antd/es/input";
 import { RefControl } from "comps/controls/refControl";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -49,7 +49,7 @@ const childrenMap = {
   viewRef: RefControl<InputRef>,
   showCount: BoolControl,
   allowClear: BoolControl,
-  style: styleControl(InputFieldStyle),
+  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
   labelStyle: styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,

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

@@ -57,7 +57,7 @@ let PasswordTmpComp = (function () {
     validationType: dropdownControl(TextInputValidationOptions, "Regex"),
     visibilityToggle: BoolControl.DEFAULT_TRUE,
     prefixIcon: IconControl,
-    style: styleControl(InputFieldStyle),
+    style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
     labelStyle: styleControl(LabelStyle),
     inputFieldStyle: styleControl(InputLikeStyle)
   };

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

@@ -71,7 +71,7 @@ let TextAreaTmpComp = (function () {
     viewRef: RefControl<TextAreaRef>,
     allowClear: BoolControl,
     autoHeight: withDefault(AutoHeightControl, "fixed"),
-    style: styleControl(InputFieldStyle),
+    style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
     labelStyle: styleControl(LabelStyle),
     inputFieldStyle: styleControl(InputLikeStyle)
   };

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

@@ -65,9 +65,9 @@ const childrenMap = {
   allowClear: BoolControl,
   showSearch: BoolControl.DEFAULT_TRUE,
   inputValue: stateComp<string>(""), // search value
-  style: styleControl(InputFieldStyle),
+  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
   labelStyle:styleControl(LabelStyle),
-  inputFieldStyle:styleControl(TreeSelectStyle),
+  inputFieldStyle: withDefault(styleControl(TreeSelectStyle), {borderWidth: '1px'}),
   viewRef: RefControl<BaseSelectRef>,
 };