From b374e6bdc922a9d0fadec1adadb384442f18474b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 2 May 2024 11:37:58 +0100
Subject: [PATCH] Update form step control to render tooltips above rather than
 below buttons

---
 .../settings/controls/FormStepControls.svelte | 84 ++++++++++---------
 1 file changed, 44 insertions(+), 40 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FormStepControls.svelte b/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
index 3e3f1bdcd4..f429917ef7 100644
--- a/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher, getContext } from "svelte"
-  import { ActionButton } from "@budibase/bbui"
+  import { ActionButton, AbsTooltip } from "@budibase/bbui"
 
   const multiStepStore = getContext("multi-step-form-block")
   const dispatch = createEventDispatcher()
@@ -28,45 +28,49 @@
   </div>
 {:else}
   <div class="step-actions">
-    <ActionButton
-      size="S"
-      secondary
-      icon="ChevronLeft"
-      disabled={currentStep === 0}
-      on:click={() => {
-        stepAction("previousStep")
-      }}
-      tooltip={"Previous step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      disabled={currentStep === stepCount - 1}
-      icon="ChevronRight"
-      on:click={() => {
-        stepAction("nextStep")
-      }}
-      tooltip={"Next step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      icon="Close"
-      disabled={stepCount === 1}
-      on:click={() => {
-        stepAction("removeStep")
-      }}
-      tooltip={"Remove step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      icon="MultipleAdd"
-      on:click={() => {
-        stepAction("addStep")
-      }}
-      tooltip={"Add step"}
-    />
+    <AbsTooltip text="Previous step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="ChevronLeft"
+        disabled={currentStep === 0}
+        on:click={() => {
+          stepAction("previousStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Next step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        disabled={currentStep === stepCount - 1}
+        icon="ChevronRight"
+        on:click={() => {
+          stepAction("nextStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Remove step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="Close"
+        disabled={stepCount === 1}
+        on:click={() => {
+          stepAction("removeStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Add step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="MultipleAdd"
+        on:click={() => {
+          stepAction("addStep")
+        }}
+      />
+    </AbsTooltip>
   </div>
 {/if}