@budibase/bbui 2.5.9 → 2.5.10-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.5.9",
+  "version": "2.5.10-alpha.1",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,8 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "^2.5.9",
-    "@budibase/string-templates": "^2.5.9",
+    "@budibase/shared-core": "2.5.10-alpha.1",
+    "@budibase/string-templates": "2.5.10-alpha.1",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -84,11 +84,11 @@
     "@spectrum-css/vars": "3.0.1",
     "dayjs": "^1.10.4",
     "easymde": "^2.16.1",
-    "svelte-flatpickr": "^3.2.3",
+    "svelte-flatpickr": "^3.3.2",
     "svelte-portal": "^1.0.0"
   },
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "1a054856a4aa2b39142e7b7800f8ae39f5904ecc"
+  "gitHead": "9fcfb0a6cd4e4003f0e420b4b180b3b069e93191"
 }

package/src/ActionButton/ActionButton.svelte

@@ -71,7 +71,7 @@
     {/if}
     {#if icon}
       <svg
-        class="spectrum-Icon spectrum-Icon--size{size}"
+        class="spectrum-Icon spectrum-Icon--sizeS"
         focusable="false"
         aria-hidden="true"
         aria-label={icon}

package/src/Actions/click_outside.js

@@ -6,6 +6,9 @@ let clickHandlers = []
  */
 const handleClick = event => {
   // Ignore click if this is an ignored class
+  if (event.target.closest('[data-ignore-click-outside="true"]')) {
+    return
+  }
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -29,6 +32,7 @@ const handleClick = event => {
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)
+document.documentElement.addEventListener("contextmenu", handleClick, true)
 
 /**
  * Adds or updates a click handler

package/src/Actions/position_dropdown.js

@@ -10,7 +10,14 @@ export default function positionDropdown(element, opts) {
 
   // Updates the position of the dropdown
   const updatePosition = opts => {
-    const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts
+    const {
+      anchor,
+      align,
+      maxHeight,
+      maxWidth,
+      useAnchorWidth,
+      offset = 5,
+    } = opts
     if (!anchor) {
       return
     }
@@ -31,10 +38,11 @@ export default function positionDropdown(element, opts) {
       styles.top = anchorBounds.top
     } else if (window.innerHeight - anchorBounds.bottom < 100) {
       styles.top = anchorBounds.top - elementBounds.height - offset
-      styles.maxHeight = 240
+      styles.maxHeight = maxHeight || 240
     } else {
       styles.top = anchorBounds.bottom + offset
-      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
+      styles.maxHeight =
+        maxHeight || window.innerHeight - anchorBounds.bottom - 20
     }
 
     // Determine horizontal styles

package/src/Form/Core/Dropzone.svelte

@@ -138,7 +138,7 @@
   }
 </script>
 
-<div class="container">
+<div class="container" class:compact>
   {#if selectedImage}
     {#if gallery}
       <div class="gallery">
@@ -355,6 +355,9 @@
   input[type="file"] {
     display: none;
   }
+  .compact .spectrum-Dropzone {
+    padding: 6px 0 !important;
+  }
 
   .gallery {
     display: flex;
@@ -379,6 +382,17 @@
     object-fit: contain;
     margin: 20px 30px;
   }
+  .compact .placeholder,
+  .compact img {
+    margin: 10px 16px;
+  }
+  .compact img {
+    height: 90px;
+  }
+  .compact .gallery {
+    padding: 6px 10px;
+    margin-bottom: 8px;
+  }
   .title {
     display: flex;
     flex-direction: row;
@@ -447,6 +461,13 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
+  .compact .spectrum-Dropzone {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .compact .spectrum-IllustratedMessage-description {
+    margin: 0;
+  }
 
   .tags {
     margin-top: 20px;

package/src/Form/Core/Multiselect.svelte

@@ -20,12 +20,13 @@
 
   const dispatch = createEventDispatcher()
 
-  $: selectedLookupMap = getSelectedLookupMap(value)
+  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
+  $: selectedLookupMap = getSelectedLookupMap(arrayValue)
   $: optionLookupMap = getOptionLookupMap(options)
 
-  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
+  $: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  $: toggleOption = makeToggleOption(selectedLookupMap, value)
+  $: toggleOption = makeToggleOption(selectedLookupMap, arrayValue)
 
   const getFieldText = (value, map, placeholder) => {
     if (Array.isArray(value) && value.length > 0) {
@@ -84,7 +85,7 @@
   {readonly}
   {fieldText}
   {options}
-  isPlaceholder={!value?.length}
+  isPlaceholder={!arrayValue.length}
   {autocomplete}
   bind:fetchTerm
   {useFetch}

package/src/Form/Dropzone.svelte

@@ -16,6 +16,7 @@
   export let gallery = true
   export let fileTags = []
   export let maximum = undefined
+  export let compact = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -37,6 +38,7 @@
     {gallery}
     {fileTags}
     {maximum}
+    {compact}
     on:change={onChange}
   />
 </Field>

package/src/InlineAlert/InlineAlert.svelte

@@ -7,7 +7,7 @@
   export let message = ""
   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")
@@ -41,7 +41,9 @@
   {/each}
   {#if onConfirm}
     <div class="spectrum-InLineAlert-footer button">
-      <Button secondary on:click={onConfirm}>{buttonText || "OK"}</Button>
+      <Button {cta} secondary={cta ? false : true} on:click={onConfirm}
+        >{buttonText || "OK"}</Button
+      >
     </div>
   {/if}
 </div>
@@ -57,7 +59,6 @@
     --spectrum-semantic-negative-icon-color: #e34850;
     min-width: 100px;
     margin: 0;
-    border-color: var(--spectrum-global-color-gray-400);
     border-width: 1px;
   }
 </style>

package/src/Label/Label.svelte

@@ -9,6 +9,7 @@
 
 <TooltipWrapper {tooltip} {size}>
   <label
+    data-testid="label"
     class:muted
     for=""
     class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}

package/src/Layout/Page.svelte

@@ -4,6 +4,7 @@
 
   export let wide = false
   export let narrow = false
+  export let narrower = false
   export let noPadding = false
 
   let sidePanelVisble = false
@@ -16,7 +17,7 @@
 
 <div class="page">
   <div class="main">
-    <div class="content" class:wide class:noPadding class:narrow>
+    <div class="content" class:wide class:noPadding class:narrow class:narrower>
       <slot />
       <div class="fix-scroll-padding" />
     </div>
@@ -70,6 +71,9 @@
   .content.narrow {
     max-width: 840px;
   }
+  .content.narrower {
+    max-width: 700px;
+  }
   #side-panel {
     position: absolute;
     right: 0;

package/src/Popover/Popover.svelte

@@ -14,11 +14,13 @@
   export let align = "right"
   export let portalTarget
   export let maxWidth
+  export let maxHeight
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 5
   export let customHeight
+  export let animate = true
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -64,6 +66,7 @@
       use:positionDropdown={{
         anchor,
         align,
+        maxHeight,
         maxWidth,
         useAnchorWidth,
         offset,
@@ -76,7 +79,7 @@
       class="spectrum-Popover is-open"
       role="presentation"
       style="height: {customHeight}"
-      transition:fly|local={{ y: -20, duration: 200 }}
+      transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
     >
       <slot />
     </div>

package/src/Stores/banner.js

@@ -3,6 +3,7 @@ import { writable } from "svelte/store"
 export const BANNER_TYPES = {
   INFO: "info",
   NEGATIVE: "negative",
+  WARNING: "warning",
 }
 
 export function createBannerStore() {
@@ -38,7 +39,8 @@ export function createBannerStore() {
   const queue = async entries => {
     const priority = {
       [BANNER_TYPES.NEGATIVE]: 0,
-      [BANNER_TYPES.INFO]: 1,
+      [BANNER_TYPES.WARNING]: 1,
+      [BANNER_TYPES.INFO]: 2,
     }
     banner.update(store => {
       const sorted = [...store.messages, ...entries].sort((a, b) => {

package/src/Table/ArrayRenderer.svelte

@@ -5,8 +5,9 @@
 
   const displayLimit = 5
 
-  $: badges = Array.isArray(value) ? value.slice(0, displayLimit) : []
-  $: leftover = (value?.length ?? 0) - badges.length
+  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
+  $: badges = arrayValue.slice(0, displayLimit)
+  $: leftover = arrayValue.length - badges.length
 </script>
 
 {#each badges as badge}

package/src/Table/Table.svelte

@@ -143,7 +143,7 @@
     }
     fields?.forEach(field => {
       const fieldSchema = schema[field]
-      if (fieldSchema.width) {
+      if (fieldSchema.width && typeof fieldSchema.width === "string") {
         style += ` ${fieldSchema.width}`
       } else {
         style += " minmax(auto, 1fr)"

package/src/Typography/Body.svelte

@@ -9,6 +9,7 @@
 </script>
 
 <p
+  data-testid="typography-body"
   style={`
     ${weight ? `font-weight:${weight};` : ""}
     ${textAlign ? `text-align:${textAlign};` : ""}

package/src/Typography/Detail.svelte

@@ -3,9 +3,13 @@
 
   export let size = "M"
   export let serif = false
+  export let weight = 600
 </script>
 
 <p
+  style={`
+    ${weight ? `font-weight:${weight};` : ""}
+  `}
   class="spectrum-Detail spectrum-Detail--size{size}"
   class:spectrum-Detail--serif={serif}
 >
@@ -13,7 +17,4 @@
 </p>
 
 <style>
-  p {
-    font-weight: 600;
-  }
 </style>

package/src/Typography/Heading.svelte

@@ -9,6 +9,7 @@
 </script>
 
 <h1
+  data-testid="typography-heading"
   style={textAlign ? `text-align:${textAlign}` : ``}
   class:noPadding
   class="spectrum-Heading spectrum-Heading--size{size} spectrum-Heading--{weight}"

package/src/bbui.css

@@ -97,4 +97,22 @@
 
 a {
   text-decoration: none;
-}
+}
+
+/* Custom theme additions */
+.spectrum--darkest {
+  --drop-shadow: rgba(0, 0, 0, 0.6);
+  --spectrum-global-color-blue-100: rgb(28, 33, 43);
+}
+.spectrum--dark {
+  --drop-shadow: rgba(0, 0, 0, 0.3);
+  --spectrum-global-color-blue-100: rgb(42, 47, 57);
+}
+.spectrum--light {
+  --drop-shadow: rgba(0, 0, 0, 0.075);
+  --spectrum-global-color-blue-100: rgb(240, 245, 255);
+}
+.spectrum--lightest {
+  --drop-shadow: rgba(0, 0, 0, 0.05);
+  --spectrum-global-color-blue-100: rgb(240, 244, 255);
+}