Add/line-height

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 {

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

@@ -108,6 +108,7 @@ const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $vali
   border-radius:${(props) => props.$labelStyle.radius};
   padding:${(props) => props.$labelStyle.padding};
   margin:${(props) => props.$labelStyle.margin};
+  line-height:${(props) => props.$labelStyle.lineHeight}; 
   width: fit-content;
   user-select: text;
   white-space: nowrap;

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

@@ -29,6 +29,7 @@ import {
   RefreshLineIcon,
   ShadowIcon,
   OpacityIcon,
+  LineHeightIcon
 } from 'lowcoder-design';
 import { useContext } from "react";
 import styled from "styled-components";
@@ -74,6 +75,7 @@ import {
   AnimationConfig,
   AnimationDelayConfig,
   AnimationDurationConfig,
+  LineHeightConfig,
 
 
 } from "./styleControlConstants";
@@ -89,6 +91,12 @@ import { inputFieldComps } from "@lowcoder-ee/constants/compConstants";
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
   return config.hasOwnProperty("color");
 }
+function isLineHeightConfig(config: SingleColorConfig): config is LineHeightConfig {
+  return config.hasOwnProperty("lineHeight");
+}
+function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
+  return config.hasOwnProperty("textSize");
+}
 
 function isDepColorConfig(config: SingleColorConfig): config is DepColorConfig {
   return config.hasOwnProperty("depName") || config.hasOwnProperty("depTheme");
@@ -157,9 +165,6 @@ function isFooterBackgroundImageOriginConfig(config: SingleColorConfig): config
   return config.hasOwnProperty("footerBackgroundImageOrigin");
 }
 
-function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
-  return config.hasOwnProperty("textSize");
-}
 
 function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig {
   return config.hasOwnProperty("textWeight");
@@ -237,7 +242,12 @@ export type StyleConfigType<T extends readonly SingleColorConfig[]> = { [K in Na
 function isEmptyColor(color: string) {
   return _.isEmpty(color);
 }
-
+function isEmptyLineHeight(lineHeight: string) {
+  return _.isEmpty(lineHeight);
+}
+function isEmptyTextSize(textSize: string) {
+  return _.isEmpty(textSize);
+}
 function isEmptyRadius(radius: string) {
   return _.isEmpty(radius);
 }
@@ -293,9 +303,7 @@ function isEmptyFooterBackgroundImageOriginConfig(footerBackgroundImageOrigin: s
   return _.isEmpty(footerBackgroundImageOrigin);
 }
 
-function isEmptyTextSize(textSize: string) {
-  return _.isEmpty(textSize);
-}
+
 function isEmptyTextWeight(textWeight: string) {
   return _.isEmpty(textWeight);
 }
@@ -375,6 +383,14 @@ function calcColors<ColorMap extends Record<string, string>>(
   let res: Record<string, string> = {};
   colorConfigs.forEach((config) => {
     const name = config.name;
+    if (!isEmptyLineHeight(props[name]) && isLineHeightConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
     if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {
       res[name] = props[name];
       return;
@@ -448,10 +464,7 @@ function calcColors<ColorMap extends Record<string, string>>(
       res[name] = props[name];
       return;
     }
-    if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
-      res[name] = props[name];
-      return;
-    }
+
     if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {
       res[name] = props[name];
       return;
@@ -633,6 +646,10 @@ function calcColors<ColorMap extends Record<string, string>>(
     if (isAnimationDurationConfig(config)) {
       res[name] = themeWithDefault[config.animationDuration] || '0s';
     }
+    if (isLineHeightConfig(config)) {
+
+      res[name] = themeWithDefault[config.lineHeight] || '20px';
+    }
   });
   // The second pass calculates dep
   colorConfigs.forEach((config) => {
@@ -743,6 +760,11 @@ const StyleContent = styled.div`
     border-radius: 0 0 6px 6px;
   }
 `;
+const LineHeightPropIcon = styled(LineHeightIcon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
 
 const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`;
 const PaddingIcon = styled(CompressIcon)`	margin: 0 8px 0 2px; color: #888`;
@@ -853,7 +875,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
       name === 'containerHeaderPadding' ||
       name === 'containerSiderPadding' ||
       name === 'containerFooterPadding' ||
-      name === 'containerBodyPadding'
+      name === 'containerBodyPadding' ||
+      name === 'lineHeight'
     ) {
       childrenMap[name] = StringControl;
     } else {
@@ -966,7 +989,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
                       name === 'footerBackgroundImageRepeat' ||
                       name === 'footerBackgroundImageSize' ||
                       name === 'footerBackgroundImagePosition' ||
-                      name === 'footerBackgroundImageOrigin'
+                      name === 'footerBackgroundImageOrigin' ||
+                      name === 'lineHeight'
                     ) {
                       children[name]?.dispatchChangeValueAction('');
                     } else {
@@ -1299,6 +1323,14 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
                                                                   placeholder:
                                                                     props[name],
                                                                 })
+                                                                : name === 'lineHeight'  // Added lineHeight here
+                                                                ? (
+                                                                  children[name] as InstanceType<typeof StringControl>
+                                                                ).propertyView({
+                                                                label: config.label,
+                                                                preInputNode: <LineHeightPropIcon title="Line Height" />,
+                                                                placeholder: props[name],
+                                                              })
                                                               : children[
                                                                   name
                                                                 ].propertyView({
@@ -1330,4 +1362,5 @@ export function useStyle<T extends readonly SingleColorConfig[]>(colorConfigs: T
     props[config.name as Names<T>] = "";
   });
   return calcColors(props, colorConfigs, theme?.theme, bgColor);
+
 }