@budibase/bbui 2.33.13 → 3.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.33.13",
+  "version": "3.0.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -35,8 +35,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.33.13",
-    "@budibase/string-templates": "2.33.13",
+    "@budibase/shared-core": "3.0.0",
+    "@budibase/string-templates": "3.0.0",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -104,5 +104,5 @@
       }
     }
   },
-  "gitHead": "ed7f4dc5c5d683fa08ba76c60d8304666e09bbfd"
+  "gitHead": "1272ac91c894cc5036dd188e969c77f33ed41ced"
 }

package/src/ActionButton/ActionButton.svelte

@@ -1,15 +1,11 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
   import Tooltip from "../Tooltip/Tooltip.svelte"
   import { fade } from "svelte/transition"
-
-  const dispatch = createEventDispatcher()
+  import { hexToRGBA } from "../helpers"
 
   export let quiet = false
-  export let emphasized = false
   export let selected = false
-  export let longPressable = false
   export let disabled = false
   export let icon = ""
   export let size = "M"
@@ -17,82 +13,64 @@
   export let fullWidth = false
   export let noPadding = false
   export let tooltip = ""
+  export let accentColor = null
 
   let showTooltip = false
 
-  function longPress(element) {
-    if (!longPressable) return
-    let timer
-
-    const listener = () => {
-      timer = setTimeout(() => {
-        dispatch("longpress")
-      }, 700)
-    }
-
-    element.addEventListener("pointerdown", listener)
+  $: accentStyle = getAccentStyle(accentColor)
 
-    return {
-      destroy() {
-        clearTimeout(timer)
-        element.removeEventListener("pointerdown", longPress)
-      },
+  const getAccentStyle = color => {
+    if (!color) {
+      return ""
     }
+    let style = ""
+    style += `--accent-bg-color:${hexToRGBA(color, 0.15)};`
+    style += `--accent-border-color:${hexToRGBA(color, 0.35)};`
+    return style
   }
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<span
-  class="btn-wrap"
+<button
+  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
+  class:spectrum-ActionButton--quiet={quiet}
+  class:is-selected={selected}
+  class:noPadding
+  class:fullWidth
+  class:active
+  class:disabled
+  class:accent={accentColor != null}
+  on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
   on:focus={() => (showTooltip = true)}
+  {disabled}
+  style={accentStyle}
 >
-  <button
-    use:longPress
-    class:spectrum-ActionButton--quiet={quiet}
-    class:spectrum-ActionButton--emphasized={emphasized}
-    class:is-selected={selected}
-    class:noPadding
-    class:fullWidth
-    class="spectrum-ActionButton spectrum-ActionButton--size{size}"
-    class:active
-    class:disabled
-    {disabled}
-    on:longPress
-    on:click|preventDefault
-  >
-    {#if longPressable}
-      <svg
-        class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
-      </svg>
-    {/if}
-    {#if icon}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeS"
-        focusable="false"
-        aria-hidden="true"
-        aria-label={icon}
-      >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
-    {#if $$slots}
-      <span class="spectrum-ActionButton-label"><slot /></span>
-    {/if}
-    {#if tooltip && showTooltip}
-      <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-        <Tooltip textWrapping direction="bottom" text={tooltip} />
-      </div>
-    {/if}
-  </button>
-</span>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots}
+    <span class="spectrum-ActionButton-label"><slot /></span>
+  {/if}
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction="bottom" text={tooltip} />
+    </div>
+  {/if}
+</button>
 
 <style>
+  button {
+    transition: filter 130ms ease-out, background 130ms ease-out,
+      border 130ms ease-out, color 130ms ease-out;
+  }
   .fullWidth {
     width: 100%;
   }
@@ -104,9 +82,7 @@
     margin-left: 0;
     transition: color ease-out 130ms;
   }
-  .is-selected:not(.spectrum-ActionButton--emphasized):not(
-      .spectrum-ActionButton--quiet
-    ) {
+  .is-selected:not(.spectrum-ActionButton--quiet) {
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-gray-500);
   }
@@ -115,12 +91,13 @@
   }
   .spectrum-ActionButton--quiet.is-selected {
     color: var(--spectrum-global-color-gray-900);
+    background: var(--spectrum-global-color-gray-300);
   }
   .noPadding {
     padding: 0;
     min-width: 0;
   }
-  .is-selected:not(.emphasized) .spectrum-Icon {
+  .is-selected .spectrum-Icon {
     color: var(--spectrum-global-color-gray-900);
   }
   .is-selected.disabled .spectrum-Icon {
@@ -137,4 +114,12 @@
     text-align: center;
     z-index: 1;
   }
+  .accent.is-selected,
+  .accent:active {
+    border: 1px solid var(--accent-border-color);
+    background: var(--accent-bg-color);
+  }
+  .accent:hover {
+    filter: brightness(1.2);
+  }
 </style>

package/src/ActionMenu/ActionMenu.svelte

@@ -1,14 +1,20 @@
 <script>
-  import { setContext } from "svelte"
+  import { setContext, getContext } from "svelte"
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
 
   export let disabled = false
   export let align = "left"
   export let portalTarget
+  export let openOnHover = false
+  export let animate
+  export let offset
+
+  const actionMenuContext = getContext("actionMenu")
 
   let anchor
   let dropdown
+  let timeout
 
   // This is needed because display: contents is considered "invisible".
   // It should only ever be an action button, so should be fine.
@@ -16,11 +22,19 @@
     anchor = node.firstChild
   }
 
+  export const show = () => {
+    cancelHide()
+    dropdown.show()
+  }
+
   export const hide = () => {
     dropdown.hide()
   }
-  export const show = () => {
-    dropdown.show()
+
+  // Hides this menu and all parent menus
+  const hideAll = () => {
+    hide()
+    actionMenuContext?.hide()
   }
 
   const openMenu = event => {
@@ -30,12 +44,25 @@
     }
   }
 
-  setContext("actionMenu", { show, hide })
+  const queueHide = () => {
+    timeout = setTimeout(hide, 10)
+  }
+
+  const cancelHide = () => {
+    clearTimeout(timeout)
+  }
+
+  setContext("actionMenu", { show, hide, hideAll })
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div use:getAnchor on:click={openMenu}>
+<div
+  use:getAnchor
+  on:click={openOnHover ? null : openMenu}
+  on:mouseenter={openOnHover ? show : null}
+  on:mouseleave={openOnHover ? queueHide : null}
+>
   <slot name="control" />
 </div>
 <Popover
@@ -43,9 +70,13 @@
   {anchor}
   {align}
   {portalTarget}
+  {animate}
+  {offset}
   resizable={false}
   on:open
   on:close
+  on:mouseenter={openOnHover ? cancelHide : null}
+  on:mouseleave={openOnHover ? queueHide : null}
 >
   <Menu>
     <slot />

package/src/Actions/position_dropdown.js

@@ -151,9 +151,9 @@ export default function positionDropdown(element, opts) {
       // Determine X strategy
       if (align === "right") {
         applyXStrategy(Strategies.EndToEnd)
-      } else if (align === "right-outside") {
+      } else if (align === "right-outside" || align === "right-context-menu") {
         applyXStrategy(Strategies.StartToEnd)
-      } else if (align === "left-outside") {
+      } else if (align === "left-outside" || align === "left-context-menu") {
         applyXStrategy(Strategies.EndToStart)
       } else if (align === "center") {
         applyXStrategy(Strategies.MidPoint)
@@ -164,6 +164,12 @@ export default function positionDropdown(element, opts) {
       // Determine Y strategy
       if (align === "right-outside" || align === "left-outside") {
         applyYStrategy(Strategies.MidPoint)
+      } else if (
+        align === "right-context-menu" ||
+        align === "left-context-menu"
+      ) {
+        applyYStrategy(Strategies.StartToStart)
+        styles.top -= 5 // Manual adjustment for action menu padding
       } else {
         applyYStrategy(Strategies.StartToEnd)
       }
@@ -240,7 +246,7 @@ export default function positionDropdown(element, opts) {
   }
 
   // Apply initial styles which don't need to change
-  element.style.position = "absolute"
+  element.style.position = "fixed"
   element.style.zIndex = "9999"
 
   // Set up a scroll listener

package/src/Button/Button.svelte

@@ -17,6 +17,8 @@
   export let tooltip = undefined
   export let newStyles = true
   export let id
+  export let ref
+  export let reverse = false
 
   const dispatch = createEventDispatcher()
 </script>
@@ -25,6 +27,7 @@
   <button
     {id}
     {type}
+    bind:this={ref}
     class:spectrum-Button--cta={cta}
     class:spectrum-Button--primary={primary}
     class:spectrum-Button--secondary={secondary}
@@ -41,6 +44,9 @@
       }
     }}
   >
+    {#if $$slots && reverse}
+      <span class="spectrum-Button-label"><slot /></span>
+    {/if}
     {#if icon}
       <svg
         class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
@@ -51,7 +57,7 @@
         <use xlink:href="#spectrum-icon-18-{icon}" />
       </svg>
     {/if}
-    {#if $$slots}
+    {#if $$slots && !reverse}
       <span class="spectrum-Button-label"><slot /></span>
     {/if}
   </button>
@@ -91,4 +97,11 @@
   .spectrum-Button--secondary.new-styles.is-disabled {
     color: var(--spectrum-global-color-gray-500);
   }
+  .spectrum-Button .spectrum-Button-label + .spectrum-Icon {
+    margin-left: var(--spectrum-button-primary-icon-gap);
+    margin-right: calc(
+      -1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) -
+            var(--spectrum-button-primary-padding-left-adjusted))
+    );
+  }
 </style>

package/src/ButtonGroup/CollapsedButtonGroup.svelte

@@ -0,0 +1,57 @@
+<script>
+  import Button from "../Button/Button.svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import Menu from "../Menu/Menu.svelte"
+  import MenuItem from "../Menu/Item.svelte"
+
+  export let buttons
+  export let text = "Action"
+  export let size = "M"
+  export let align = "left"
+  export let offset
+  export let animate
+  export let quiet = false
+
+  let anchor
+  let popover
+
+  const handleClick = async button => {
+    popover.hide()
+    await button.onClick?.()
+  }
+</script>
+
+<Button
+  bind:ref={anchor}
+  {size}
+  icon="ChevronDown"
+  {quiet}
+  primary={quiet}
+  cta={!quiet}
+  newStyles={!quiet}
+  on:click={() => popover?.show()}
+  on:click
+  reverse
+>
+  {text || "Action"}
+</Button>
+<Popover
+  bind:this={popover}
+  {align}
+  {anchor}
+  {offset}
+  {animate}
+  resizable={false}
+  on:close
+  on:open
+  on:mouseenter
+  on:mouseleave
+>
+  <Menu>
+    {#each buttons as button}
+      <MenuItem on:click={() => handleClick(button)} disabled={button.disabled}>
+        {button.text || "Button"}
+      </MenuItem>
+    {/each}
+  </Menu>
+</Popover>

package/src/Form/Core/Switch.svelte

@@ -19,6 +19,7 @@
     {disabled}
     on:change={onChange}
     on:click
+    on:click|stopPropagation
     {id}
     type="checkbox"
     class="spectrum-Switch-input"

package/src/Form/Core/TextField.svelte

@@ -1,6 +1,6 @@
 <script>
   import "@spectrum-css/textfield/dist/index-vars.css"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher, onMount, tick } from "svelte"
 
   export let value = null
   export let placeholder = null
@@ -68,10 +68,13 @@
     return type === "number" ? "decimal" : "text"
   }
 
-  onMount(() => {
+  onMount(async () => {
     if (disabled) return
     focus = autofocus
-    if (focus) field.focus()
+    if (focus) {
+      await tick()
+      field.focus()
+    }
   })
 </script>
 

package/src/Icon/Icon.svelte

@@ -60,10 +60,11 @@
   .newStyles {
     color: var(--spectrum-global-color-gray-700);
   }
-
+  svg {
+    transition: color var(--spectrum-global-animation-duration-100, 130ms);
+  }
   svg.hoverable {
     pointer-events: all;
-    transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
     color: var(--hover-color) !important;

package/src/InlineAlert/InlineAlert.svelte

@@ -8,6 +8,7 @@
   export let onConfirm = undefined
   export let buttonText = ""
   export let cta = false
+
   $: icon = selectIcon(type)
   // if newlines used, convert them to different elements
   $: split = message.split("\n")

package/src/List/ListItem.svelte

@@ -1,55 +1,68 @@
 <script>
-  import Body from "../Typography/Body.svelte"
-  import IconAvatar from "../Icon/IconAvatar.svelte"
-  import Label from "../Label/Label.svelte"
-  import Avatar from "../Avatar/Avatar.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import StatusLight from "../StatusLight/StatusLight.svelte"
 
   export let icon = null
-  export let iconBackground = null
   export let iconColor = null
-  export let avatar = false
   export let title = null
   export let subtitle = null
+  export let url = null
   export let hoverable = false
-
-  $: initials = avatar ? title?.[0] : null
+  export let showArrow = false
+  export let selected = false
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="list-item" class:hoverable on:click>
-  <div class="left">
-    {#if icon}
-      <IconAvatar {icon} color={iconColor} background={iconBackground} />
-    {/if}
-    {#if avatar}
-      <Avatar {initials} />
+<a
+  href={url}
+  class="list-item"
+  class:hoverable={hoverable || url != null}
+  class:large={!!subtitle}
+  on:click
+  class:selected
+>
+  <div class="list-item__left">
+    {#if icon === "StatusLight"}
+      <StatusLight square size="L" color={iconColor} />
+    {:else if icon}
+      <div class="list-item__icon">
+        <Icon name={icon} color={iconColor} size={subtitle ? "XL" : "M"} />
+      </div>
     {/if}
-    {#if title}
-      <Body>{title}</Body>
-    {/if}
-    {#if subtitle}
-      <Label>{subtitle}</Label>
+    <div class="list-item__text">
+      {#if title}
+        <div class="list-item__title">
+          {title}
+        </div>
+      {/if}
+      {#if subtitle}
+        <div class="list-item__subtitle">
+          {subtitle}
+        </div>
+      {/if}
+    </div>
+  </div>
+  <div class="list-item__right">
+    <slot name="right" />
+    {#if showArrow}
+      <Icon name="ChevronRight" />
     {/if}
   </div>
-  {#if $$slots.default}
-    <div class="right">
-      <slot />
-    </div>
-  {/if}
-</div>
+</a>
 
 <style>
   .list-item {
-    padding: 0 16px;
-    height: 56px;
-    background: var(--spectrum-global-color-gray-50);
+    padding: var(--spacing-m) var(--spacing-l);
+    background: var(--spectrum-global-color-gray-75);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
-    transition: background 130ms ease-out;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
     gap: var(--spacing-m);
+    color: var(--spectrum-global-color-gray-800);
+    cursor: pointer;
+    position: relative;
+    box-sizing: border-box;
   }
   .list-item:not(:first-child) {
     border-top: none;
@@ -64,32 +77,87 @@
   }
   .hoverable:hover {
     cursor: pointer;
-    background: var(--spectrum-global-color-gray-75);
   }
-  .left,
-  .right {
+  .hoverable:not(.selected):hover {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .selected {
+    background: var(--spectrum-global-color-blue-100);
+  }
+
+  /* Selection is only meant for standalone list items (non stacked) so we just set a fixed border radius */
+  .list-item.selected {
+    background-color: var(--spectrum-global-color-blue-100);
+    border-color: var(--spectrum-global-color-blue-100);
+  }
+  .list-item.selected:after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--spectrum-global-color-blue-400);
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    border-radius: 4px;
+    box-sizing: border-box;
+    z-index: 1;
+    opacity: 0.5;
+  }
+
+  /* Large icons */
+  .list-item.large .list-item__icon {
+    background-color: var(--spectrum-global-color-gray-200);
+    padding: 4px;
+    border-radius: 4px;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    transition: background-color 130ms ease-out, border-color 130ms ease-out,
+      color 130ms ease-out;
+  }
+  .list-item.large.hoverable:not(.selected):hover .list-item__icon {
+    background-color: var(--spectrum-global-color-gray-300);
+  }
+  .list-item.large.selected .list-item__icon {
+    background-color: var(--spectrum-global-color-blue-400);
+    color: white;
+    border-color: var(--spectrum-global-color-blue-100);
+  }
+
+  /* Internal layout */
+  .list-item__left,
+  .list-item__right {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-m);
+  }
+  .list-item.large .list-item__left,
+  .list-item.large .list-item__right {
+    gap: var(--spacing-m);
   }
-  .left {
+  .list-item__left {
     width: 0;
     flex: 1 1 auto;
   }
-  .right {
-    flex: 0 0 auto;
-  }
-  .list-item :global(.spectrum-Icon),
-  .list-item :global(.spectrum-Avatar) {
+  .list-item__right {
     flex: 0 0 auto;
+    color: var(--spectrum-global-color-gray-600);
   }
-  .list-item :global(.spectrum-Body) {
-    color: var(--spectrum-global-color-gray-900);
+
+  /* Text */
+  .list-item__text {
+    flex: 1 1 auto;
+    width: 0;
   }
-  .list-item :global(.spectrum-Body) {
+  .list-item__title,
+  .list-item__subtitle {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .list-item__subtitle {
+    color: var(--spectrum-global-color-gray-700);
+    font-size: 12px;
+  }
 </style>