Update multiple usages of tooltips to use new tooltip

2023-07-07 12:09:23 +01:00 · 2023-07-07 12:09:23 +01:00 · 35150af784
parent 6aef0f2134
commit 35150af784
9 changed files with 118 additions and 132 deletions
--- 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,9 +17,12 @@
  export let tooltip = undefined
  export let newStyles = true
  export let id
+
+  const dispatch = createEventDispatcher()
 </script>

-<button
+<AbsTooltip text={tooltip}>
+  <button
    {id}
    {type}
    class:spectrum-Button--cta={cta}
@ -29,11 +33,14 @@
    class:spectrum-Button--quiet={quiet}
    class:new-styles={newStyles}
    class:active
-  class:disabled
+    class:is-disabled={disabled}
    class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-  {disabled}
-  on:click|preventDefault
->
+    on:click|preventDefault={() => {
+      if (!disabled) {
+        dispatch("click")
+      }
+    }}
+  >
    {#if icon}
      <svg
        class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
@ -47,17 +54,16 @@
    {#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>
+  </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>
--- 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>
--- 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,18 +58,19 @@
  }
 </script>

-<div
+{#if text}
+  <div
    bind:this={wrapper}
    class="abs-tooltip"
    on:mouseover={show}
    on:mouseleave={hide}
->
+  >
    <slot />
-</div>
-{#if visible}
+  </div>
+  {#if visible}
    <Portal target=".spectrum">
      <span
-      class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{direction} is-open"
+        class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
        style="left:{left}px;top:{top}px;"
        transition:fade|local={{ duration: 130 }}
      >
@ -77,6 +78,9 @@
        <span class="spectrum-Tooltip-tip" />
      </span>
    </Portal>
+  {/if}
+{:else}
+  <slot />
 {/if}

 <style>
@ -85,7 +89,7 @@
  }
  .spectrum-Tooltip {
    position: absolute;
-    z-index: 999;
+    z-index: 9999;
    pointer-events: none;
    margin: 0;
    max-width: 280px;
--- 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"
--- 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">
+                    <AbsTooltip
+                      text={$isOnlyUser
+                        ? null
+                        : "Unavailable - another user is editing this app"}
+                    >
                      <Link
                        disabled={!$isOnlyUser}
                        quiet
                        secondary
                        on:click={revertApp}
-                      tooltip="Unavailable - another user is editing this app"
                      >
                        Revert
                      </Link>
+                    </AbsTooltip>
                  </span>
                {:else}
                  <span class="status-text unpublished">Not published</span>
--- 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>
--- 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">
+            <AbsTooltip
+              position={TooltipPosition.Right}
+              text={$isOnlyUser
+                ? null
+                : "Unavailable - another user is editing this app"}
+            >
              <SideNavItem
                text="Delete app"
+                disabled={!$isOnlyUser}
                on:click={() => {
                  deleteModal.show()
                }}
-              disabled={!$isOnlyUser}
-              tooltip={$isOnlyUser
-                ? null
-                : "Unavailable - another user is editing this app"}
              />
+            </AbsTooltip>
          </div>
        </SideNav>
        <slot />
--- 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"}
+      <AbsTooltip
+        position={TooltipPosition.Left}
+        text="Unavailable - another user is editing this app"
+      >
        <MenuItem
          on:click={restoreDialog.show}
          icon="Revert"
          disabled={!$isOnlyUser}
-        tooltip={$isOnlyUser
-          ? null
-          : "Unavailable - another user is editing this app"}
        >
          Restore
        </MenuItem>
+      </AbsTooltip>
      <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
      <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
    {/if}
--- 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