Merge pull request #814 from MenaamAfzal/fix/css-issues

Fix/css issues

Author: FalkWolsky

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

@@ -8,7 +8,6 @@ import { INPUT_DEFAULT_ONCHANGE_DEBOUNCE } from "constants/perf";
 
 export const StyledInput = styled(AntdInput)`
   width: ${(props) => (props.width ? props.width : "100%")};
-  background: #fdfdfd;
   border: 1px solid ${BorderColor};
   border-radius: ${BorderRadius};
   padding-left: 12px;

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

@@ -13,11 +13,21 @@ const SearchInput = styled(Input)`
   font-size: 13px;
   user-select: none;
   overflow: hidden;
+  background-color: #fdfdfd;
+  color: #000;
 
   &:focus {
     outline: none;
     box-shadow: 0 0 0 3px #daecfc;
   }
+  &:hover {
+    background-color: #fdfdfd;
+    color: #000;
+  }
+  &:focus-within {
+    background-color: #fdfdfd;
+    color: #000;
+  }
 `;
 const SearchDiv = styled.div<{ error?: boolean }>`
   height: 32px;

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

@@ -147,5 +147,7 @@ export const sectionNames = {
   style: trans("prop.style"),
   labelStyle:trans("prop.labelStyle"),
   data: trans("prop.data"),
-  meetings : trans("prop.meetings"), // added by Falk Wolsky
+  meetings: trans("prop.meetings"), // added by Falk Wolsky
+  field: trans("prop.field"),
+  inputFieldStyle:trans("prop.inputFieldStyle")
 };

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

@@ -21,6 +21,7 @@ const SelectWrapper = styled.div<{ $border?: boolean }>`
     height: 100%;
     align-items: center;
     margin-right: 8px;
+    background-color: #fff;
 
     .ant-select-selection-item {
       display: flex;

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

@@ -27,6 +27,8 @@ export const en = {
     style: "Style",
     meetings: "Meeting Settings",
     data: "Data",
+    field: 'Field',
+    inputFieldStyle:'Input Field Style'
   },
   passwordInput: {
     label: "Password:",

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

@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
 import {
+  InputFieldStyle,
   InputLikeStyle,
   InputLikeStyleType,
   LabelStyle,
@@ -73,7 +74,7 @@ const childrenMap = {
   ...textInputChildren,
   viewRef: RefControl<InputRef>,
   allowClear: BoolControl.DEFAULT_TRUE,
-  style: styleControl(InputLikeStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
@@ -87,6 +88,7 @@ const childrenMap = {
   autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
+  inputFieldStyle: styleControl(InputLikeStyle),
 };
 
 const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -155,11 +157,11 @@ let AutoCompleteCompBase = (function () {
           <ConfigProvider
             theme={{
               token: {
-                colorBgContainer: props.style.background,
-                colorBorder: props.style.border,
-                borderRadius: parseInt(props.style.radius),
-                colorText: props.style.text,
-                colorPrimary: props.style.accent,
+                colorBgContainer: props.inputFieldStyle.background,
+                colorBorder: props.inputFieldStyle.border,
+                borderRadius: parseInt(props.inputFieldStyle.radius),
+                colorText: props.inputFieldStyle.text,
+                colorPrimary: props.inputFieldStyle.accent,
                 controlHeight: componentSize === "small" ? 30 : 38,
               },
             }}
@@ -268,7 +270,7 @@ let AutoCompleteCompBase = (function () {
                   ref={props.viewRef}
                   placeholder={placeholder}
                   allowClear={props.allowClear}
-                  $style={props.style}
+                  $style={props.inputFieldStyle}
                   prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
                   suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
                   status={getValidate(validateState)}
@@ -279,7 +281,8 @@ let AutoCompleteCompBase = (function () {
         </>
       ),
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       ...validateState,
     });
   })
@@ -341,6 +344,9 @@ let AutoCompleteCompBase = (function () {
           <Section name={sectionNames.labelStyle}>
             {children.labelStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.inputFieldStyle}>
+            {children.inputFieldStyle.getPropertyView()}
+          </Section>
         </>
       );
     })

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

@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -71,11 +71,12 @@ const commonChildren = {
   hourStep: RangeControl.closed(1, 24, 1),
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
-  style: styleControl(DateTimeStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
+  inputFieldStyle:styleControl(DateTimeStyle)
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
@@ -166,12 +167,13 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
   return props.label({
     required: props.required,
     style: props.style,
-    labelStyle:props.labelStyle,
+    labelStyle: props.labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
     children: (
       <DateUIView
         viewRef={props.viewRef}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         minDate={props.minDate}
@@ -253,6 +255,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.labelStyle}>
               {children.labelStyle.getPropertyView()}
             </Section>
+            <Section name={sectionNames.inputFieldStyle}>
+              {children.inputFieldStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
@@ -281,7 +286,7 @@ export const dateRangeControl = (function () {
     const children = (
       <DateRangeUIView
         viewRef={props.viewRef}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         start={start.isValid() ? start : null}
@@ -319,6 +324,7 @@ export const dateRangeControl = (function () {
       style: props.style,
       labelStyle:props.labelStyle,
       children: children,
+      inputFieldStyle:props.inputFieldStyle,
       ...(startResult.validateStatus !== "success"
         ? startResult
         : endResult.validateStatus !== "success"
@@ -383,6 +389,9 @@ export const dateRangeControl = (function () {
               <Section name={sectionNames.labelStyle}>
                 {children.labelStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.inputFieldStyle}>
+                {children.inputFieldStyle.getPropertyView()}
+              </Section>
             </>
           )}
 

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

@@ -73,6 +73,8 @@ export const getStyle = (style: DateTimeStyleType) => {
     &:not(.ant-picker-disabled) {
       border-color: ${style.border};
       background-color: ${style.background};
+      border-width: ${style.borderWidth};
+      border-style: ${style.borderStyle};
 
       input {
         color: ${style.text};

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, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import {
   disabledPropertyView,
   hiddenPropertyView,
@@ -257,10 +257,10 @@ const childrenMap = {
   allowNull: BoolControl,
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
-  style: styleControl(InputLikeStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
-
+  inputFieldStyle:styleControl(InputLikeStyle),
   // validation
   required: BoolControl,
   min: UndefinedNumberControl,
@@ -322,7 +322,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
       placeholder={props.placeholder}
       stringMode={true}
       precision={props.precision}
-      $style={props.style}
+      $style={props.inputFieldStyle}
       prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
       onPressEnter={() => {
         handleFinish();
@@ -381,7 +381,8 @@ let NumberInputTmpComp = (function () {
       required: props.required,
       children: <CustomInputNumber {...props} />,
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       ...validate(props),
     });
   })
@@ -436,6 +437,9 @@ let NumberInputTmpComp = (function () {
           <Section name={sectionNames.labelStyle}>
             {children.labelStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.inputFieldStyle}>
+            {children.inputFieldStyle.getPropertyView()}
+          </Section>
           </>
         )}
       </>

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

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