Merge pull request #12101 from Budibase/feature/form-block-description

Added description field to the Formblock

packages/client/manifest.json

@@ -5305,6 +5305,12 @@
         "key": "title",
         "nested": true
       },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "description",
+        "nested": true
+      },
       {
         "section": true,
         "dependsOn": {

packages/client/src/components/app/blocks/form/FormBlock.svelte

@@ -12,6 +12,7 @@
   export let fields
   export let labelPosition
   export let title
+  export let description
   export let showDeleteButton
   export let showSaveButton
   export let saveButtonLabel
@@ -98,6 +99,7 @@
     fields: fieldsOrDefault,
     labelPosition,
     title,
+    description,
     saveButtonLabel: saveLabel,
     deleteButtonLabel: deleteLabel,
     schema,

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -11,6 +11,7 @@
   export let fields
   export let labelPosition
   export let title
+  export let description
   export let saveButtonLabel
   export let deleteButtonLabel
   export let schema
@@ -160,55 +161,71 @@
         <BlockComponent
           type="container"
           props={{
-            direction: "row",
+            direction: "column",
-            hAlign: "stretch",
+            gap: "S",
-            vAlign: "center",
-            gap: "M",
-            wrap: true,
           }}
           order={0}
         >
           <BlockComponent
-            type="heading"
+            type="container"
-            props={{ text: title || "" }}
+            props={{
+              direction: "row",
+              hAlign: "stretch",
+              vAlign: "center",
+              gap: "M",
+              wrap: true,
+            }}
             order={0}
-          />
+          >
-          {#if renderButtons}
             <BlockComponent
-              type="container"
+              type="heading"
-              props={{
+              props={{ text: title || "" }}
-                direction: "row",
+              order={0}
-                hAlign: "stretch",
+            />
-                vAlign: "center",
+            {#if renderButtons}
-                gap: "M",
+              <BlockComponent
-                wrap: true,
+                type="container"
-              }}
+                props={{
+                  direction: "row",
+                  hAlign: "stretch",
+                  vAlign: "center",
+                  gap: "M",
+                  wrap: true,
+                }}
+                order={1}
+              >
+                {#if renderDeleteButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: deleteButtonLabel,
+                      onClick: onDelete,
+                      quiet: true,
+                      type: "secondary",
+                    }}
+                    order={0}
+                  />
+                {/if}
+                {#if renderSaveButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: saveButtonLabel,
+                      onClick: onSave,
+                      type: "cta",
+                    }}
+                    order={1}
+                  />
+                {/if}
+              </BlockComponent>
+            {/if}
+          </BlockComponent>
+          {#if description}
+            <BlockComponent
+              type="text"
+              props={{ text: description }}
               order={1}
-            >
+            />
-              {#if renderDeleteButton}
-                <BlockComponent
-                  type="button"
-                  props={{
-                    text: deleteButtonLabel,
-                    onClick: onDelete,
-                    quiet: true,
-                    type: "secondary",
-                  }}
-                  order={0}
-                />
-              {/if}
-              {#if renderSaveButton}
-                <BlockComponent
-                  type="button"
-                  props={{
-                    text: saveButtonLabel,
-                    onClick: onSave,
-                    type: "cta",
-                  }}
-                  order={1}
-                />
-              {/if}
-            </BlockComponent>
           {/if}
         </BlockComponent>
       {/if}