@budibase/bbui 0.9.189 → 0.9.190-alpha.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.189",
+  "version": "0.9.190-alpha.11",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -51,6 +51,7 @@
     "@spectrum-css/fieldlabel": "^3.0.1",
     "@spectrum-css/icon": "^3.0.1",
     "@spectrum-css/illustratedmessage": "^3.0.2",
+    "@spectrum-css/inlinealert": "^2.0.1",
     "@spectrum-css/inputgroup": "^3.0.2",
     "@spectrum-css/label": "^2.0.10",
     "@spectrum-css/link": "^3.1.1",
@@ -81,5 +82,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "c71eab23f0e7c098da073a5765980b4b96f7fa13"
+  "gitHead": "68978c5ed10f9cf29edfaa054348c4e45aa3d428"
 }

package/src/Form/Combobox.svelte

@@ -6,6 +6,7 @@
   export let value = null
   export let label = undefined
   export let disabled = false
+  export let readonly = false
   export let labelPosition = "above"
   export let error = null
   export let placeholder = "Choose an option or type"
@@ -33,8 +34,11 @@
     {value}
     {options}
     {placeholder}
+    {readonly}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}
+    on:pick
+    on:type
   />
 </Field>

package/src/Form/Core/Checkbox.svelte

@@ -21,6 +21,7 @@
 <label
   class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
   class:is-invalid={!!error}
+  class:checked={value}
 >
   <input
     checked={value}
@@ -50,6 +51,16 @@
 </label>
 
 <style>
+  .spectrum-Checkbox--sizeL .spectrum-Checkbox-checkmark {
+    transform: scale(1.1);
+    left: 55%;
+    top: 55%;
+  }
+  .spectrum-Checkbox--sizeXL .spectrum-Checkbox-checkmark {
+    transform: scale(1.2);
+    left: 60%;
+    top: 60%;
+  }
   .spectrum-Checkbox-input {
     opacity: 0;
   }

package/src/Form/Core/Combobox.svelte

@@ -9,6 +9,7 @@
   export let id = null
   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
@@ -40,8 +41,15 @@
     open = false
   }
 
-  const onChange = e => {
-    selectOption(e.target.value)
+  const onType = e => {
+    const value = e.target.value
+    dispatch("type", value)
+    selectOption(value)
+  }
+
+  const onPick = value => {
+    dispatch("pick", value)
+    selectOption(value)
   }
 </script>
 
@@ -62,10 +70,11 @@
       type="text"
       on:focus={() => (focus = true)}
       on:blur={() => (focus = false)}
-      on:change={onChange}
+      on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}
       {disabled}
+      {readonly}
       class="spectrum-Textfield-input spectrum-InputGroup-input"
     />
   </div>
@@ -99,7 +108,7 @@
               role="option"
               aria-selected="true"
               tabindex="0"
-              on:click={() => selectOption(getOptionValue(option))}
+              on:click={() => onPick(getOptionValue(option))}
             >
               <span class="spectrum-Menu-itemLabel"
                 >{getOptionLabel(option)}</span

package/src/Form/Core/TextField.svelte

@@ -11,19 +11,20 @@
   export let readonly = false
   export let updateOnChange = true
   export let quiet = false
+  export let dataCy
 
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = value => {
+  const updateValue = newValue => {
     if (readonly) {
       return
     }
     if (type === "number") {
-      const float = parseFloat(value)
-      value = isNaN(float) ? null : float
+      const float = parseFloat(newValue)
+      newValue = isNaN(float) ? null : float
     }
-    dispatch("change", value)
+    dispatch("change", newValue)
   }
 
   const onFocus = () => {
@@ -78,6 +79,7 @@
     {disabled}
     {readonly}
     {id}
+    data-cy={dataCy}
     value={value || ""}
     placeholder={placeholder || ""}
     on:click

package/src/Form/Input.svelte

@@ -13,6 +13,7 @@
   export let error = null
   export let updateOnChange = true
   export let quiet = false
+  export let dataCy
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -23,6 +24,7 @@
 
 <Field {label} {labelPosition} {error}>
   <TextField
+    {dataCy}
     {updateOnChange}
     {error}
     {disabled}

package/src/InlineAlert/InlineAlert.svelte

@@ -0,0 +1,56 @@
+<script>
+  import "@spectrum-css/inlinealert/dist/index-vars.css"
+  import Button from "../Button/Button.svelte"
+
+  export let type = "info"
+  export let header = ""
+  export let message = ""
+  export let onConfirm = undefined
+
+  $: icon = selectIcon(type)
+  // if newlines used, convert them to different elements
+  $: split = message.split("\n")
+
+  function selectIcon(alertType) {
+    switch (alertType) {
+      case "error":
+      case "negative":
+        return "Alert"
+      case "success":
+        return "CheckmarkCircle"
+      case "help":
+        return "Help"
+      default:
+        return "Info"
+    }
+  }
+</script>
+
+<div class="spectrum-InLineAlert spectrum-InLineAlert--{type}">
+  <svg
+    class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-icon-18-{icon}" />
+  </svg>
+  <div class="spectrum-InLineAlert-header">{header}</div>
+  {#each split as splitMsg}
+    <div class="spectrum-InLineAlert-content">{splitMsg}</div>
+  {/each}
+  {#if onConfirm}
+    <div class="spectrum-InLineAlert-footer">
+      <Button secondary on:click={onConfirm}>OK</Button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spectrum-InLineAlert {
+    --spectrum-semantic-negative-border-color: #e34850;
+    --spectrum-semantic-positive-border-color: #2d9d78;
+    --spectrum-semantic-positive-icon-color: #2d9d78;
+    --spectrum-semantic-negative-icon-color: #e34850;
+    min-width: 100px;
+  }
+</style>

package/src/Label/Label.svelte

@@ -1,16 +1,67 @@
 <script>
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
 
   export let size = "M"
+  export let tooltip = ""
+  export let showTooltip = false
 </script>
 
-<label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
-  <slot />
-</label>
+{#if tooltip}
+  <div class="container">
+    <label
+      for=""
+      class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
+    >
+      <slot />
+    </label>
+    <div class="icon-container">
+      <div
+        class="icon"
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+      >
+        <Icon name="InfoOutline" size="S" disabled={true} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
+    <slot />
+  </label>
+{/if}
 
 <style>
   label {
     padding: 0;
     white-space: nowrap;
   }
+  .container {
+    display: flex;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 1px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 1;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
 </style>

package/src/Tooltip/Tooltip.svelte

@@ -3,12 +3,22 @@
 
   export let direction = "top"
   export let text = ""
+  export let textWrapping = false
 </script>
 
-<span class="u-tooltip-showOnHover tooltip">
-  <slot />
-  <div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
+<!-- Showing / Hiding a text wrapped tooltip should be handled outside the component -->
+{#if textWrapping}
+  <span class="spectrum-Tooltip spectrum-Tooltip--{direction} is-open">
     <span class="spectrum-Tooltip-label">{text}</span>
     <span class="spectrum-Tooltip-tip" />
-  </div>
-</span>
+  </span>
+{:else}
+  <!-- The default show on hover tooltip does not support text wrapping -->
+  <span class="u-tooltip-showOnHover tooltip">
+    <slot />
+    <div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
+      <span class="spectrum-Tooltip-label">{text}</span>
+      <span class="spectrum-Tooltip-tip" />
+    </div>
+  </span>
+{/if}

package/src/index.js

@@ -58,6 +58,7 @@ export { default as Pagination } from "./Pagination/Pagination.svelte"
 export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
+export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"