Mention component height issue fix, checkbox component hover background color property added along with translations of hover background text

Author: imtananikhwa

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

@@ -51,13 +51,25 @@ export const getStyle = (style: CheckboxStyleType) => {
           border-radius: ${style.radius};
         }
       }
-
+      
       .ant-checkbox-inner {
         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 + ant-checkbox-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground :'#fff'};
+      }
+
+      &:hover .ant-checkbox-checked .ant-checkbox-inner, 
+      .ant-checkbox:hover .ant-checkbox-inner,
+      .ant-checkbox-input + ant-checkbox-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+      }
 
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
@@ -67,6 +79,8 @@ export const getStyle = (style: CheckboxStyleType) => {
       }
     }
 
+    
+
     .ant-checkbox-group-item {
       font-family:${style.fontFamily};
       font-size:${style.textSize};

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

@@ -58,7 +58,12 @@ import { EditorContext } from "comps/editorState";
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
-  height: 100%;
+  box-sizing:border-box;
+  .rc-textarea {
+    background-color:${(props) => props.$style.background};
+    padding:${(props) => props.$style.padding};
+    margin: 0px 3px 0px 3px !important;
+  }
 
   .ant-input-clear-icon {
     opacity: 0.45;
@@ -196,7 +201,7 @@ let MentionTmpComp = (function () {
                 height: "100%",
                 maxHeight: "100%",
                 resize: "none",
-                padding: props.style.padding,
+                // padding: props.style.padding,
                 fontStyle: props.style.fontStyle,
                 fontFamily: props.style.fontFamily,
                 borderWidth: props.style.borderWidth,

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

@@ -350,6 +350,12 @@ const TEXT_WEIGHT = {
   textWeight: "textWeight",
 } as const;
 
+const HOVER_BACKGROUND_COLOR = {
+  name: "hoverBackground",
+  label: trans("style.hoverBackground"),
+  hoverBackground: "hoverBackground"
+}
+
 const FONT_FAMILY = {
   name: "fontFamily",
   label: trans("style.fontFamily"),
@@ -476,7 +482,6 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str
 }
 
 export const ButtonStyle = [
-  // ...getBgBorderRadiusByBg("primary"),
   getBackground('primary'),
   ...STYLING_FIELDS_SEQUENCE
 ] as const;
@@ -735,23 +740,12 @@ export const SwitchStyle = [
 ] as const;
 
 export const SelectStyle = [
-  // LABEL,
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
-
-  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  // TEXT,
-  // MARGIN,
-  // PADDING,
   ...ACCENT_VALIDATE,
 ] as const;
 
 const multiSelectCommon = [
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
-  // LABEL,
-  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  // TEXT,
-  // MARGIN,
-  // PADDING,
   {
     name: "tags",
     label: trans("style.tags"),
@@ -844,7 +838,6 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  // LABEL,
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'),
   ...checkAndUncheck(),
   {
@@ -854,15 +847,10 @@ export const CheckboxStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  // RADIUS,
-  // STATIC_TEXT,
-  // VALIDATE,
-  // MARGIN,
-  // PADDING,
+  HOVER_BACKGROUND_COLOR
 ] as const;
 
 export const RadioStyle = [
-  // LABEL,
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'),
   ...checkAndUncheck(),
   {
@@ -872,10 +860,6 @@ export const RadioStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  // STATIC_TEXT,
-  // VALIDATE,
-  // MARGIN,
-  // PADDING,
 ] as const;
 
 export const SegmentStyle = [

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -324,6 +324,7 @@ export const de = {
       "tableCellText": "Zelle Text",
       "selectedRowBackground": "Ausgewählter Zeilenhintergrund",
       "hoverRowBackground": "Hover Row Hintergrund",
+      "hoverBackground":"Hover-Hintergrund",
       "alternateRowBackground": "Alternativer Reihenhintergrund",
       "tableHeaderBackground": "Kopfzeile Hintergrund",
       "tableHeaderText": "Überschrift Text",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -339,6 +339,7 @@ export const en = {
     "tableCellText": "Cell Text",
     "selectedRowBackground": "Selected Row Background",
     "hoverRowBackground": "Hover Row Background",
+    "hoverBackground":"Hover Background",
     "alternateRowBackground": "Alternate Row Background",
     "tableHeaderBackground": "Header Background",
     "tableHeaderText": "Header Text",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -330,6 +330,7 @@ style: {
     tableCellText: "单元格文本",
     selectedRowBackground: "选中行背景",
     hoverRowBackground: "悬停行背景",
+    hoverBackground:"悬停背景",
     alternateRowBackground: "交替行背景",
     tableHeaderBackground: "表头背景",
     tableHeaderText: "表头文本",