@budibase/bbui 1.0.220-alpha.2 → 1.0.221

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.220-alpha.2",
+  "version": "1.0.221",
   "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.220-alpha.2",
+    "@budibase/string-templates": "^1.0.221",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -66,11 +66,12 @@
     "@spectrum-css/radio": "^3.0.2",
     "@spectrum-css/search": "^3.0.2",
     "@spectrum-css/sidenav": "^3.0.2",
+    "@spectrum-css/slider": "3.0.1",
     "@spectrum-css/statuslight": "^3.0.2",
     "@spectrum-css/stepper": "^3.0.3",
     "@spectrum-css/switch": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
-    "@spectrum-css/tabs": "^3.0.1",
+    "@spectrum-css/tabs": "^3.2.12",
     "@spectrum-css/tags": "^3.0.2",
     "@spectrum-css/textfield": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
@@ -84,5 +85,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "80b7a2da2fba39ff25622873c95598fa931ea6ed"
+  "gitHead": "4e1904bba3bbec3d6f36827ecd012827b5e76cd8"
 }

package/src/ActionButton/ActionButton.svelte

@@ -82,6 +82,12 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
+    margin-left: 0;
+  }
+  .is-selected:not(.spectrum-ActionButton--emphasized) {
+    background: var(--spectrum-global-color-gray-300);
+  }
   .noPadding {
     padding: 0;
     min-width: 0;

package/src/Banner/Banner.svelte

@@ -8,6 +8,7 @@
   export let size = "S"
   export let extraButtonText
   export let extraButtonAction
+  export let showCloseButton = true
 
   let show = true
 
@@ -39,22 +40,24 @@
         </button>
       {/if}
     </div>
-    <div class="spectrum-Toast-buttons">
-      <button
-        class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
-        on:click={clear}
-      >
-        <div class="spectrum-ClearButton-fill">
-          <svg
-            class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-css-icon-Cross100" />
-          </svg>
-        </div>
-      </button>
-    </div>
+    {#if showCloseButton}
+      <div class="spectrum-Toast-buttons">
+        <button
+          class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
+          on:click={clear}
+        >
+          <div class="spectrum-ClearButton-fill">
+            <svg
+              class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Cross100" />
+            </svg>
+          </div>
+        </button>
+      </div>
+    {/if}
   </div>
 {/if}
 
@@ -63,4 +66,7 @@
     pointer-events: all;
     width: 100%;
   }
+  .spectrum-Button {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
 </style>

package/src/Divider/Divider.svelte

@@ -16,6 +16,9 @@
 />
 
 <style>
+  hr {
+    background: var(--spectrum-global-color-gray-200);
+  }
   hr.noMargin {
     margin: 0;
   }

package/src/Drawer/Drawer.svelte

@@ -6,6 +6,8 @@
 
   export let title
   export let fillWidth
+  export let left = "314px"
+  export let width = "calc(100% - 576px)"
 
   let visible = false
 
@@ -42,7 +44,12 @@
 
 {#if visible}
   <Portal>
-    <section class:fillWidth class="drawer" transition:slide|local>
+    <section
+      class:fillWidth
+      class="drawer"
+      transition:slide|local
+      style={`width: ${width}; left: ${left};`}
+    >
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -69,8 +76,6 @@
   .drawer {
     position: absolute;
     bottom: 0;
-    left: 260px;
-    width: calc(100% - 520px);
     background: var(--background);
     border-top: var(--border-light);
     z-index: 2;

package/src/Form/Core/Picker.svelte

@@ -6,12 +6,15 @@
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
+  import Icon from "../../Icon/Icon.svelte"
+  import StatusLight from "../../StatusLight/StatusLight.svelte"
 
   export let id = null
   export let disabled = false
   export let error = null
   export let fieldText = ""
   export let fieldIcon = ""
+  export let fieldColour = ""
   export let isPlaceholder = false
   export let placeholderOption = null
   export let options = []
@@ -20,6 +23,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let getOptionColour = () => null
   export let open = false
   export let readonly = false
   export let quiet = false
@@ -83,11 +87,10 @@
     on:mousedown={onClick}
   >
     {#if fieldIcon}
-      <span class="icon-Placeholder-Padding">
-        <img src={fieldIcon} alt="icon" width="20" height="15" />
+      <span class="option-icon">
+        <Icon name={fieldIcon} />
       </span>
     {/if}
-
     <span
       class="spectrum-Picker-label"
       class:is-placeholder={isPlaceholder}
@@ -105,6 +108,11 @@
         <use xlink:href="#spectrum-icon-18-Alert" />
       </svg>
     {/if}
+    {#if fieldColour}
+      <span class="option-colour">
+        <StatusLight size="L" color={fieldColour} />
+      </span>
+    {/if}
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
       focusable="false"
@@ -158,13 +166,8 @@
               on:click={() => onSelectOption(getOptionValue(option, idx))}
             >
               {#if getOptionIcon(option, idx)}
-                <span class="icon-Padding">
-                  <img
-                    src={getOptionIcon(option, idx)}
-                    alt="icon"
-                    width="20"
-                    height="15"
-                  />
+                <span class="option-icon">
+                  <Icon name={getOptionIcon(option, idx)} />
                 </span>
               {/if}
               <span class="spectrum-Menu-itemLabel">
@@ -177,6 +180,11 @@
               >
                 <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
+              {#if getOptionColour(option, idx)}
+                <span class="option-colour">
+                  <StatusLight size="L" color={getOptionColour(option, idx)} />
+                </span>
+              {/if}
             </li>
           {/each}
         {/if}
@@ -214,13 +222,18 @@
     padding-right: 2px;
   }
 
-  .icon-Padding {
-    padding-right: 10px;
+  /* Icon and colour alignment */
+  .spectrum-Menu-checkmark {
+    align-self: center;
+    margin-top: 0;
+  }
+  .option-colour {
+    padding-left: 8px;
   }
-  .icon-Placeholder-Padding {
-    padding-top: 5px;
-    padding-right: 10px;
+  .option-icon {
+    padding-right: 8px;
   }
+
   .spectrum-Popover :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;

package/src/Form/Core/Search.svelte

@@ -8,6 +8,8 @@
   export let id = null
   export let updateOnChange = true
   export let quiet = false
+  export let inputRef
+
   const dispatch = createEventDispatcher()
   let focus = false
 
@@ -68,6 +70,7 @@
       type="search"
       class="spectrum-Textfield-input spectrum-Search-input"
       autocomplete="off"
+      bind:this={inputRef}
     />
   </div>
   <button

package/src/Form/Core/Select.svelte

@@ -11,6 +11,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let getOptionColour = () => null
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
@@ -20,35 +21,27 @@
   const dispatch = createEventDispatcher()
   let open = false
   $: fieldText = getFieldText(value, options, placeholder)
-  $: fieldIcon = getFieldIcon(value, options, placeholder)
-
-  const getFieldText = (value, options, placeholder) => {
-    // Always use placeholder if no value
-    if (value == null || value === "") {
-      return placeholder || "Choose an option"
-    }
+  $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
+  $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
+  const getFieldAttribute = (getAttribute, value, options) => {
     // 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 index = options.findIndex(
       (option, idx) => getOptionValue(option, idx) === value
     )
-    return index !== -1 ? getOptionLabel(options[index], index) : value
+    return index !== -1 ? getAttribute(options[index], index) : null
   }
 
-  const getFieldIcon = (value, options) => {
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
+  const getFieldText = (value, options, placeholder) => {
+    // Always use placeholder if no value
+    if (value == null || value === "") {
+      return placeholder || "Choose an option"
     }
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
-    )
-    return index !== -1 ? getOptionIcon(options[index], index) : null
+
+    return getFieldAttribute(getOptionLabel, value, options)
   }
 
   const selectOption = value => {
@@ -66,12 +59,14 @@
   {disabled}
   {readonly}
   {fieldText}
+  {fieldIcon}
+  {fieldColour}
   {options}
   {autoWidth}
   {getOptionLabel}
   {getOptionValue}
   {getOptionIcon}
-  {fieldIcon}
+  {getOptionColour}
   {autocomplete}
   {sort}
   isPlaceholder={value == null || value === ""}

package/src/Form/Core/Slider.svelte

@@ -0,0 +1,86 @@
+<script>
+  import "@spectrum-css/slider/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let id = null
+  export let disabled = false
+  export let min = 0
+  export let max = 100
+  export let step = 1
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.value)
+  }
+</script>
+
+<div>
+  <input
+    type="range"
+    {min}
+    {max}
+    {step}
+    {value}
+    {disabled}
+    {id}
+    on:change={onChange}
+  />
+</div>
+
+<style>
+  div {
+    display: grid;
+    place-items: center;
+  }
+
+  input {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+  }
+  input:focus {
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 2px solid var(--spectrum-global-color-gray-700);
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: var(--background);
+    cursor: pointer;
+    transition: background 130ms ease-out;
+    margin-top: -7px;
+  }
+  input[type="range"]::-moz-range-thumb {
+    border: 2px solid var(--spectrum-global-color-gray-700);
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: var(--background);
+    cursor: pointer;
+    transition: background 130ms ease-out;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+  }
+  input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+  }
+</style>

package/src/Form/Core/index.js

@@ -12,3 +12,4 @@ export { default as CoreDatePicker } from "./DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
+export { default as CoreSlider } from "./Slider.svelte"

package/src/Form/Search.svelte

@@ -10,6 +10,7 @@
   export let disabled = false
   export let updateOnChange = true
   export let quiet = false
+  export let inputRef
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -25,6 +26,7 @@
     {value}
     {placeholder}
     {quiet}
+    bind:inputRef
     on:change={onChange}
     on:click
     on:input

package/src/Form/Select.svelte

@@ -14,6 +14,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionIcon = option => option?.icon
+  export let getOptionColour = option => option?.colour
   export let quiet = false
   export let autoWidth = false
   export let sort = false
@@ -47,6 +48,7 @@
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}
+    {getOptionColour}
     on:change={onChange}
     on:click
   />

package/src/Form/Slider.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Field from "./Field.svelte"
+  import Slider from "./Core/Slider.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let min = 0
+  export let max = 100
+  export let step = 1
+  export let disabled = false
+  export let error = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Slider {disabled} {value} {min} {max} {step} on:change={onChange} />
+</Field>

package/src/Icon/Icon.svelte

@@ -47,7 +47,7 @@
   </svg>
   {#if tooltip && showTooltip}
     <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-      <Tooltip textWrapping direction={"bottom"} text={tooltip} />
+      <Tooltip textWrapping direction="bottom" text={tooltip} />
     </div>
   {/if}
 </div>

package/src/IconSideNav/IconSideNav.svelte

@@ -0,0 +1,14 @@
+<div class="icon-side-nav">
+  <slot />
+</div>
+
+<style>
+  .icon-side-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: var(--spacing-s);
+    gap: var(--spacing-xs);
+  }
+</style>

package/src/IconSideNav/IconSideNavItem.svelte

@@ -0,0 +1,56 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
+  export let icon
+  export let active = false
+  export let tooltip
+
+  let showTooltip = false
+</script>
+
+<div
+  class="icon-side-nav-item"
+  class:active
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:click
+>
+  <Icon name={icon} hoverable />
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction="right" text={tooltip} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .icon-side-nav-item {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 4px;
+    position: relative;
+    cursor: pointer;
+    transition: background 130ms ease-out;
+  }
+  .icon-side-nav-item:hover :global(svg),
+  .active :global(svg) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .active {
+    background: var(--spectrum-global-color-gray-300);
+  }
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: calc(100% - 4px);
+    top: 50%;
+    white-space: nowrap;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+</style>

package/src/Notification/NotificationDisplay.svelte

@@ -9,7 +9,7 @@
 <Portal target=".modal-container">
   <div class="notifications">
     {#each $notifications as { type, icon, message, id, dismissable, action, wide } (id)}
-      <div transition:fly={{ y: -30 }}>
+      <div transition:fly={{ y: 30 }}>
         <Notification
           {type}
           {icon}
@@ -27,7 +27,7 @@
 <style>
   .notifications {
     position: fixed;
-    top: 20px;
+    bottom: 40px;
     left: 0;
     right: 0;
     margin: 0 auto;

package/src/StatusLight/StatusLight.svelte

@@ -17,10 +17,13 @@
   export let negative = false
   export let disabled = false
   export let active = false
+  export let color = null
 </script>
 
 <div
   class="spectrum-StatusLight spectrum-StatusLight--size{size}"
+  class:custom={!!color}
+  style={`--color: ${color};`}
   class:spectrum-StatusLight--celery={celery}
   class:spectrum-StatusLight--yellow={yellow}
   class:spectrum-StatusLight--fuchsia={fuchsia}
@@ -36,6 +39,26 @@
   class:spectrum-StatusLight--negative={negative}
   class:spectrum-StatusLight--disabled={disabled}
   class:spectrum-StatusLight--active={active}
+  class:withText={!!$$slots.default}
 >
   <slot />
 </div>
+
+<style>
+  .spectrum-StatusLight {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    --spectrum-statuslight-info-text-gap: 4px;
+    min-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .spectrum-StatusLight.withText::before {
+    margin-right: 10px;
+  }
+  .custom::before {
+    background: var(--color) !important;
+  }
+</style>

package/src/Tabs/Tab.svelte

@@ -79,4 +79,10 @@
   .emphasized {
     color: var(--spectrum-global-color-blue-600);
   }
+  .spectrum-Tabs-item {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .spectrum-Tabs-item.is-selected {
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>