nav component issue fixes, component updates in progress

Author: imtananikhwa

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -33,6 +33,7 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
     font-family:${props.$style.fontFamily};
     font-weight:${props.$style.textWeight};
     border: ${props.$style.borderWidth} solid ${props.$style.border};
+    border-radius:${props.$style.radius ? props.$style.radius:'0px'};
     background-color: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;
@@ -41,7 +42,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
       color: ${props.$style.activeText} !important;
     }
   `}
-  &.ant-btn {
+
+  &.ant-btn { 
     display: inline-flex;
     align-items: center;
     > span {

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

@@ -24,18 +24,19 @@ type IProps = {
   $bgColor: string;
   $borderColor: string;
   $borderWidth: string;
+  $borderRadius: string;
 };
 
-const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth">>`
+const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius">>`
   height: 100%;
-  border-radius: 2px;
+  border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
   box-sizing: border-box;
   border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
   background-color: ${(props) => props.$bgColor};
 `;
 
 const NavInner = styled("div") <Pick<IProps, "$justify">>`
-  margin: 0 -16px;
+  // margin: 0 -16px;
   height: 100%;
   display: flex;
   justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
@@ -49,17 +50,19 @@ const Item = styled.div<{
   $fontStyle: string;
   $textWeight: string;
   $textSize: string;
+  $margin: string;
+  $padding: string;
 }>`
   height: 30px;
   line-height: 30px;
-  padding: 0 16px;
+  padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
   color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
   font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
   font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
   font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
-  font-size:${(props) => (props.$textSize ? props.$textSize : '14px')}
-
-
+  font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
+  margin:${(props) => props.$margin ? props.$margin : '0px'};
+  
   &:hover {
     color: ${(props) => props.$activeColor};
     cursor: pointer;
@@ -157,6 +160,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $fontStyle={props.style.fontStyle}
             $textWeight={props.style.textWeight}
             $textSize={props.style.textSize}
+            $padding={props.style.padding}
+            $margin={props.style.margin}
             onClick={() => onEvent("click")}
           >
             {label}
@@ -195,6 +200,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
       $borderColor={props.style.border}
       $bgColor={props.style.background}
       $borderWidth={props.style.borderWidth}
+      $borderRadius={props.style.borderRadius}
     >
       <NavInner $justify={justify}>
         {props.logoUrl && (

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

@@ -192,7 +192,17 @@ let MentionTmpComp = (function () {
                 label: value,
               }))}
               autoSize={props.autoHeight}
-              style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, fontWeight: props.style.textWeight }}
+              style={{
+                height: "100%",
+                maxHeight: "100%",
+                resize: "none",
+                padding: props.style.padding,
+                fontStyle: props.style.fontStyle,
+                fontFamily: props.style.fontFamily,
+                borderWidth: props.style.borderWidth,
+                fontWeight: props.style.textWeight,
+                fontSize: props.style.textSize
+              }}
               readOnly={props.readOnly}
             />
           </ConfigProvider>

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

@@ -476,7 +476,8 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str
 }
 
 export const ButtonStyle = [
-  ...getBgBorderRadiusByBg("primary"),
+  // ...getBgBorderRadiusByBg("primary"),
+  getBackground('primary'),
   ...STYLING_FIELDS_SEQUENCE
 ] as const;
 
@@ -1084,30 +1085,41 @@ export const ProgressStyle = [
     depTheme: "canvas",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  }]).filter((style)=> ['border','borderWidth'].includes(style.name) === false),
+  }]).filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
   TRACK,
   FILL,
   SUCCESS,
 ] as const;
 
 export const NavigationStyle = [
-  {
-    name: "text",
-    label: trans("text"),
-    depName: "background",
-    depType: DEP_TYPE.CONTRAST_TEXT,
-    transformer: contrastText,
-  },
-  ACCENT,
-  getStaticBackground("#FFFFFF00"),
-  getStaticBorder("#FFFFFF00"),
-  MARGIN,
-  PADDING,
-  FONT_FAMILY,
-  FONT_STYLE,
-  TEXT_WEIGHT,
-  TEXT_SIZE,
-  BORDER_WIDTH
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [
+    {
+      name: "text",
+      label: trans("text"),
+      depName: "background",
+      depType: DEP_TYPE.CONTRAST_TEXT,
+      transformer: contrastText,
+    },
+    ACCENT,
+    getStaticBackground("#FFFFFF00")
+  ])
+  // {
+  //   name: "text",
+  //   label: trans("text"),
+  //   depName: "background",
+  //   depType: DEP_TYPE.CONTRAST_TEXT,
+  //   transformer: contrastText,
+  // },
+  // ACCENT,
+  // getStaticBackground("#FFFFFF00"),
+  // getStaticBorder("#FFFFFF00"),
+  // MARGIN,
+  // PADDING,
+  // FONT_FAMILY,
+  // FONT_STYLE,
+  // TEXT_WEIGHT,
+  // TEXT_SIZE,
+  // BORDER_WIDTH
 ] as const;
 
 export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;