@budibase/bbui 1.2.5 → 1.2.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "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.2.5",
+    "@budibase/string-templates": "^1.2.6",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -85,5 +85,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "fe1a52ca497fd3440484bab2e91eaad54096f0ce"
+  "gitHead": "7aa3a20ecc0f6d0f4617c6e703bf4f6f1998071e"
 }

package/src/Form/Core/PickerDropdown.svelte

@@ -15,7 +15,6 @@
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
-  export let readonly = false
   export let updateOnChange = true
   export let error = null
   export let secondaryOptions = []
@@ -35,6 +34,7 @@
   export let isOptionSelected = () => false
   export let isPlaceholder = false
   export let placeholderOption = null
+  export let showClearIcon = true
 
   const dispatch = createEventDispatcher()
   let primaryOpen = false
@@ -50,17 +50,11 @@
   }
 
   const updateValue = newValue => {
-    if (readonly) {
-      return
-    }
     dispatch("change", newValue)
   }
 
   const onClickSecondary = () => {
     dispatch("click")
-    if (readonly) {
-      return
-    }
     secondaryOpen = true
   }
 
@@ -80,24 +74,15 @@
   }
 
   const onBlur = event => {
-    if (readonly) {
-      return
-    }
     focus = false
     updateValue(event.target.value)
   }
 
   const onInput = event => {
-    if (readonly || !updateOnChange) {
-      return
-    }
     updateValue(event.target.value)
   }
 
   const updateValueOnEnter = event => {
-    if (readonly) {
-      return
-    }
     if (event.key === "Enter") {
       updateValue(event.target.value)
     }
@@ -140,11 +125,12 @@
       value={primaryLabel || ""}
       placeholder={placeholder || ""}
       {disabled}
-      {readonly}
+      readonly
       class="spectrum-Textfield-input spectrum-InputGroup-input"
       class:labelPadding={iconData}
+      class:open={primaryOpen}
     />
-    {#if primaryValue}
+    {#if primaryValue && showClearIcon}
       <button
         on:click={() => onClearPrimary()}
         type="reset"
@@ -198,7 +184,7 @@
           </li>
         {/if}
         {#each groupTitles as title}
-          <div class="spectrum-Menu-item">
+          <div class="spectrum-Menu-item title">
             <Detail>{title}</Detail>
           </div>
           {#if primaryOptions}
@@ -433,4 +419,18 @@
   .spectrum-Search-clearButton {
     position: absolute;
   }
+
+  /* Fix focus borders to show only when opened */
+  .spectrum-Textfield-input {
+    border-color: var(--spectrum-global-color-gray-400) !important;
+    border-right-width: 1px;
+  }
+  .spectrum-Textfield-input.open {
+    border-color: var(--spectrum-global-color-blue-400) !important;
+  }
+
+  /* Fix being able to hover and select titles */
+  .spectrum-Menu-item.title {
+    pointer-events: none;
+  }
 </style>

package/src/Form/PickerDropdown.svelte

@@ -27,6 +27,7 @@
   export let primaryOptions = []
   export let secondaryOptions = []
   export let searchTerm
+  export let showClearIcon = true
 
   let primaryLabel
   let secondaryLabel
@@ -120,6 +121,7 @@
     {secondaryValue}
     {primaryLabel}
     {secondaryLabel}
+    {showClearIcon}
     on:pickprimary={onPickPrimary}
     on:picksecondary={onPickSecondary}
     on:search={updateSearchTerm}

package/src/List/ListItem.svelte

@@ -9,11 +9,12 @@
   export let avatar = false
   export let title = null
   export let subtitle = null
+  export let hoverable = false
 
   $: initials = avatar ? title?.[0] : null
 </script>
 
-<div class="list-item">
+<div class="list-item" class:hoverable on:click>
   <div class="left">
     {#if icon}
       <div class="icon" style="background: {iconBackground || `transparent`};">
@@ -39,11 +40,12 @@
   .list-item {
     padding: 0 16px;
     height: 56px;
-    background: var(--spectrum-alias-background-color-tertiary);
+    background: var(--spectrum-global-color-gray-50);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
+    transition: background 130ms ease-out;
   }
   .list-item:not(:first-child) {
     border-top: none;
@@ -56,6 +58,10 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
   }
+  .hoverable:hover {
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-75);
+  }
   .left,
   .right {
     display: flex;

package/src/Modal/ModalContent.svelte

@@ -106,7 +106,9 @@
         {/if}
 
         {#if showCancelButton}
-          <Button group secondary on:click={close}>{cancelText}</Button>
+          <Button group secondary newStyles on:click={close}>
+            {cancelText}
+          </Button>
         {/if}
         {#if showConfirmButton}
           <span class="confirm-wrap">

package/src/Table/Table.svelte

@@ -503,12 +503,6 @@
   .spectrum-Table-headCell--alignRight {
     justify-content: flex-end;
   }
-  .spectrum-Table-headCell--divider {
-    padding-right: var(--cell-padding);
-  }
-  .spectrum-Table-headCell--divider + .spectrum-Table-headCell {
-    padding-left: var(--cell-padding);
-  }
   .spectrum-Table-headCell--edit {
     position: sticky;
     left: 0;
@@ -580,13 +574,6 @@
     background-color: var(--table-bg);
     z-index: auto;
   }
-  .spectrum-Table-cell--divider {
-    padding-right: var(--cell-padding);
-  }
-  .spectrum-Table-cell--divider + .spectrum-Table-cell {
-    padding-left: var(--cell-padding);
-  }
-
   .spectrum-Table-cell--edit {
     position: sticky;
     left: 0;