Merge pull request #1268 from lowcoder-org/dev

Dev -> Main for 2.4.11 hotfix - /latest

Author: FalkWolsky

client/VERSION

@@ -1 +1 @@
-2.4.11
+2.4.12

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "type": "module",
   "private": true,
   "workspaces": [

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

@@ -136,7 +136,7 @@ const ButtonTmpComp = (function () {
   };
   return new UICompBuilder(childrenMap, (props) => {
     return(
-      <ButtonCompWrapper disabled={props.disabled}>
+      <ButtonCompWrapper $disabled={props.disabled}>
         <EditorContext.Consumer>
           {(editorState) => (
             <Button100

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

@@ -68,10 +68,12 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
   line-height:${(props) => props.$buttonStyle?.lineHeight}; 
 `;
 
-export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`
+export const ButtonCompWrapper = styled.div<{ $disabled: boolean }>`
+  display: flex;
+
   // The button component is disabled but can respond to drag & select events
   ${(props) =>
-    props.disabled &&
+    props.$disabled &&
     `
     cursor: not-allowed;
     button:disabled {

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

@@ -116,7 +116,7 @@ const DropdownTmpComp = (function () {
     );
 
     return (
-      <ButtonCompWrapper disabled={props.disabled}>
+      <ButtonCompWrapper $disabled={props.disabled}>
         {props.onlyMenu ? (
           <Dropdown
             disabled={props.disabled}

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

@@ -95,7 +95,7 @@ const LinkTmpComp = (function () {
     // chrome86 bug: button children should not contain only empty span
     const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
     return (
-      <ButtonCompWrapper disabled={props.disabled}>
+      <ButtonCompWrapper $disabled={props.disabled}>
         <Link
           $animationStyle={props.animationStyle}
           ref={props.viewRef}

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

@@ -134,7 +134,7 @@ const ScannerTmpComp = (function () {
     };
 
     return (
-      <ButtonCompWrapper disabled={props.disabled}>
+      <ButtonCompWrapper $disabled={props.disabled}>
         <Button100
           ref={props.viewRef}
           $buttonStyle={props.style}

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

@@ -72,7 +72,7 @@ const ToggleTmpComp = (function () {
 
     return (
       <ButtonCompWrapperStyled
-        disabled={props.disabled}
+        $disabled={props.disabled}
         $align={props.alignment}
         $showBorder={props.showBorder}
         $animationStyle={props.animationStyle}

client/packages/lowcoder/src/layout/gridLayout.tsx

@@ -213,15 +213,15 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
    * @return {String} Container height in pixels.
    */
   containerHeight(): string {
-    const { margin, rowHeight, fixedRowCount } = this.props as Required<GridLayoutProps>;
+    const { margin, rowHeight, fixedRowCount, isCanvas } = this.props as Required<GridLayoutProps>;
     const { extraHeight, emptyRows } = this.props;
     const positionParams = genPositionParams(this.props);
-
     const { containerPadding } = positionParams;
     const layout = this.getUILayout(undefined, true);
+
     let nbRow = bottom(layout);
-    if (!_.isNil(emptyRows) && (_.size(layout) === 0 || fixedRowCount)) {
-      nbRow = emptyRows;// === Infinity ? 0 : emptyRows;
+    if (!_.isNil(emptyRows) && (_.size(layout) === 0 || (fixedRowCount && isCanvas))) {
+      nbRow = emptyRows;
     }
     const containerHeight = Math.max(
       nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPadding[1] * 2

client/packages/lowcoder/src/util/styleUtils.tsx

@@ -5,7 +5,7 @@ const getBackgroundStyle = (style: Record<string, string | undefined>) => {
   return css`
     ${isValidColor(style.background) && `background-color: ${style.background}`};
     ${isValidGradient(style.background) && !Boolean(style.backgroundImage) && `background-image: ${style.background}`};
-    ${!isValidGradient(style.background) && Boolean(style.backgroundImage) && `background-image: ${style.backgroundImage}`};
+    ${!isValidGradient(style.background) && Boolean(style.backgroundImage) && `background-image: url(${style.backgroundImage})`};
     ${isValidGradient(style.background) && Boolean(style.backgroundImage) && `background-image: url(${style.backgroundImage}), ${style.background}`};
 
     ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`};