@budibase/bbui 1.0.217 → 1.0.219-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.217",
+  "version": "1.0.219-alpha.1",
   "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.217",
+    "@budibase/string-templates": "^1.0.219-alpha.1",
     "@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": "8bc247cbba648c3c52b8a71ae7e5517f284f4bea"
+  "gitHead": "58d9fc1384c304fb9c442b7605745512ba4c70d9"
 }

package/src/ActionButton/ActionButton.svelte

@@ -13,6 +13,7 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
+  export let noPadding = false
 
   function longPress(element) {
     if (!longPressable) return
@@ -41,6 +42,7 @@
   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
@@ -80,4 +82,8 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  .noPadding {
+    padding: 0;
+    min-width: 0;
+  }
 </style>

package/src/Button/Button.svelte

@@ -14,6 +14,7 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
+  export let newStyles = false
 
   let showTooltip = false
 </script>
@@ -25,6 +26,7 @@
   class:spectrum-Button--warning={warning}
   class:spectrum-Button--overBackground={overBackground}
   class:spectrum-Button--quiet={quiet}
+  class:new-styles={newStyles}
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
@@ -93,4 +95,20 @@
     padding-left: var(--spacing-m);
     line-height: 0;
   }
+  .spectrum-Button--primary.new-styles {
+    background: var(--spectrum-global-color-gray-800);
+    border-color: transparent;
+    color: var(--spectrum-global-color-gray-50);
+  }
+  .spectrum-Button--primary.new-styles:hover {
+    background: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Button--secondary.new-styles {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: transparent;
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Button--secondary.new-styles:hover {
+    background: var(--spectrum-global-color-gray-300);
+  }
 </style>

package/src/Form/Combobox.svelte

@@ -40,5 +40,6 @@
     on:change={onChange}
     on:pick
     on:type
+    on:blur
   />
 </Field>

package/src/Form/Core/Combobox.svelte

@@ -18,23 +18,6 @@
   const dispatch = createEventDispatcher()
   let open = false
   let focus = false
-  $: fieldText = getFieldText(value, options, placeholder)
-
-  const getFieldText = (value, options, placeholder) => {
-    // Always use placeholder if no value
-    if (value == null || value === "") {
-      return placeholder || "Choose an option or type"
-    }
-
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find(option => getOptionValue(option) === value)
-    return selected ? getOptionLabel(selected) : value
-  }
 
   const selectOption = value => {
     dispatch("change", value)
@@ -69,7 +52,10 @@
       {id}
       type="text"
       on:focus={() => (focus = true)}
-      on:blur={() => (focus = false)}
+      on:blur={() => {
+        focus = false
+        dispatch("blur")
+      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

package/src/Form/Core/Picker.svelte

@@ -199,6 +199,7 @@
   }
   .spectrum-Picker {
     width: 100%;
+    box-shadow: none;
   }
   .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;

package/src/Form/Core/TextField.svelte

@@ -112,4 +112,8 @@
   .spectrum-Textfield {
     width: 100%;
   }
+  input:disabled {
+    color: var(--spectrum-global-color-gray-600) !important;
+    -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
+  }
 </style>

package/src/Notification/Notification.svelte

@@ -1,15 +1,20 @@
 <script>
+  import { ActionButton } from "../"
+
   import { createEventDispatcher } from "svelte"
 
   export let type = "info"
   export let icon = "Info"
   export let message = ""
   export let dismissable = false
+  export let actionMessage = null
+  export let action = null
+  export let wide = false
 
   const dispatch = createEventDispatcher()
 </script>
 
-<div class="spectrum-Toast spectrum-Toast--{type}">
+<div class="spectrum-Toast spectrum-Toast--{type}" class:wide>
   {#if icon}
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
@@ -19,8 +24,13 @@
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
-  <div class="spectrum-Toast-body">
+  <div class="spectrum-Toast-body" class:actionBody={!!action}>
     <div class="spectrum-Toast-content">{message || ""}</div>
+    {#if action}
+      <ActionButton quiet emphasized on:click={action}>
+        <div style="color: white; font-weight: 600;">{actionMessage}</div>
+      </ActionButton>
+    {/if}
   </div>
   {#if dismissable}
     <div class="spectrum-Toast-buttons">
@@ -46,4 +56,15 @@
   .spectrum-Toast {
     pointer-events: all;
   }
+
+  .wide {
+    width: 100%;
+  }
+
+  .actionBody {
+    justify-content: space-between;
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
 </style>

package/src/Notification/NotificationDisplay.svelte

@@ -8,13 +8,15 @@
 
 <Portal target=".modal-container">
   <div class="notifications">
-    {#each $notifications as { type, icon, message, id, dismissable } (id)}
+    {#each $notifications as { type, icon, message, id, dismissable, action, wide } (id)}
       <div transition:fly={{ y: -30 }}>
         <Notification
           {type}
           {icon}
           {message}
           {dismissable}
+          {action}
+          {wide}
           on:dismiss={() => notifications.dismiss(id)}
         />
       </div>

package/src/Stores/notifications.js

@@ -20,7 +20,16 @@ export const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "default", icon = "", autoDismiss = true) => {
+  const send = (
+    message,
+    {
+      type = "default",
+      icon = "",
+      autoDismiss = true,
+      action = null,
+      wide = false,
+    }
+  ) => {
     if (block) {
       return
     }
@@ -28,7 +37,15 @@ export const createNotificationStore = () => {
     _notifications.update(state => {
       return [
         ...state,
-        { id: _id, type, message, icon, dismissable: !autoDismiss },
+        {
+          id: _id,
+          type,
+          message,
+          icon,
+          dismissable: !autoDismiss,
+          action,
+          wide,
+        },
       ]
     })
     if (autoDismiss) {
@@ -50,10 +67,11 @@ export const createNotificationStore = () => {
   return {
     subscribe,
     send,
-    info: msg => send(msg, "info", "Info"),
-    error: msg => send(msg, "error", "Alert", false),
-    warning: msg => send(msg, "warning", "Alert"),
-    success: msg => send(msg, "success", "CheckmarkCircle"),
+    info: msg => send(msg, { type: "info", icon: "Info" }),
+    error: msg =>
+      send(msg, { type: "error", icon: "Alert", autoDismiss: false }),
+    warning: msg => send(msg, { type: "warning", icon: "Alert" }),
+    success: msg => send(msg, { type: "success", icon: "CheckmarkCircle" }),
     blockNotifications,
     dismiss: dismissNotification,
   }

package/src/Table/CellRenderer.svelte

@@ -26,12 +26,20 @@
     array: ArrayRenderer,
     internal: InternalRenderer,
   }
-  $: type = schema?.type ?? "string"
+  $: type = getType(schema)
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
   $: width = schema?.width || "150px"
   $: cellValue = getCellValue(value, schema.template)
 
+  const getType = schema => {
+    // Use a string renderer for dates if we use a custom template
+    if (schema?.type === "datetime" && schema?.template) {
+      return "string"
+    }
+    return schema?.type || "string"
+  }
+
   const getCellValue = (value, template) => {
     if (!template) {
       return value

package/src/Table/Table.svelte

@@ -37,6 +37,7 @@
   export let autoSortColumns = true
   export let compact = false
   export let customPlaceholder = false
+  export let placeholderText = "No rows found"
 
   const dispatch = createEventDispatcher()
 
@@ -405,7 +406,7 @@
               >
                 <use xlink:href="#spectrum-icon-18-Table" />
               </svg>
-              <div>No rows found</div>
+              <div>{placeholderText}</div>
             </div>
           {/if}
         </div>

package/src/Typography/Detail.svelte

@@ -1,9 +1,7 @@
 <script>
   import "@spectrum-css/typography/dist/index-vars.css"
 
-  // Sizes
   export let size = "M"
-
   export let serif = false
 </script>