From 35150af784eee218455f1ce36993932b6348bb78 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Jul 2023 12:09:23 +0100
Subject: [PATCH] Update multiple usages of tooltips to use new tooltip

---
 packages/bbui/src/Button/Button.svelte        | 99 +++++++++----------
 packages/bbui/src/Popover/Popover.svelte      |  2 +-
 packages/bbui/src/Tooltip/AbsTooltip.svelte   | 56 ++++++-----
 packages/bbui/src/index.js                    |  2 +-
 .../src/components/deploy/AppActions.svelte   | 22 +++--
 .../components/portal/page/SideNavItem.svelte | 21 ----
 .../app/[application]/settings/_layout.svelte | 22 +++--
 .../_components/ActionsRenderer.svelte        | 22 +++--
 .../components/grid/layout/HeaderRow.svelte   |  4 +-
 9 files changed, 118 insertions(+), 132 deletions(-)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 91affdb6c7..9e49d84d44 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let type
   export let disabled = false
@@ -16,48 +17,53 @@
   export let tooltip = undefined
   export let newStyles = true
   export let id
+
+  const dispatch = createEventDispatcher()
 </script>
 
-<button
-  {id}
-  {type}
-  class:spectrum-Button--cta={cta}
-  class:spectrum-Button--primary={primary}
-  class:spectrum-Button--secondary={secondary}
-  class:spectrum-Button--warning={warning}
-  class:spectrum-Button--overBackground={overBackground}
-  class:spectrum-Button--quiet={quiet}
-  class:new-styles={newStyles}
-  class:active
-  class:disabled
-  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-  {disabled}
-  on:click|preventDefault
->
-  {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
-      focusable="false"
-      aria-hidden="true"
-      aria-label={icon}
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-  {/if}
-  {#if $$slots}
-    <span class="spectrum-Button-label"><slot /></span>
-  {/if}
-  {#if tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-    </div>
-  {/if}
-</button>
+<AbsTooltip text={tooltip}>
+  <button
+    {id}
+    {type}
+    class:spectrum-Button--cta={cta}
+    class:spectrum-Button--primary={primary}
+    class:spectrum-Button--secondary={secondary}
+    class:spectrum-Button--warning={warning}
+    class:spectrum-Button--overBackground={overBackground}
+    class:spectrum-Button--quiet={quiet}
+    class:new-styles={newStyles}
+    class:active
+    class:is-disabled={disabled}
+    class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+    on:click|preventDefault={() => {
+      if (!disabled) {
+        dispatch("click")
+      }
+    }}
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+        focusable="false"
+        aria-hidden="true"
+        aria-label={icon}
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    {#if $$slots}
+      <span class="spectrum-Button-label"><slot /></span>
+    {/if}
+  </button>
+</AbsTooltip>
 
 <style>
   button {
     position: relative;
   }
+  button.is-disabled {
+    cursor: default;
+  }
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -66,23 +72,6 @@
   .active {
     color: var(--spectrum-global-color-blue-600) !important;
   }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    z-index: 100;
-    width: 160px;
-    text-align: center;
-    transform: translateX(-50%);
-    left: 50%;
-    top: 100%;
-    opacity: 0;
-    transition: opacity 130ms ease-out;
-    pointer-events: none;
-  }
-  button:hover .tooltip {
-    opacity: 1;
-  }
   .spectrum-Button--primary.new-styles {
     background: var(--spectrum-global-color-gray-800);
     border-color: transparent;
@@ -96,10 +85,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
+  .spectrum-Button--secondary.new-styles:not(.is-disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
-  .spectrum-Button--secondary.new-styles.disabled {
+  .spectrum-Button--secondary.new-styles.is-disabled {
     color: var(--spectrum-global-color-gray-500);
   }
 </style>
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 20207a85da..9f951a6a7e 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -90,6 +90,6 @@
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
-    overflow: visible;
+    overflow: auto;
   }
 </style>
diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index a407c34de3..78a4d5f609 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -1,5 +1,5 @@
 <script context="module">
-  export const TooltipDirection = {
+  export const TooltipPosition = {
     Top: "top",
     Right: "right",
     Bottom: "bottom",
@@ -19,8 +19,8 @@
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
 
-  export let direction = TooltipDirection.Top
-  export let type = TooltipType.Positive
+  export let position = TooltipPosition.Top
+  export let type = TooltipType.Default
   export let text = ""
 
   let wrapper
@@ -35,16 +35,16 @@
     }
     const bounds = node.getBoundingClientRect()
 
-    if (direction === TooltipDirection.Top) {
+    if (position === TooltipPosition.Top) {
       left = bounds.left + bounds.width / 2
       top = bounds.top
-    } else if (direction === TooltipDirection.Right) {
+    } else if (position === TooltipPosition.Right) {
       left = bounds.left + bounds.width
       top = bounds.top + bounds.height / 2
-    } else if (direction === TooltipDirection.Bottom) {
+    } else if (position === TooltipPosition.Bottom) {
       left = bounds.left + bounds.width / 2
       top = bounds.top + bounds.height
-    } else if (direction === TooltipDirection.Left) {
+    } else if (position === TooltipPosition.Left) {
       left = bounds.left
       top = bounds.top + bounds.height / 2
     } else {
@@ -58,25 +58,29 @@
   }
 </script>
 
-<div
-  bind:this={wrapper}
-  class="abs-tooltip"
-  on:mouseover={show}
-  on:mouseleave={hide}
->
+{#if text}
+  <div
+    bind:this={wrapper}
+    class="abs-tooltip"
+    on:mouseover={show}
+    on:mouseleave={hide}
+  >
+    <slot />
+  </div>
+  {#if visible}
+    <Portal target=".spectrum">
+      <span
+        class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
+        style="left:{left}px;top:{top}px;"
+        transition:fade|local={{ duration: 130 }}
+      >
+        <span class="spectrum-Tooltip-label">{text}</span>
+        <span class="spectrum-Tooltip-tip" />
+      </span>
+    </Portal>
+  {/if}
+{:else}
   <slot />
-</div>
-{#if visible}
-  <Portal target=".spectrum">
-    <span
-      class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{direction} is-open"
-      style="left:{left}px;top:{top}px;"
-      transition:fade|local={{ duration: 130 }}
-    >
-      <span class="spectrum-Tooltip-label">{text}</span>
-      <span class="spectrum-Tooltip-tip" />
-    </span>
-  </Portal>
 {/if}
 
 <style>
@@ -85,7 +89,7 @@
   }
   .spectrum-Tooltip {
     position: absolute;
-    z-index: 999;
+    z-index: 9999;
     pointer-events: none;
     margin: 0;
     max-width: 280px;
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 7140120bc6..4513ab0e6c 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -38,7 +38,7 @@ export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export {
   default as AbsTooltip,
-  TooltipDirection,
+  TooltipPosition,
   TooltipType,
 } from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 3c308618c3..4b366f2412 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -10,6 +10,7 @@
     Link,
     Modal,
     StatusLight,
+    AbsTooltip,
   } from "@budibase/bbui"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
@@ -250,15 +251,20 @@
                     <Link quiet on:click={unpublishApp}>Unpublish</Link>
                   </span>
                   <span class="revert-link">
-                    <Link
-                      disabled={!$isOnlyUser}
-                      quiet
-                      secondary
-                      on:click={revertApp}
-                      tooltip="Unavailable - another user is editing this app"
+                    <AbsTooltip
+                      text={$isOnlyUser
+                        ? null
+                        : "Unavailable - another user is editing this app"}
                     >
-                      Revert
-                    </Link>
+                      <Link
+                        disabled={!$isOnlyUser}
+                        quiet
+                        secondary
+                        on:click={revertApp}
+                      >
+                        Revert
+                      </Link>
+                    </AbsTooltip>
                   </span>
                 {:else}
                   <span class="status-text unpublished">Not published</span>
diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte
index 11c1102050..8bf5248fb3 100644
--- a/packages/builder/src/components/portal/page/SideNavItem.svelte
+++ b/packages/builder/src/components/portal/page/SideNavItem.svelte
@@ -1,11 +1,8 @@
 <script>
-  import { Tooltip } from "@budibase/bbui"
-
   export let text
   export let url
   export let active = false
   export let disabled = false
-  export let tooltip = null
 </script>
 
 <div class="side-nav-item">
@@ -18,11 +15,6 @@
       {text || ""}
     </div>
   {/if}
-  {#if tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping direction="right" text={tooltip} />
-    </div>
-  {/if}
 </div>
 
 <style>
@@ -45,17 +37,4 @@
     pointer-events: none;
     color: var(--spectrum-global-color-gray-500) !important;
   }
-  .tooltip {
-    position: absolute;
-    transform: translateY(-50%);
-    left: 100%;
-    top: 50%;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 130ms ease-out;
-    z-index: 100;
-  }
-  .side-nav-item:hover .tooltip {
-    opacity: 1;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index de65333f6f..7020e8fc11 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Content, SideNav, SideNavItem } from "components/portal/page"
-  import { Page, Layout } from "@budibase/bbui"
+  import { Page, Layout, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
   import { isOnlyUser } from "builderStore"
@@ -45,16 +45,20 @@
             active={$isActive("./version")}
           />
           <div class="delete-action">
-            <SideNavItem
-              text="Delete app"
-              on:click={() => {
-                deleteModal.show()
-              }}
-              disabled={!$isOnlyUser}
-              tooltip={$isOnlyUser
+            <AbsTooltip
+              position={TooltipPosition.Right}
+              text={$isOnlyUser
                 ? null
                 : "Unavailable - another user is editing this app"}
-            />
+            >
+              <SideNavItem
+                text="Delete app"
+                disabled={!$isOnlyUser}
+                on:click={() => {
+                  deleteModal.show()
+                }}
+              />
+            </AbsTooltip>
           </div>
         </SideNav>
         <slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
index ea6809514c..93f0f518ad 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
@@ -6,6 +6,8 @@
     Heading,
     Body,
     Modal,
+    AbsTooltip,
+    TooltipPosition,
   } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import CreateRestoreModal from "./CreateRestoreModal.svelte"
@@ -46,16 +48,18 @@
     </div>
 
     {#if row.type !== "restore"}
-      <MenuItem
-        on:click={restoreDialog.show}
-        icon="Revert"
-        disabled={!$isOnlyUser}
-        tooltip={$isOnlyUser
-          ? null
-          : "Unavailable - another user is editing this app"}
+      <AbsTooltip
+        position={TooltipPosition.Left}
+        text="Unavailable - another user is editing this app"
       >
-        Restore
-      </MenuItem>
+        <MenuItem
+          on:click={restoreDialog.show}
+          icon="Revert"
+          disabled={!$isOnlyUser}
+        >
+          Restore
+        </MenuItem>
+      </AbsTooltip>
       <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
       <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
     {/if}
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index de73281bd5..f5e6365b88 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -6,7 +6,7 @@
     Icon,
     AbsTooltip,
     TooltipType,
-    TooltipDirection,
+    TooltipPosition,
   } from "@budibase/bbui"
 
   const {
@@ -37,7 +37,7 @@
   {#if $config.allowSchemaChanges}
     <AbsTooltip
       text="Click here to create your first column"
-      direction={TooltipDirection.Bottom}
+      position={TooltipPosition.Bottom}
       type={TooltipType.Info}
     >
       <div