Merge pull request #1069 from MenamAfzal/add/lineHeight

Add/line-height

Author: raheeliftikhar5

client/packages/lowcoder-design/src/icons/index.ts

@@ -216,6 +216,7 @@ export { ReactComponent as BorderRadiusIcon } from "./remix/rounded-corner.svg";
 export { ReactComponent as ShadowIcon } from "./remix/shadow-line.svg";
 export { ReactComponent as OpacityIcon } from "./remix/contrast-drop-2-line.svg";
 export { ReactComponent as AnimationIcon } from "./remix/loader-line.svg";
+export { ReactComponent as LineHeightIcon } from "./remix/line-height.svg";
 
 
 export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg";

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -62,6 +62,7 @@ export interface ThemeDetail {
   animationDuration?: string;
   opacity?: string;
   boxShadow?: string;
+  lineHeight?: string;
   boxShadowColor?: string;
   animationIterationCount?: string;
   components?: Record<string, JSONObject>;
@@ -83,6 +84,7 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
     case "padding":	return trans("style.padding");
     case "gridColumns": return trans("themeDetail.gridColumns");
     case "textSize": return trans("style.textSize");
+    case "lineHeight": return trans("themeDetail.lineHeight"); 
   }
   return "";
 }
@@ -105,6 +107,7 @@ export function isThemeColorKey(key: string) {
     case "padding":
     case "gridColumns":
     case "textSize":
+      case "lineHeight":
       return true;
   }
   return false;

client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx

@@ -25,6 +25,7 @@ import {
   TextStyleIcon,
   ImageCompIconSmall,
   RotationIcon,
+  LineHeightIcon
  } from "lowcoder-design/src/icons";
 import { trans } from "i18n";
 import { debounce } from "lodash";
@@ -375,6 +376,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
         icon = <RotationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
+      case 'lineHeight': {
+        icon = <LineHeightIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+        break;
+      }
     }
     return icon;
   }

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

@@ -65,6 +65,7 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  line-height:${(props) => props.$buttonStyle?.lineHeight}; 
 `;
 
 export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`

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

@@ -60,6 +60,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
     ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
 
     width: 100%;
+    line-height:${(props) => props.$buttonStyle.lineHeight}; 
   }
   
 `;

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

@@ -60,6 +60,7 @@ const getStyle = (style: InputLikeStyleType) => {
   return css`
     border-radius: ${style.radius};
     border-width:${style.borderWidth} !important;
+    line-height: ${style.lineHeight} !important;
     // still use antd style when disabled
     &:not(.ant-input-number-disabled) {
       color: ${style.text};

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

@@ -150,7 +150,7 @@ let CheckboxBasicComp = (function () {
     options: SelectInputOptionControl,
     style: styleControl(InputFieldStyle , 'style'),
     labelStyle: styleControl(
-      LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+      LabelStyle.filter((style) => ['accent', 'validate', 'lineheight'].includes(style.name) === false),
       'labelStyle',
     ),
     layout: dropdownControl(RadioLayoutOptions, "horizontal"),

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

@@ -204,6 +204,7 @@ const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
     font-weight: ${props => props.$style?.textWeight};
     text-transform: ${props => props.$style?.textTransform};
     color: ${props => props.$style?.text};
+    line-height: ${props => props.$style?.lineHeight};
   }
   .option-label{
     text-decoration: ${props => props.$style?.textDecoration} !important;

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

@@ -64,6 +64,7 @@ const getStyle = (style: TextStyleType) => {
       h6 {
         color: ${style.text};
         font-weight: ${style.textWeight} !important;
+        line-height:${style.lineHeight};
       }
       img,
       pre {

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

@@ -252,6 +252,7 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType)
       text-decoration:${style.textDecoration};
       background-color: ${style.background};
       border-color: ${style.border};
+      line-height: ${style.lineHeight};
 
       &:focus,
       &.ant-input-affix-wrapper-focused {