@budibase/bbui 1.0.105-alpha.41 → 1.0.105-alpha.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.105-alpha.41",
+  "version": "1.0.105-alpha.44",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.105-alpha.41",
+    "@budibase/string-templates": "^1.0.105-alpha.44",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -84,5 +84,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "b5a5efbf595ab6052259366291a51fd33f02094d"
+  "gitHead": "ca260b68cc32135d03a3cc994d456bf5df95e414"
 }

package/src/ActionMenu/ActionMenu.svelte

@@ -6,6 +6,7 @@
   export let disabled = false
   export let align = "left"
   export let portalTarget
+  export let dataCy
 
   let anchor
   let dropdown
@@ -36,7 +37,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget} {dataCy}>
   <Menu>
     <slot />
   </Menu>

package/src/Icon/Icon.svelte

@@ -3,6 +3,9 @@
 </script>
 
 <script>
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
   export let direction = "n"
   export let name = "Add"
   export let hidden = false
@@ -10,30 +13,52 @@
   export let hoverable = false
   export let disabled = false
   export let color
+  export let tooltip
 
   $: rotation = getRotation(direction)
 
+  let showTooltip = false
+
   const getRotation = direction => {
     return directions.indexOf(direction) * 45
   }
 </script>
 
-<svg
-  on:click
-  class:hoverable
-  class:disabled
-  class="spectrum-Icon spectrum-Icon--size{size}"
-  focusable="false"
-  aria-hidden={hidden}
-  aria-label={name}
-  style={`transform: rotate(${rotation}deg); ${
-    color ? `color: ${color};` : ""
-  }`}
+<div
+  class="icon"
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:click={() => (showTooltip = false)}
 >
-  <use xlink:href="#spectrum-icon-18-{name}" />
-</svg>
+  <svg
+    on:click
+    class:hoverable
+    class:disabled
+    class="spectrum-Icon spectrum-Icon--size{size}"
+    focusable="false"
+    aria-hidden={hidden}
+    aria-label={name}
+    style={`transform: rotate(${rotation}deg); ${
+      color ? `color: ${color};` : ""
+    }`}
+  >
+    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
+  </svg>
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction={"bottom"} text={tooltip} />
+    </div>
+  {/if}
+</div>
 
 <style>
+  .icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+  }
+
   svg.hoverable {
     pointer-events: all;
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
@@ -47,4 +72,15 @@
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
   }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: 50%;
+    top: calc(100% + 4px);
+    width: 100vw;
+    max-width: 150px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
 </style>

package/src/Modal/ModalContent.svelte

@@ -23,6 +23,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
+  export let dataCy = null
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -63,21 +64,26 @@
   role="dialog"
   tabindex="-1"
   aria-modal="true"
+  data-cy={dataCy}
 >
   <div class="spectrum-Dialog-grid">
-    {#if title}
+    {#if title || $$slots.header}
       <h1
         class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
         class:noDivider={!showDivider}
         class:header-spacing={$$slots.header}
       >
-        {title}
-        <slot name="header" />
+        {#if title}
+          {title}
+        {:else if $$slots.header}
+          <slot name="header" />
+        {/if}
       </h1>
       {#if showDivider}
         <Divider size="M" />
       {/if}
     {/if}
+
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
       <slot />

package/src/Popover/Popover.svelte

@@ -10,6 +10,17 @@
   export let anchor
   export let align = "right"
   export let portalTarget
+  export let dataCy
+
+  export let direction = "bottom"
+  export let showTip = false
+
+  let tipSvg =
+    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
+
+  $: tooltipClasses = showTip
+    ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
+    : ""
 
   export const show = () => {
     dispatch("open")
@@ -37,9 +48,14 @@
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class="spectrum-Popover is-open"
+      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
+      data-cy={dataCy}
     >
+      {#if showTip}
+        {@html tipSvg}
+      {/if}
+
       <slot />
     </div>
   </Portal>
@@ -49,4 +65,13 @@
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000) !important;
   }
+  .spectrum-Popover.is-open.spectrum-Popover--withTip {
+    margin-top: var(--spacing-xs);
+    margin-left: var(--spacing-xl);
+  }
+  :global(.spectrum-Popover--bottom .spectrum-Popover-tip),
+  :global(.spectrum-Popover--top .spectrum-Popover-tip) {
+    left: 90%;
+    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
+  }
 </style>