Radio component styling added

imtananikhwa · imtananikhwa · commit 8c7c87374571 · 2024-02-23T12:55:13.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -38,6 +38,7 @@ export const getStyle = (style: CheckboxStyleType) => {
         .ant-checkbox-inner {
           background-color: ${style.checkedBackground};
           border-color: ${style.checkedBackground};
+          border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
 
           &::after {
             border-color: ${style.checked};
@@ -46,6 +47,7 @@ export const getStyle = (style: CheckboxStyleType) => {
 
         &::after {
           border-color: ${style.checkedBackground};
+          border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
           border-radius: ${style.radius};
         }
       }
@@ -54,15 +56,23 @@ export const getStyle = (style: CheckboxStyleType) => {
         border-radius: ${style.radius};
         background-color: ${style.uncheckedBackground};
         border-color: ${style.uncheckedBorder};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
 
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input:focus + .ant-checkbox-inner {
         border-color: ${style.checkedBackground};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
     }
 
+    .ant-checkbox-group-item {
+      font-family:${style.fontFamily};
+      font-size:${style.textSize};
+      font-weight:${style.textWeight};
+      font-style:${style.fontStyle};
+    }
     .ant-checkbox-wrapper {
       padding: ${style.padding};
       .ant-checkbox-inner,
@@ -73,7 +83,7 @@ export const getStyle = (style: CheckboxStyleType) => {
   `;
 };
 
-const CheckboxGroup = styled(AntdCheckboxGroup)<{
+const CheckboxGroup = styled(AntdCheckboxGroup) <{
   $style: CheckboxStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
 }>`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -21,6 +21,10 @@ const getStyle = (style: RadioStyleType) => {
       padding: ${style.padding};
       span:not(.ant-radio) {
         ${EllipsisTextCss};
+        font-family:${style.fontFamily};
+        font-size:${style.textSize};
+        font-weight:${style.textWeight};
+        font-style:${style.fontStyle};
       }
 
       .ant-radio-checked {
@@ -37,7 +41,7 @@ const getStyle = (style: RadioStyleType) => {
       .ant-radio-inner {
         background-color: ${style.uncheckedBackground};
         border-color: ${style.uncheckedBorder};
-
+        border-width:${style.borderWidth};
         &::after {
           background-color: ${style.checked};
         }
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -841,7 +841,8 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  LABEL,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -850,15 +851,16 @@ export const CheckboxStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  RADIUS,
-  STATIC_TEXT,
-  VALIDATE,
-  MARGIN,
-  PADDING,
+  // RADIUS,
+  // STATIC_TEXT,
+  // VALIDATE,
+  // MARGIN,
+  // PADDING,
 ] as const;
 
 export const RadioStyle = [
-  LABEL,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -867,10 +869,10 @@ export const RadioStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  STATIC_TEXT,
-  VALIDATE,
-  MARGIN,
-  PADDING,
+  // STATIC_TEXT,
+  // VALIDATE,
+  // MARGIN,
+  // PADDING,
 ] as const;
 
 export const SegmentStyle = [
@@ -1019,7 +1021,7 @@ export const TableColumnLinkStyle = [
 export const FileStyle = [
   // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), 
   getStaticBackground(SURFACE_COLOR),
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'border',[getStaticBorder('#00000000')]),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [getStaticBorder('#00000000')]),
   // TEXT, ACCENT, MARGIN, PADDING
 ] as const;
 
