Fixes and introduction of text-decoration and text transform property with css control

Author: imtananikhwa

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

@@ -24,6 +24,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         font-weight: ${buttonStyle.textWeight};
         font-family: ${buttonStyle.fontFamily};
         font-style: ${buttonStyle.fontStyle};
+        text-transform:${buttonStyle.textTransform};
+        text-decoration:${buttonStyle.textDecoration};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};	

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

@@ -25,30 +25,41 @@ import {
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
+  
   .ant-btn-group {
     width: 100%;
+   
   }
 `;
 
 const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
   width: calc(100%);
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
+  .ant-btn span {
+    ${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`}
+    ${(props) => `font-family: ${props.$buttonStyle.fontFamily};`}
+  }
+  
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
     margin: 0 !important;
     height: 100%;
     &.ant-btn-default {
       margin: 0 !important;
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
+      ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
+      ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
     }
     ${(props) => `background-color: ${props.$buttonStyle.background};`}
     ${(props) => `color: ${props.$buttonStyle.text};`}
     ${(props) => `padding: ${props.$buttonStyle.padding};`}
     ${(props) => `font-size: ${props.$buttonStyle.textSize};`}
     ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
+
     width: 100%;
   }
+  
 `;
 
 const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`

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

@@ -34,6 +34,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
     font-weight:${props.$style.textWeight};
     border: ${props.$style.borderWidth} solid ${props.$style.border};
     border-radius:${props.$style.radius ? props.$style.radius:'0px'};
+    text-transform:${props.$style.textTransform ? props.$style.textTransform:''};
+    text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;
     background-color: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;

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

@@ -30,6 +30,8 @@ const StyledDivider = styled(Divider) <IProps>`
     font-size: ${(props) => props.$style.textSize};
     font-weight: ${(props) => props.$style.textWeight};
     font-family: ${(props) => props.$style.fontFamily};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
     font-style:${(props) => props.$style.fontStyle}
   }
   min-width: 0;	

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

@@ -52,6 +52,8 @@ const Item = styled.div<{
   $textSize: string;
   $margin: string;
   $padding: string;
+  $textTransform:string;
+  $textDecoration:string;
 }>`
   height: 30px;
   line-height: 30px;
@@ -61,6 +63,8 @@ const Item = styled.div<{
   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')};
+  text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')};
+  text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')};
   margin:${(props) => props.$margin ? props.$margin : '0px'};
   
   &:hover {
@@ -161,6 +165,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $textWeight={props.style.textWeight}
             $textSize={props.style.textSize}
             $padding={props.style.padding}
+            $textTransform={props.style.textTransform}
+            $textDecoration={props.style.textDecoration}
             $margin={props.style.margin}
             onClick={() => onEvent("click")}
           >

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

@@ -86,6 +86,8 @@ export const getStyle = (style: CheckboxStyleType) => {
       font-size:${style.textSize};
       font-weight:${style.textWeight};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
     }
     .ant-checkbox-wrapper {
       padding: ${style.padding};

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

@@ -25,6 +25,8 @@ const getStyle = (style: RadioStyleType) => {
         font-size:${style.textSize};
         font-weight:${style.textWeight};
         font-style:${style.fontStyle};
+        text-transform:${style.textTransform};
+        text-decoration:${style.textDecoration};
       }
 
       .ant-radio-checked {
@@ -47,6 +49,12 @@ const getStyle = (style: RadioStyleType) => {
         }
       }
 
+      &:hover .ant-radio-inner, 
+      .ant-radio:hover .ant-radio-inner,
+      .ant-radio-input + ant-radio-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+      }
+
       &:hover .ant-radio-inner,
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input:focus + .ant-radio-inner {

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

@@ -30,6 +30,8 @@ const getStyle = (style: TextStyleType) => {
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
     font-style:${style.fontStyle} !important;
+    text-transform:${style.textTransform} !important;
+    text-decoration:${style.textDecoration} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
@@ -146,7 +148,6 @@ let TextTmpComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-
           <Section name={sectionNames.basic}>
             {children.type.propertyView({
               label: trans("value"),

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

@@ -62,6 +62,8 @@ const Wrapper = styled.div<{
   .rc-textarea {
     background-color:${(props) => props.$style.background};
     padding:${(props) => props.$style.padding};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
     margin: 0px 3px 0px 3px !important;
   }
 

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

@@ -230,6 +230,8 @@ export function getStyle(style: InputLikeStyleType) {
       font-weight: ${style.textWeight};
       font-family: ${style.fontFamily};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
       background-color: ${style.background};
       border-color: ${style.border};