added lineHeight as css property

Author: MenamAfzal

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/selectCompConstants.tsx

@@ -203,6 +203,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

@@ -376,7 +376,6 @@ function calcColors<ColorMap extends Record<string, string>>(
   if (compType && styleKey && inputFieldComps.includes(compType) && styleKey !== 'inputFieldStyle') {
     const style = theme?.components?.[compType]?.[styleKey] as Record<string, string>;
     themeWithDefault['borderWidth'] = style?.['borderWidth'] || '0px';
-    console.log("The values are ", themeWithDefault)
   }
 
   // Cover what is not there for the first pass
@@ -649,8 +648,6 @@ function calcColors<ColorMap extends Record<string, string>>(
     if (isLineHeightConfig(config)) {
 
       res[name] = themeWithDefault[config.lineHeight] || '20px';
-      console.log("The 2nd Values are", themeWithDefault);
-      console.log("The 2nd Values are", isLineHeightConfig);
     }
   });
   // The second pass calculates dep
@@ -689,7 +686,6 @@ function calcColors<ColorMap extends Record<string, string>>(
       res[name] = themeWithDefault[config.name]
     }
   });
-  console.log("The defaults are ", themeWithDefault)
   return res as ColorMap;
 }
 
@@ -1327,13 +1323,13 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
                                                                     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] as InstanceType<typeof StringControl>
+                                                                ).propertyView({
+                                                                label: config.label,
+                                                                preInputNode: <LineHeightPropIcon title="Line Height" />,
+                                                                placeholder: props[name],
+                                                              })
                                                               : children[
                                                                   name
                                                                 ].propertyView({

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

@@ -779,7 +779,7 @@ function replaceAndMergeMultipleStyles(
 
 export const ButtonStyle = [
   getBackground('primary'),
-  ...STYLING_FIELDS_SEQUENCE
+  ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='lineHeight'),
 ] as const;
 
 export const DropdownStyle = [
@@ -1197,7 +1197,7 @@ export const SwitchStyle = [
 ] as const;
 
 export const SelectStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "border", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation' && style.name !== 'lineHeight'), "border", [
     ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
   ]),
   BOXSHADOW,
@@ -1206,7 +1206,7 @@ export const SelectStyle = [
 ] as const;
 
 const multiSelectCommon = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "border", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation' && style.name !== 'lineHeight'), "border", [
     ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
   ]),
   {