Merge pull request #11123 from Budibase/fix/row-height-setting

Fix grid block row height not working

packages/client/manifest.json

@@ -5274,7 +5274,7 @@
       {
         "type": "select",
         "label": "Row height",
-        "key": "initialRowHeight",
+        "key": "fixedRowHeight",
         "placeholder": "Default",
         "options": [
           {

packages/client/src/components/app/GridBlock.svelte

@@ -12,7 +12,7 @@
   export let initialFilter = null
   export let initialSortColumn = null
   export let initialSortOrder = null
-  export let initialRowHeight = null
+  export let fixedRowHeight = null
   export let columns = null
 
   const component = getContext("component")
@@ -47,7 +47,7 @@
     {initialFilter}
     {initialSortColumn}
     {initialSortOrder}
-    {initialRowHeight}
+    {fixedRowHeight}
     {columnWhitelist}
     {schemaOverrides}
     showControls={false}

packages/frontend-core/src/components/grid/controls/SizeButton.svelte

@@ -8,7 +8,8 @@
     SmallRowHeight,
   } from "../lib/constants"
 
-  const { stickyColumn, columns, rowHeight, table } = getContext("grid")
+  const { stickyColumn, columns, rowHeight, table, fixedRowHeight } =
+    getContext("grid")
 
   // Some constants for column width options
   const smallColSize = 120
@@ -86,6 +87,7 @@
       <div class="options">
         {#each rowSizeOptions as option}
           <ActionButton
+            disabled={$fixedRowHeight}
             quiet
             selected={$rowHeight === option.size}
             on:click={() => changeRowHeight(option.size)}
@@ -118,15 +120,15 @@
 <style>
   .content {
     padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
   .size {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
-  .size:first-child {
-    margin-bottom: 16px;
-  }
   .options {
     display: flex;
     align-items: center;

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -43,7 +43,7 @@
   export let initialFilter = null
   export let initialSortColumn = null
   export let initialSortOrder = null
-  export let initialRowHeight = null
+  export let fixedRowHeight = null
   export let notifySuccess = null
   export let notifyError = null
 
@@ -90,7 +90,7 @@
     initialFilter,
     initialSortColumn,
     initialSortOrder,
-    initialRowHeight,
+    fixedRowHeight,
     notifySuccess,
     notifyError,
   })

packages/frontend-core/src/components/grid/stores/config.js

@@ -10,7 +10,7 @@ export const createStores = context => {
   const initialSortColumn = getProp("initialSortColumn")
   const initialSortOrder = getProp("initialSortOrder")
   const initialFilter = getProp("initialFilter")
-  const initialRowHeight = getProp("initialRowHeight")
+  const fixedRowHeight = getProp("fixedRowHeight")
   const schemaOverrides = getProp("schemaOverrides")
   const columnWhitelist = getProp("columnWhitelist")
   const notifySuccess = getProp("notifySuccess")
@@ -22,7 +22,7 @@ export const createStores = context => {
     initialSortColumn,
     initialSortOrder,
     initialFilter,
-    initialRowHeight,
+    fixedRowHeight,
     schemaOverrides,
     columnWhitelist,
     notifySuccess,

packages/frontend-core/src/components/grid/stores/ui.js

@@ -14,7 +14,7 @@ export const createStores = context => {
   const focusedCellAPI = writable(null)
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
-  const rowHeight = writable(props.initialRowHeight || DefaultRowHeight)
+  const rowHeight = writable(props.fixedRowHeight || DefaultRowHeight)
   const previousFocusedRowId = writable(null)
   const gridFocused = writable(false)
   const isDragging = writable(false)
@@ -134,7 +134,7 @@ export const initialise = context => {
     hoveredRowId,
     table,
     rowHeight,
-    initialRowHeight,
+    fixedRowHeight,
   } = context
 
   // Ensure we clear invalid rows from state if they disappear
@@ -187,13 +187,15 @@ export const initialise = context => {
     }
   })
 
-  // Pull row height from table
+  // Pull row height from table as long as we don't have a fixed height
   table.subscribe($table => {
+    if (!get(fixedRowHeight)) {
       rowHeight.set($table?.rowHeight || DefaultRowHeight)
+    }
   })
 
   // Reset row height when initial row height prop changes
-  initialRowHeight.subscribe(height => {
+  fixedRowHeight.subscribe(height => {
     if (height) {
       rowHeight.set(height)
     } else {