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,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>
--- 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,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;
--- 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">
-                    <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>
--- 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">
-            <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 />
--- 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}
--- 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