@budibase/bbui 3.11.2 → 3.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.11.2",
+  "version": "3.12.0",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "4c2f13e1b36fa559124df22462d83d2b4d1e7e9d"
+  "gitHead": "4d3f7719ab1ae02d3d01908b8a14a31a0c81445d"
 }

package/src/ActionButton/ActionButton.svelte

@@ -68,8 +68,11 @@
 
 <style>
   button {
-    transition: filter 130ms ease-out, background 130ms ease-out,
-      border 130ms ease-out, color 130ms ease-out;
+    transition:
+      filter 130ms ease-out,
+      background 130ms ease-out,
+      border 130ms ease-out,
+      color 130ms ease-out;
   }
   .fullWidth {
     width: 100%;

package/src/Button/Button.svelte

@@ -70,6 +70,9 @@
   button.is-disabled {
     cursor: default;
   }
+  .spectrum-Button {
+    padding-bottom: calc(var(--spectrum-button-padding-y) - 1px);
+  }
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -100,8 +103,11 @@
   .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))
+      -1 *
+        (
+          var(--spectrum-button-primary-textonly-padding-left-adjusted) -
+            var(--spectrum-button-primary-padding-left-adjusted)
+        )
     );
   }
 </style>

package/src/ButtonGroup/ButtonGroup.svelte

@@ -8,10 +8,10 @@
     gap === "L"
       ? "var(--spacing-l)"
       : gap === "M"
-      ? "var(--spacing-m)"
-      : gap === "S"
-      ? "var(--spacing-s)"
-      : null
+        ? "var(--spacing-m)"
+        : gap === "S"
+          ? "var(--spacing-s)"
+          : null
 
   function group(element) {
     const buttons = Array.from(element.getElementsByTagName("button"))

package/src/ColorPicker/ColorPicker.svelte

@@ -278,9 +278,12 @@
     place-items: center;
   }
   .fill.placeholder {
-    background-position: 0 0, 10px 10px;
+    background-position:
+      0 0,
+      10px 10px;
     background-size: 20px 20px;
-    background-image: linear-gradient(
+    background-image:
+      linear-gradient(
         45deg,
         #eee 25%,
         transparent 25%,

package/src/Drawer/Drawer.svelte

@@ -227,8 +227,12 @@
     border-radius: 8px;
     overflow: hidden;
     box-sizing: border-box;
-    transition: transform 260ms ease-out, bottom 260ms ease-out,
-      left 260ms ease-out, width 260ms ease-out, height 260ms ease-out;
+    transition:
+      transform 260ms ease-out,
+      bottom 260ms ease-out,
+      left 260ms ease-out,
+      width 260ms ease-out,
+      height 260ms ease-out;
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/src/FancyForm/FancyField.svelte

@@ -69,7 +69,9 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     box-sizing: border-box;
-    transition: border-color 130ms ease-out, background 130ms ease-out,
+    transition:
+      border-color 130ms ease-out,
+      background 130ms ease-out,
       background 130ms ease-out;
     color: var(--spectrum-global-color-gray-800);
     --padding: 16px;

package/src/FancyForm/FancyFieldLabel.svelte

@@ -14,7 +14,9 @@
     position: absolute;
     top: 10px;
     color: var(--spectrum-global-color-gray-600);
-    transition: font-size 130ms ease-out, top 130ms ease-out,
+    transition:
+      font-size 130ms ease-out,
+      top 130ms ease-out,
       transform 130ms ease-out;
   }
   div.placeholder {

package/src/FancyForm/FancyInput.svelte

@@ -113,7 +113,9 @@
     border-radius: 2px;
     -webkit-box-shadow: 0 0 0 100px var(--spectrum-global-color-gray-300) inset;
     -webkit-text-fill-color: var(--spectrum-global-color-gray-900);
-    transition: -webkit-box-shadow 130ms 200ms, background-color 0s 86400s;
+    transition:
+      -webkit-box-shadow 130ms 200ms,
+      background-color 0s 86400s;
     padding: 3px 8px 4px 8px;
   }
 </style>

package/src/FancyForm/FancySelect.svelte

@@ -125,7 +125,9 @@
     font-size: 15px;
     line-height: 17px;
     color: var(--spectrum-global-color-gray-900);
-    transition: transform 130ms ease-out, opacity 130ms ease-out;
+    transition:
+      transform 130ms ease-out,
+      opacity 130ms ease-out;
     opacity: 1;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -139,7 +141,9 @@
     font-size: 15px;
     line-height: 17px;
     color: var(--spectrum-global-color-gray-900);
-    transition: transform 130ms ease-out, opacity 130ms ease-out;
+    transition:
+      transform 130ms ease-out,
+      opacity 130ms ease-out;
     transform: translateY(9px);
   }
 

package/src/Form/Core/TextField.svelte

@@ -121,6 +121,7 @@
 <style>
   .spectrum-Textfield {
     width: 100%;
+    --spectrum-textfield-padding-bottom: var(--spectrum-textfield-padding-top);
   }
 
   input::placeholder {

package/src/Input/CopyInput.svelte

@@ -48,8 +48,8 @@
     width: 31px;
     color: var(--spectrum-alias-text-color);
     background-color: var(--spectrum-global-color-gray-75);
-    transition: background-color
-        var(--spectrum-global-animation-duration-100, 130ms),
+    transition:
+      background-color var(--spectrum-global-animation-duration-100, 130ms),
       box-shadow var(--spectrum-global-animation-duration-100, 130ms),
       border-color var(--spectrum-global-animation-duration-100, 130ms);
     height: calc(var(--spectrum-alias-item-height-m) - 2px);

package/src/List/ListItem.svelte

@@ -57,7 +57,9 @@
     flex-direction: row;
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
-    transition: background 130ms ease-out, border-color 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;
@@ -112,7 +114,9 @@
     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,
+    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 {

package/src/Modal/CustomContent.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Context from "../context"
 
-  const { hide } = getContext(Context.Modal) as { hide: () => void }
+  const { hide } = getContext(Context.Modal)
 
   let count: number = 0
   const clicks: number = 5

package/src/Modal/Modal.svelte

@@ -5,6 +5,7 @@
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
   import Context from "../context"
+  import { ModalCancelFrom } from "../constants"
 
   export let fixed: boolean = false
   export let inline: boolean = false
@@ -15,7 +16,7 @@
   const dispatch = createEventDispatcher<{
     show: void
     hide: void
-    cancel: void
+    cancel: ModalCancelFrom
   }>()
   let visible: boolean = fixed || inline
   let modal: HTMLElement | undefined
@@ -44,17 +45,17 @@
     }
   }
 
-  export function cancel(): void {
+  export function cancel(from: ModalCancelFrom): void {
     if (!visible || disableCancel) {
       return
     }
-    dispatch("cancel")
+    dispatch("cancel", from)
     hide()
   }
 
   function handleKey(e: KeyboardEvent): void {
     if (visible && e.key === "Escape") {
-      cancel()
+      cancel(ModalCancelFrom.ESCAPE_KEY)
     }
   }
 
@@ -78,7 +79,12 @@
     hide,
     toggle,
     cancel,
-  } as { show: () => void; hide: () => void; toggle: () => void; cancel: () => void })
+  } as {
+    show: () => void
+    hide: () => void
+    toggle: () => void
+    cancel: () => void
+  })
 
   onMount(() => {
     document.addEventListener("keydown", handleKey)
@@ -107,7 +113,7 @@
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="spectrum-Underlay is-open"
-        on:mousedown|self={cancel}
+        on:mousedown|self={() => cancel(ModalCancelFrom.OUTSIDE_CLICK)}
         style="z-index:{zIndex || 999}"
       >
         <div
@@ -115,8 +121,14 @@
           in:fade={{ duration: 200 }}
           out:fade|local={{ duration: 200 }}
         />
-        <div class="modal-wrapper" on:mousedown|self={cancel}>
-          <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+        <div
+          class="modal-wrapper"
+          on:mousedown|self={() => cancel(ModalCancelFrom.OUTSIDE_CLICK)}
+        >
+          <div
+            class="modal-inner-wrapper"
+            on:mousedown|self={() => cancel(ModalCancelFrom.OUTSIDE_CLICK)}
+          >
             <slot name="outside" />
             <div
               use:focusModal

package/src/Modal/ModalContent.svelte

@@ -10,6 +10,7 @@
   import Icon from "../Icon/Icon.svelte"
   import Context from "../context"
   import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
+  import { ModalCancelFrom } from "../constants"
 
   export let title: string | undefined = undefined
   export let size: "S" | "M" | "L" | "XL" = "S"
@@ -30,10 +31,7 @@
   export let secondaryButtonWarning: boolean = false
   export let custom: boolean = false
 
-  const { hide, cancel } = getContext(Context.Modal) as {
-    hide: () => void
-    cancel: () => void
-  }
+  const { hide, cancel } = getContext(Context.Modal)
 
   let loading: boolean = false
 
@@ -59,7 +57,7 @@
   async function close(): Promise<void> {
     loading = true
     if (!onCancel || (await onCancel()) !== keepOpen) {
-      cancel()
+      cancel(ModalCancelFrom.CANCEL_BUTTON)
     }
     loading = false
   }
@@ -139,7 +137,11 @@
     {/if}
     {#if showCloseIcon}
       <div class="close-icon">
-        <Icon hoverable name="Close" on:click={cancel} />
+        <Icon
+          hoverable
+          name="Close"
+          on:click={() => cancel(ModalCancelFrom.CLOSE_BUTTON)}
+        />
       </div>
     {/if}
   </div>

package/src/Table/DateTimeRenderer.svelte

@@ -12,8 +12,8 @@
   $: format = isTimeOnly
     ? "HH:mm:ss"
     : isDateOnly
-    ? "MMMM D YYYY"
-    : "MMMM D YYYY, HH:mm"
+      ? "MMMM D YYYY"
+      : "MMMM D YYYY, HH:mm"
 </script>
 
 <div>

package/src/Tooltip/AbsTooltip.svelte

@@ -115,7 +115,9 @@
     pointer-events: none;
     margin: 0;
     max-width: 280px;
-    transition: top 130ms ease-out, left 130ms ease-out;
+    transition:
+      top 130ms ease-out,
+      left 130ms ease-out;
   }
   .spectrum-Tooltip-label {
     display: -webkit-box;

package/src/bbui.css

@@ -1,3 +1,4 @@
+/* Custom variables */
 :root {
   --background: #ffffff;
   --ink: #000000;
@@ -71,7 +72,6 @@
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
-  --spectrum-alias-body-text-font-family: var(--font-sans);
 
   font-size: 16px;
   --font-size-xs: 0.75rem;
@@ -116,9 +116,17 @@
   --border-blue: 2px var(--blue) solid;
   --border-transparent: 2px transparent solid;
 
-  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
 }
 
+/* Spectrum overrides */
+.spectrum {
+  --spectrum-alias-body-text-font-family: var(--font-sans) !important;
+  --spectrum-global-font-family-base: var(--font-sans) !important;
+  --spectrum-global-font-line-height-small: 1.4 !important;
+  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600) !important;
+}
+
+/* Generic styles */
 a {
   text-decoration: none;
 }

package/src/constants.ts

@@ -21,3 +21,10 @@ export enum TooltipType {
   Positive = "positive",
   Negative = "negative",
 }
+
+export const enum ModalCancelFrom {
+  CLOSE_BUTTON = "close_button",
+  CANCEL_BUTTON = "cancel_button",
+  ESCAPE_KEY = "escape_key",
+  OUTSIDE_CLICK = "outside_click",
+}

package/src/types/modalContext.ts

@@ -1,3 +1,6 @@
+import { ModalCancelFrom } from "../constants"
+
 export interface ModalContext {
+  cancel: (from: ModalCancelFrom) => void
   hide: () => void
 }