From 2a6af35e6a2a6f3733e7ca2b06dcba54d792d94c Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 11 Jan 2024 15:21:36 +0000
Subject: [PATCH 1/2] UX feedback. Added styling and button positioning

---
 .../settings/controls/FormStepControls.svelte |  2 +-
 packages/client/manifest.json                 | 43 +++++++++++++---
 .../app/blocks/MultiStepFormblock.svelte      | 49 ++++++++++++++-----
 3 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FormStepControls.svelte b/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
index 638d80945d..3e3f1bdcd4 100644
--- a/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
@@ -23,7 +23,7 @@
         stepAction("addStep")
       }}
     >
-      Add Step
+      Add step
     </ActionButton>
   </div>
 {:else}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1c62b90a64..676d161864 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6093,15 +6093,44 @@
             "key": "steps",
             "nested": true,
             "labelHidden": true,
-            "resetOn": [
-              "dataSource",
-              "actionType"
-            ],
-            "defaultValue": [
-              {}
-            ]
+            "resetOn": ["dataSource", "actionType"],
+            "defaultValue": [{}]
           }
         ]
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ],
+        "defaultValue": "spectrum--medium"
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Button position",
+        "key": "buttonPosition",
+        "options": [
+          {
+            "label": "Bottom",
+            "value": "bottom"
+          },
+          {
+            "label": "Top",
+            "value": "top"
+          }
+        ],
+        "defaultValue": "bottom"
       }
     ],
     "actions": [
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index b90d0d4c7b..f7d2b5194b 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -11,6 +11,8 @@
   export let noRowsMessage
   export let steps
   export let dataSource
+  export let buttonPosition = "bottom"
+  export let size
 
   const { fetchDatasourceSchema } = getContext("sdk")
   const component = getContext("component")
@@ -127,6 +129,7 @@
     type="form"
     context="form"
     props={{
+      size,
       dataSource,
       actionType: actionType === "Create" ? "Create" : "Update",
       readonly: actionType === "View",
@@ -154,8 +157,33 @@
             size: "shrink",
           }}
         >
-          <BlockComponent type="container" order={0}>
-            <BlockComponent type="heading" props={{ text: step.title }} />
+          <BlockComponent
+            type="container"
+            props={{
+              direction: "column",
+              gap: "S",
+            }}
+            order={0}
+          >
+            <BlockComponent
+              type="container"
+              props={{
+                direction: "row",
+                hAlign: "stretch",
+                vAlign: "center",
+                gap: "M",
+                wrap: true,
+              }}
+              order={0}
+            >
+              <BlockComponent type="heading" props={{ text: step.title }} />
+              {#if buttonPosition == "top"}
+                <BlockComponent
+                  type="buttongroup"
+                  props={{ buttons: step.buttons }}
+                />
+              {/if}
+            </BlockComponent>
           </BlockComponent>
           <BlockComponent type="text" props={{ text: step.desc }} order={1} />
           <BlockComponent type="container" order={2}>
@@ -176,16 +204,13 @@
               {/each}
             </div>
           </BlockComponent>
-          <BlockComponent
-            type="buttongroup"
-            props={{ buttons: step.buttons }}
-            styles={{
-              normal: {
-                "margin-top": "16px",
-              },
-            }}
-            order={3}
-          />
+          {#if buttonPosition === "bottom"}
+            <BlockComponent
+              type="buttongroup"
+              props={{ buttons: step.buttons }}
+              order={3}
+            />
+          {/if}
         </BlockComponent>
       </BlockComponent>
     {/each}

From 39438c997a17000a007df80abc318cad09654006 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 15 Jan 2024 10:37:34 +0000
Subject: [PATCH 2/2] PR update

---
 .../client/src/components/app/blocks/MultiStepFormblock.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index f7d2b5194b..50f2823b97 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -177,7 +177,7 @@
               order={0}
             >
               <BlockComponent type="heading" props={{ text: step.title }} />
-              {#if buttonPosition == "top"}
+              {#if buttonPosition === "top"}
                 <BlockComponent
                   type="buttongroup"
                   props={{ buttons: step.buttons }}