Merge pull request #873 from MenamAfzal/fix/style-issues

Fix/style issues

Author: FalkWolsky

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/remoteComp/loaders.tsx

@@ -13,11 +13,9 @@ async function npmLoader(
 
   // Falk: removed "packageVersion = "latest" as default value fir packageVersion - to ensure no automatic version jumping.
   const localPackageVersion = remoteInfo.packageVersion || "latest";
- 
   const { packageName, packageVersion, compName } = remoteInfo;
   const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${localPackageVersion}/index.js`;
-  //  const entry = `../../../../../public/package/index.js`; 
-  // console.log("Entry", entry);
+
   try {
     const module = await import(
       /* @vite-ignore */

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

@@ -25,15 +25,13 @@ 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};
-
       &,
       .ant-segmented-item-selected,
       .ant-segmented-thumb,
@@ -79,7 +77,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>,
 };
 

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

@@ -57,6 +57,7 @@ ${(props) => {
   display: flex;
   flex-direction: column;
   height: 100%;
+  border: ${(props)=>{return props.$style.borderWidth}} ${(props)=>{return props.$style.borderStyle}} ${(props)=>{return props.$style.border}} !important;
 `;
 
 const MainWrapper = styled.div<{

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

@@ -899,7 +899,9 @@ export const LabelStyle = [
 
 export const InputFieldStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE,
+  getStaticBorder(),
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter((style) => ['border'].includes(style.name) === false),
+  // ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
 export const RatingStyle = [
@@ -1062,27 +1064,43 @@ export const RadioStyle = [
   HOVER_BACKGROUND_COLOR
 ] as const;
 
+
 export const SegmentStyle = [
   LABEL,
   ...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
+  // getStaticBorder(SECOND_SURFACE_COLOR),
+    {
+    name: "border",
+    label: trans("style.border"),
+    depName: "background",
+    transformer: backgroundToBorder,
+  },
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    borderWidth: "borderWidth",
+  }, 
+ 
+  getStaticBackground(SURFACE_COLOR), 
   {
     name: "indicatorBackground",
     label: trans("style.indicatorBackground"),
     color: SURFACE_COLOR,
   },
-  {
-    name: "background",
-    label: trans("style.background"),
-    depName: "indicatorBackground",
-    transformer: handleToSegmentBackground,
-  },
+  // {
+  //   name: "background",
+  //   label: trans("style.background"),
+  //   depName: "indicatorBackground",
+  //   transformer: toSelf,
+  // },
   {
     name: "text",
     label: trans("text"),
     depName: "indicatorBackground",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+
   VALIDATE,
 ] as const;
 
@@ -1096,8 +1114,8 @@ export const StepsStyle = [
   {
     name: "titleText",
     label: trans("title"),
-    depName: "background",
-    depType: DEP_TYPE.CONTRAST_TEXT,
+    depName: "text",
+    depType: DEP_TYPE.SELF,
     transformer: contrastText,
   },
   ...STYLING_FIELDS_SEQUENCE.filter((style) => ['background', 'textSize','textDecoration'].includes(style.name) === false),
@@ -1268,6 +1286,7 @@ export const IframeStyle = [getBackground(), getStaticBorder("#00000000"), RADIU
 
 export const DateTimeStyle = [
   ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
+  getStaticBorder(SECOND_SURFACE_COLOR),
   TEXT,
   MARGIN,
   PADDING,