@budibase/bbui 2.13.11 → 2.13.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.13.11",
+  "version": "2.13.13",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -36,8 +36,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.13.11",
-    "@budibase/string-templates": "2.13.11",
+    "@budibase/shared-core": "2.13.13",
+    "@budibase/string-templates": "2.13.13",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -104,5 +104,5 @@
       }
     }
   },
-  "gitHead": "230e8d171197a2db905600d2914decbca281f8e0"
+  "gitHead": "81425a13bd4a09ac74f4d2931e8fbfc660eb9e31"
 }

package/src/Form/Checkbox.svelte

@@ -10,6 +10,7 @@
   export let disabled = false
   export let error = null
   export let size = "M"
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -18,6 +19,6 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Checkbox {error} {disabled} {text} {value} {size} on:change={onChange} />
 </Field>

package/src/Form/Combobox.svelte

@@ -11,6 +11,7 @@
   export let error = null
   export let placeholder = "Choose an option or type"
   export let options = []
+  export let helpText = null
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
 
@@ -27,7 +28,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Combobox
     {error}
     {disabled}

package/src/Form/Core/Checkbox.svelte

@@ -4,7 +4,6 @@
   import { createEventDispatcher } from "svelte"
 
   export let value = false
-  export let error = null
   export let id = null
   export let text = null
   export let disabled = false
@@ -22,7 +21,6 @@
 
 <label
   class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
-  class:is-invalid={!!error}
   class:checked={value}
   class:is-indeterminate={indeterminate}
   class:readonly

package/src/Form/Core/CheckboxGroup.svelte

@@ -6,7 +6,6 @@
   export let direction = "vertical"
   export let value = []
   export let options = []
-  export let error = null
   export let disabled = false
   export let readonly = false
   export let getOptionLabel = option => option
@@ -34,7 +33,6 @@
       <div
         title={getOptionLabel(option)}
         class="spectrum-Checkbox spectrum-FieldGroup-item"
-        class:is-invalid={!!error}
         class:readonly
       >
         <label

package/src/Form/Core/Combobox.svelte

@@ -10,7 +10,6 @@
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -39,12 +38,10 @@
 <div
   class="spectrum-InputGroup"
   class:is-focused={open || focus}
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
 >
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-invalid={!!error}
     class:is-disabled={disabled}
     class:is-focused={open || focus}
   >

package/src/Form/Core/DatePicker.svelte

@@ -10,7 +10,6 @@
   export let id = null
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let enableTime = true
   export let value = null
   export let placeholder = null
@@ -188,7 +187,6 @@
     <div
       id={flatpickrId}
       class:is-disabled={disabled || readonly}
-      class:is-invalid={!!error}
       class="flatpickr spectrum-InputGroup spectrum-Datepicker"
       class:is-focused={open}
       aria-readonly="false"
@@ -199,17 +197,7 @@
         on:click={flatpickr?.open}
         class="spectrum-Textfield spectrum-InputGroup-textfield"
         class:is-disabled={disabled}
-        class:is-invalid={!!error}
       >
-        {#if !!error}
-          <svg
-            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-icon-18-Alert" />
-          </svg>
-        {/if}
         <input
           {disabled}
           {readonly}
@@ -227,7 +215,6 @@
         class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
         tabindex="-1"
         class:is-disabled={disabled}
-        class:is-invalid={!!error}
         on:click={flatpickr?.open}
       >
         <svg

package/src/Form/Core/Dropzone.svelte

@@ -22,7 +22,6 @@
   export let handleFileTooLarge = null
   export let handleTooManyFiles = null
   export let gallery = true
-  export let error = null
   export let fileTags = []
   export let maximum = null
   export let extensions = "*"
@@ -222,7 +221,6 @@
   {#if showDropzone}
     <div
       class="spectrum-Dropzone"
-      class:is-invalid={!!error}
       class:disabled
       role="region"
       tabindex="0"
@@ -351,9 +349,6 @@
   .spectrum-Dropzone {
     user-select: none;
   }
-  .spectrum-Dropzone.is-invalid {
-    border-color: var(--spectrum-global-color-red-400);
-  }
   input[type="file"] {
     display: none;
   }

package/src/Form/Core/InputDropdown.svelte

@@ -14,7 +14,6 @@
   export let disabled = false
   export let readonly = false
   export let updateOnChange = true
-  export let error = null
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
@@ -111,27 +110,12 @@
   }
 </script>
 
-<div
-  class="spectrum-InputGroup"
-  class:is-invalid={!!error}
-  class:is-disabled={disabled}
->
+<div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-invalid={!!error}
     class:is-disabled={disabled}
     class:is-focused={focus}
   >
-    {#if error}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
-
     <input
       {id}
       on:click

package/src/Form/Core/Multiselect.svelte

@@ -6,7 +6,6 @@
   export let id = null
   export let placeholder = null
   export let disabled = false
-  export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -84,7 +83,6 @@
 <Picker
   on:loadMore
   {id}
-  {error}
   {disabled}
   {readonly}
   {fieldText}

package/src/Form/Core/Picker.svelte

@@ -14,7 +14,6 @@
 
   export let id = null
   export let disabled = false
-  export let error = null
   export let fieldText = ""
   export let fieldIcon = ""
   export let fieldColour = ""
@@ -113,7 +112,6 @@
   class="spectrum-Picker spectrum-Picker--sizeM"
   class:spectrum-Picker--quiet={quiet}
   {disabled}
-  class:is-invalid={!!error}
   class:is-open={open}
   aria-haspopup="listbox"
   on:click={onClick}
@@ -142,16 +140,6 @@
   >
     {fieldText}
   </span>
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-      aria-label="Folder"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
   <svg
     class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
     focusable="false"

package/src/Form/Core/PickerDropdown.svelte

@@ -16,7 +16,6 @@
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
-  export let error = null
   export let secondaryOptions = []
   export let primaryOptions = []
   export let secondaryFieldText = ""
@@ -105,14 +104,9 @@
   }
 </script>
 
-<div
-  class="spectrum-InputGroup"
-  class:is-invalid={!!error}
-  class:is-disabled={disabled}
->
+<div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-invalid={!!error}
     class:is-disabled={disabled}
     class:is-focused={focus}
     class:is-full-width={!secondaryOptions.length}

package/src/Form/Core/RadioGroup.svelte

@@ -6,7 +6,6 @@
   export let direction = "vertical"
   export let value = null
   export let options = []
-  export let error = null
   export let disabled = false
   export let readonly = false
   export let getOptionLabel = option => option
@@ -40,7 +39,6 @@
       <div
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
-        class:is-invalid={!!error}
         class:readonly
       >
         <input

package/src/Form/Core/RichTextField.svelte

@@ -5,14 +5,13 @@
   export let placeholder = null
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let height = null
   export let id = null
   export let fullScreenOffset = null
   export let easyMDEOptions = null
 </script>
 
-<div class:error>
+<div>
   <MarkdownEditor
     {value}
     {placeholder}
@@ -27,18 +26,4 @@
 </div>
 
 <style>
-  .error :global(.EasyMDEContainer .editor-toolbar) {
-    border-top-color: var(--spectrum-semantic-negative-color-default);
-    border-left-color: var(--spectrum-semantic-negative-color-default);
-    border-right-color: var(--spectrum-semantic-negative-color-default);
-  }
-  .error :global(.EasyMDEContainer .CodeMirror) {
-    border-bottom-color: var(--spectrum-semantic-negative-color-default);
-    border-left-color: var(--spectrum-semantic-negative-color-default);
-    border-right-color: var(--spectrum-semantic-negative-color-default);
-  }
-  .error :global(.EasyMDEContainer .editor-preview-side) {
-    border-bottom-color: var(--spectrum-semantic-negative-color-default);
-    border-right-color: var(--spectrum-semantic-negative-color-default);
-  }
 </style>

package/src/Form/Core/Select.svelte

@@ -6,7 +6,6 @@
   export let id = null
   export let placeholder = "Choose an option"
   export let disabled = false
-  export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -71,7 +70,6 @@
   on:loadMore
   {quiet}
   {id}
-  {error}
   {disabled}
   {readonly}
   {fieldText}

package/src/Form/Core/Stepper.svelte

@@ -7,7 +7,6 @@
   export let value = null
   export let placeholder = null
   export let disabled = false
-  export let error = null
   export let id = null
   export let readonly = false
   export let updateOnChange = true
@@ -98,20 +97,9 @@
 <div
   class="spectrum-Stepper"
   class:spectrum-Stepper--quiet={quiet}
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
   class:is-focused={focus}
 >
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
-
   <div class="spectrum-Textfield spectrum-Stepper-textfield">
     <input
       {disabled}

package/src/Form/Core/TextArea.svelte

@@ -6,7 +6,6 @@
   export let placeholder = null
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let id = null
   export let height = null
   export let minHeight = null
@@ -41,20 +40,9 @@
 <div
   style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
   class:is-focused={focus}
 >
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM
-      spectrum-Textfield-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
   <!-- prettier-ignore -->
   <textarea
     bind:this={textarea}

package/src/Form/Core/TextField.svelte

@@ -6,7 +6,6 @@
   export let placeholder = null
   export let type = "text"
   export let disabled = false
-  export let error = null
   export let id = null
   export let readonly = false
   export let updateOnChange = true
@@ -78,19 +77,9 @@
 <div
   class="spectrum-Textfield"
   class:spectrum-Textfield--quiet={quiet}
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
   class:is-focused={focus}
 >
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
   <input
     bind:this={field}
     {disabled}

package/src/Form/DatePicker.svelte

@@ -16,6 +16,7 @@
   export let appendTo = undefined
   export let ignoreTimezones = false
   export let range = false
+  export let helpText = null
   const dispatch = createEventDispatcher()
 
   const onChange = e => {
@@ -30,7 +31,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <DatePicker
     {error}
     {disabled}

package/src/Form/Dropzone.svelte

@@ -17,6 +17,7 @@
   export let fileTags = []
   export let maximum = undefined
   export let compact = false
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -25,7 +26,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <CoreDropzone
     {error}
     {disabled}

package/src/Form/EnvDropdown.svelte

@@ -16,6 +16,7 @@
   export let autofocus
   export let variables
   export let showModal
+  export let helpText = null
   export let environmentVariablesEnabled
   export let handleUpgradePanel
   const dispatch = createEventDispatcher()
@@ -25,7 +26,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <EnvDropdown
     {updateOnChange}
     {error}

package/src/Form/Field.svelte

@@ -1,11 +1,13 @@
 <script>
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import FieldLabel from "./FieldLabel.svelte"
+  import Icon from "../Icon/Icon.svelte"
 
   export let id = null
   export let label = null
   export let labelPosition = "above"
   export let error = null
+  export let helpText = null
   export let tooltip = ""
 </script>
 
@@ -17,6 +19,10 @@
     <slot />
     {#if error}
       <div class="error">{error}</div>
+    {:else if helpText}
+      <div class="helpText">
+        <Icon name="HelpOutline" /> <span>{helpText}</span>
+      </div>
     {/if}
   </div>
 </div>
@@ -39,4 +45,21 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
+
+  .helpText {
+    display: flex;
+    margin-top: var(--spectrum-global-dimension-size-75);
+    align-items: center;
+  }
+
+  .helpText :global(svg) {
+    width: 14px;
+    color: var(--grey-5);
+    margin-right: 6px;
+  }
+
+  .helpText span {
+    color: var(--grey-7);
+    font-size: var(--spectrum-global-dimension-font-size-75);
+  }
 </style>

package/src/Form/File.svelte

@@ -14,6 +14,7 @@
   export let title = null
   export let value = null
   export let tooltip = null
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -22,7 +23,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error} {tooltip}>
+<Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <CoreFile
     {error}
     {disabled}

package/src/Form/Input.svelte

@@ -15,6 +15,7 @@
   export let quiet = false
   export let autofocus
   export let autocomplete
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -23,7 +24,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <TextField
     {updateOnChange}
     {error}

package/src/Form/InputDropdown.svelte

@@ -15,6 +15,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let autofocus
+  export let helpText = null
   export let options = []
 
   const dispatch = createEventDispatcher()
@@ -29,7 +30,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <InputDropdown
     {updateOnChange}
     {error}

package/src/Form/Multiselect.svelte

@@ -18,6 +18,7 @@
   export let autocomplete = false
   export let searchTerm = null
   export let customPopoverHeight
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -26,7 +27,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Multiselect
     {error}
     {disabled}

package/src/Form/PickerDropdown.svelte

@@ -26,6 +26,7 @@
   export let secondaryOptions = []
   export let searchTerm
   export let showClearIcon = true
+  export let helpText = null
 
   let primaryLabel
   let secondaryLabel
@@ -93,7 +94,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <PickerDropdown
     {searchTerm}
     {autocomplete}

package/src/Form/RadioGroup.svelte

@@ -13,6 +13,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionTitle = option => extractProperty(option, "label")
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -27,7 +28,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <RadioGroup
     {error}
     {disabled}

package/src/Form/RichTextField.svelte

@@ -13,6 +13,7 @@
   export let id = null
   export let fullScreenOffset = null
   export let easyMDEOptions = null
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -21,7 +22,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <RichTextField
     {error}
     {disabled}