@budibase/bbui 1.0.219-alpha.7 → 1.0.219

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.219-alpha.7",
+  "version": "1.0.219",
   "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.219-alpha.7",
+    "@budibase/string-templates": "^1.0.219",
     "@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": "57e5d6fa3b84deffdd8ec86c3b1b9ff8ebaab101"
+  "gitHead": "231b038a3c99f730dd27a595f870663dd84b7837"
 }

package/src/ActionButton/ActionButton.svelte

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

package/src/Button/Button.svelte

@@ -14,7 +14,6 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
-  export let newStyles = false
 
   let showTooltip = false
 </script>
@@ -26,7 +25,6 @@
   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}
@@ -95,20 +93,4 @@
     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,6 +40,5 @@
     on:change={onChange}
     on:pick
     on:type
-    on:blur
   />
 </Field>

package/src/Form/Core/Combobox.svelte

@@ -18,6 +18,23 @@
   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)
@@ -52,10 +69,7 @@
       {id}
       type="text"
       on:focus={() => (focus = true)}
-      on:blur={() => {
-        focus = false
-        dispatch("blur")
-      }}
+      on:blur={() => (focus = false)}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

package/src/Form/Core/Picker.svelte

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

package/src/Form/Core/TextField.svelte

@@ -112,8 +112,4 @@
   .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,20 +1,15 @@
 <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}" class:wide>
+<div class="spectrum-Toast spectrum-Toast--{type}">
   {#if icon}
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
@@ -24,13 +19,8 @@
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
-  <div class="spectrum-Toast-body" class:actionBody={!!action}>
+  <div class="spectrum-Toast-body">
     <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">
@@ -56,15 +46,4 @@
   .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,15 +8,13 @@
 
 <Portal target=".modal-container">
   <div class="notifications">
-    {#each $notifications as { type, icon, message, id, dismissable, action, wide } (id)}
+    {#each $notifications as { type, icon, message, id, dismissable } (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,16 +20,7 @@ export const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (
-    message,
-    {
-      type = "default",
-      icon = "",
-      autoDismiss = true,
-      action = null,
-      wide = false,
-    }
-  ) => {
+  const send = (message, type = "default", icon = "", autoDismiss = true) => {
     if (block) {
       return
     }
@@ -37,15 +28,7 @@ export const createNotificationStore = () => {
     _notifications.update(state => {
       return [
         ...state,
-        {
-          id: _id,
-          type,
-          message,
-          icon,
-          dismissable: !autoDismiss,
-          action,
-          wide,
-        },
+        { id: _id, type, message, icon, dismissable: !autoDismiss },
       ]
     })
     if (autoDismiss) {
@@ -67,11 +50,10 @@ export const createNotificationStore = () => {
   return {
     subscribe,
     send,
-    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" }),
+    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"),
     blockNotifications,
     dismiss: dismissNotification,
   }

package/src/Table/CellRenderer.svelte

@@ -26,20 +26,12 @@
     array: ArrayRenderer,
     internal: InternalRenderer,
   }
-  $: type = getType(schema)
+  $: type = schema?.type ?? "string"
   $: 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,7 +37,6 @@
   export let autoSortColumns = true
   export let compact = false
   export let customPlaceholder = false
-  export let placeholderText = "No rows found"
 
   const dispatch = createEventDispatcher()
 
@@ -406,7 +405,7 @@
               >
                 <use xlink:href="#spectrum-icon-18-Table" />
               </svg>
-              <div>{placeholderText}</div>
+              <div>No rows found</div>
             </div>
           {/if}
         </div>

package/src/Typography/Detail.svelte

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