radio btn and select option setting adjusted

Author: MenamAfzal

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

@@ -14,53 +14,53 @@ import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
-const getStyle = (style: RadioStyleType) => {
+const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
     .ant-radio-wrapper:not(.ant-radio-wrapper-disabled) {
-      color: ${style.staticText};
+      color: ${inputFieldStyle?.staticText};
       // height: 22px;
       max-width: calc(100% - 8px);
-      padding: ${style.padding};
+      padding: ${inputFieldStyle?.padding};
       span:not(.ant-radio) {
         ${EllipsisTextCss};
-        font-family:${style.fontFamily};
-        font-size:${style.textSize};
-        font-weight:${style.textWeight};
-        font-style:${style.fontStyle};
-        text-transform:${style.textTransform};
-        text-decoration:${style.textDecoration};
+        font-family:${inputFieldStyle?.fontFamily};
+        font-size:${inputFieldStyle?.textSize};
+        font-weight:${inputFieldStyle?.textWeight};
+        font-style:${inputFieldStyle?.fontStyle};
+        text-transform:${inputFieldStyle?.textTransform};
+        text-decoration:${inputFieldStyle?.textDecoration};
       }
 
       .ant-radio-checked {
         .ant-radio-inner {
-          background-color: ${style.checkedBackground};
-          border-color: ${style.checkedBackground};
+          background-color: ${inputFieldStyle?.checkedBackground};
+          border-color: ${inputFieldStyle?.uncheckedBorder};
         }
 
         &::after {
-          border-color: ${style.checkedBackground};
+          border-color: ${inputFieldStyle?.uncheckedBorder};
         }
       }
 
       .ant-radio-inner {
-        background-color: ${style.uncheckedBackground};
-        border-color: ${style.uncheckedBorder};
-        border-width:${style.borderWidth};
+        background-color: ${inputFieldStyle?.uncheckedBackground};
+        border-color: ${inputFieldStyle?.uncheckedBorder};
+        border-width:${inputFieldStyle?.borderWidth};
         &::after {
-          background-color: ${style.checked};
+          background-color: ${inputFieldStyle?.checked};
         }
       }
 
       &:hover .ant-radio-inner, 
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input + ant-radio-inner {
-        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+        background-color:${inputFieldStyle?.hoverBackground ? inputFieldStyle?.hoverBackground:'#ffff'};
       }
 
       &:hover .ant-radio-inner,
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input:focus + .ant-radio-inner {
-        border-color: ${style.checkedBackground};
+        border-color: ${inputFieldStyle?.uncheckedBorder};
       }
     }
   `;
@@ -69,11 +69,12 @@ const getStyle = (style: RadioStyleType) => {
 const Radio = styled(AntdRadioGroup)<{
   $style: RadioStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
+  $inputFieldStyle:RadioStyleType
 }>`
   width: 100%;
   min-height: 32px;
 
-  ${(props) => props.$style && getStyle(props.$style)}
+  ${(props) => props.$style && getStyle(props.$style, props.$inputFieldStyle)}
   ${(props) => {
     if (props.$layout === "horizontal") {
       return css`
@@ -112,6 +113,7 @@ let RadioBasicComp = (function () {
           disabled={props.disabled}
           value={props.value.value}
           $style={props.style}
+          $inputFieldStyle={props.inputFieldStyle}
           $layout={props.layout}
           onChange={(e) => {
             handleChange(e.target.value);

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

@@ -22,6 +22,7 @@ import { RefControl } from "comps/controls/refControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { withDefault } from "@lowcoder-ee/index.sdk";
 
 export const RadioLayoutOptions = [
   { label: trans("radio.horizontal"), value: "horizontal" },
@@ -40,7 +41,7 @@ export const RadioChildrenMap = {
   labelStyle:styleControl(LabelStyle),
   layout: dropdownControl(RadioLayoutOptions, "horizontal"),
   viewRef: RefControl<HTMLDivElement>,
-  inputFieldStyle:styleControl(RadioStyle),
+  inputFieldStyle:withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };

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

@@ -389,7 +389,8 @@ const TEXT_WEIGHT = {
 const HOVER_BACKGROUND_COLOR = {
   name: "hoverBackground",
   label: trans("style.hoverBackground"),
-  hoverBackground: "hoverBackground"
+  hoverBackground: "hoverBackground",
+  color: SECOND_SURFACE_COLOR,
 }
 
 const FONT_FAMILY = {
@@ -980,7 +981,7 @@ export const MultiSelectStyle = [
 
 export const ChildrenMultiSelectStyle = [
   ...STYLING_FIELDS_SEQUENCE,
-  getStaticBackground(SURFACE_COLOR)
+  getBackground()
 ] as const;
 
 export const TabContainerStyle = [
@@ -1033,6 +1034,7 @@ function checkAndUncheck() {
       name: "uncheckedBorder",
       label: trans("style.uncheckedBorder"),
       depName: "uncheckedBackground",
+      color:SECOND_SURFACE_COLOR,
       transformer: backgroundToBorder,
     },
   ] as const;