Merge branch 'spectrum-bbui' into spectrum/kevins-bits-and-bobs

packages/bbui/package.json

@@ -46,9 +46,11 @@
     "@spectrum-css/checkbox": "^3.0.2",
     "@spectrum-css/dialog": "^3.0.1",
     "@spectrum-css/divider": "^1.0.1",
+    "@spectrum-css/dropzone": "^3.0.2",
     "@spectrum-css/fieldgroup": "^3.0.2",
     "@spectrum-css/fieldlabel": "^3.0.1",
     "@spectrum-css/icon": "^3.0.1",
+    "@spectrum-css/illustratedmessage": "^3.0.2",
     "@spectrum-css/inputgroup": "^3.0.2",
     "@spectrum-css/label": "^2.0.9",
     "@spectrum-css/link": "^3.1.1",

packages/bbui/src/Dropzone/Dropzone.svelte

@@ -1,295 +0,0 @@
-<script>
-  import { Heading, Body, Button } from "../"
-  import { FILE_TYPES } from "./fileTypes"
-
-  const BYTES_IN_KB = 1000
-  const BYTES_IN_MB = 1000000
-
-  export let icons = {
-    image: "fas fa-file-image",
-    code: "fas fa-file-code",
-    file: "fas fa-file",
-    fileUpload: "fas fa-upload",
-  }
-
-  export let files = []
-  export let fileSizeLimit = BYTES_IN_MB * 20
-  export let processFiles
-  export let handleFileTooLarge
-
-  let selectedImageIdx = 0
-  let fileDragged = false
-  // Generate a random ID so that multiple dropzones on the page don't conflict
-  let id = Math.random()
-    .toString(36)
-    .substring(7)
-
-  $: selectedImage = files ? files[selectedImageIdx] : null
-
-  function determineFileIcon(extension) {
-    const ext = extension.toLowerCase()
-
-    if (FILE_TYPES.IMAGE.includes(ext)) return icons.image
-    if (FILE_TYPES.CODE.includes(ext)) return icons.code
-
-    return icons.file
-  }
-
-  async function processFileList(fileList) {
-    if (Array.from(fileList).some(file => file.size >= fileSizeLimit)) {
-      handleFileTooLarge(fileSizeLimit, file)
-      return
-    }
-
-    const processedFiles = await processFiles(fileList)
-
-    files = [...processedFiles, ...files]
-    selectedImageIdx = 0
-  }
-
-  async function removeFile() {
-    files.splice(selectedImageIdx, 1)
-    files = files
-    selectedImageIdx = 0
-  }
-
-  function navigateLeft() {
-    selectedImageIdx -= 1
-  }
-
-  function navigateRight() {
-    selectedImageIdx += 1
-  }
-
-  function handleFile(evt) {
-    processFileList(evt.target.files)
-  }
-
-  function handleDragOver(evt) {
-    evt.preventDefault()
-    fileDragged = true
-  }
-
-  function handleDragLeave(evt) {
-    evt.preventDefault()
-    fileDragged = false
-  }
-
-  function handleDrop(evt) {
-    evt.preventDefault()
-    processFileList(evt.dataTransfer.files)
-    fileDragged = false
-  }
-</script>
-
-<div
-  class="dropzone"
-  on:dragover={handleDragOver}
-  on:dragleave={handleDragLeave}
-  on:dragenter={handleDragOver}
-  on:drop={handleDrop}
-  class:fileDragged>
-  {#if selectedImage}
-    <ul>
-      <li>
-        <header>
-          <div>
-            <i class={determineFileIcon(selectedImage.extension)} />
-            <span class="filename">{selectedImage.name}</span>
-          </div>
-          <p>
-            {#if selectedImage.size <= BYTES_IN_MB}
-              {selectedImage.size / BYTES_IN_KB}KB
-            {:else}{selectedImage.size / BYTES_IN_MB}MB{/if}
-          </p>
-        </header>
-        <div class="delete-button" on:click={removeFile}>
-          <i class="ri-close-circle-fill" />
-        </div>
-        {#if selectedImageIdx !== 0}
-          <div class="nav left" on:click={navigateLeft}>
-            <i class="ri-arrow-left-circle-fill" />
-          </div>
-        {/if}
-        <img alt="preview" src={selectedImage.url} />
-        {#if selectedImageIdx !== files.length - 1}
-          <div class="nav right" on:click={navigateRight}>
-            <i class="ri-arrow-right-circle-fill" />
-          </div>
-        {/if}
-      </li>
-    </ul>
-  {/if}
-  <i class={icons.fileUpload} />
-  <input {id} type="file" multiple on:change={handleFile} {...$$restProps} />
-  <i class="ri-upload-cloud-line" />
-  <p class="drop">Drop your files here</p>
-  <label for={id}>Select a file from your computer</label>
-</div>
-
-<style>
-  .dropzone {
-    padding: var(--spacing-l);
-    border: 2px dashed var(--grey-4);
-    text-align: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .fileDragged {
-    border: 2px dashed var(--grey-7);
-    background: var(--blue-light);
-  }
-
-  input[type="file"] {
-    display: none;
-  }
-
-  label {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    cursor: pointer;
-    overflow: hidden;
-    color: var(--grey-7);
-    text-rendering: optimizeLegibility;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
-    -webkit-box-align: center;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    text-decoration: underline;
-  }
-
-  .drop {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    margin: 12px 0;
-  }
-
-  div.nav {
-    padding: var(--spacing-xs);
-    position: absolute;
-    display: flex;
-    align-items: center;
-    bottom: var(--spacing-s);
-    border-radius: 5px;
-    transition: 0.2s transform;
-  }
-
-  .nav:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
-
-  .left {
-    left: var(--spacing-s);
-  }
-
-  .right {
-    right: var(--spacing-s);
-  }
-
-  li {
-    position: relative;
-    height: 300px;
-    background: var(--grey-7);
-    display: flex;
-    justify-content: center;
-    border-radius: 10px;
-  }
-
-  img {
-    border-radius: 10px;
-    width: 100%;
-    box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15);
-    object-fit: contain;
-  }
-
-  i {
-    font-size: 2rem;
-    color: var(--ink);
-  }
-
-  i:hover {
-    cursor: pointer;
-    color: var(--background);
-  }
-
-  .file-icon {
-    color: var(--background);
-    font-size: 2em;
-    margin-right: var(--spacing-s);
-  }
-
-  ul {
-    padding: 0;
-    display: grid;
-    grid-gap: var(--spacing-s);
-    list-style-type: none;
-    width: 100%;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    background: linear-gradient(
-      180deg,
-      rgb(255, 255, 255),
-      rgba(255, 255, 255, 0)
-    );
-    width: 100%;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    height: 60px;
-  }
-
-  header > div {
-    color: var(--ink);
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    margin-left: var(--spacing-m);
-    width: 60%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .filename {
-    overflow: hidden;
-    margin-left: 5px;
-    text-overflow: ellipsis;
-  }
-
-  header > p {
-    color: var(--grey-5);
-    margin-right: var(--spacing-m);
-  }
-
-  .delete-button {
-    position: absolute;
-    top: var(--spacing-s);
-    right: var(--spacing-s);
-    padding: var(--spacing-s);
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .delete-button i {
-    font-size: 2em;
-    color: var(--ink);
-  }
-
-  .delete-button:hover {
-    cursor: pointer;
-    color: var(--red);
-  }
-</style>

packages/bbui/src/Dropzone/Dropzone.svench

@@ -1,17 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Dropzone from "./Dropzone.svelte";
-
-  async function processFiles(files) {
-    console.log("Processing", files);
-    return files;
-  }
-
-  function handleFileTooLarge() {
-    alert("File too large.");
-  }
-</script>
-
-<View name="dropzone">
-  <Dropzone {processFiles} {handleFileTooLarge} />
-</View>

packages/bbui/src/Dropzone/fileTypes.js

@@ -1,5 +0,0 @@
-export const FILE_TYPES = {
-  IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"],
-  CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
-  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
-}

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -0,0 +1,334 @@
+<script>
+  import "@spectrum-css/dropzone/dist/index-vars.css"
+  import "@spectrum-css/typography/dist/index-vars.css"
+  import "@spectrum-css/illustratedmessage/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  import { generateID } from "../../utils/helpers"
+  import Icon from "../../Icon/Icon.svelte"
+
+  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
+
+  export let value = []
+  export let id = null
+  export let disabled = false
+  export let fileSizeLimit = BYTES_IN_MB * 20
+  export let processFiles = null
+  export let handleFileTooLarge = null
+
+  const dispatch = createEventDispatcher()
+  const imageExtensions = [
+    "png",
+    "tiff",
+    "gif",
+    "raw",
+    "jpg",
+    "jpeg",
+    "svg",
+    "bmp",
+    "jfif",
+  ]
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+
+  const fieldId = id || generateID()
+  let selectedImageIdx = 0
+  let fileDragged = false
+  $: selectedImage = value?.[selectedImageIdx] ?? null
+  $: fileCount = value?.length ?? 0
+  $: isImage = imageExtensions.includes(selectedImage?.extension?.toLowerCase())
+
+  async function processFileList(fileList) {
+    if (
+      handleFileTooLarge &&
+      Array.from(fileList).some(file => file.size >= fileSizeLimit)
+    ) {
+      handleFileTooLarge(fileSizeLimit, value)
+      return
+    }
+    if (processFiles) {
+      const processedFiles = await processFiles(fileList)
+      const newValue = [...value, ...processedFiles]
+      dispatch("change", newValue)
+      selectedImageIdx = newValue.length - 1
+    }
+  }
+
+  async function removeFile() {
+    dispatch(
+      "change",
+      value.filter((x, idx) => idx !== selectedImageIdx)
+    )
+    selectedImageIdx = 0
+  }
+
+  function navigateLeft() {
+    selectedImageIdx -= 1
+  }
+
+  function navigateRight() {
+    selectedImageIdx += 1
+  }
+
+  function handleFile(evt) {
+    processFileList(evt.target.files)
+  }
+
+  function handleDragOver(evt) {
+    evt.preventDefault()
+    fileDragged = true
+  }
+
+  function handleDragLeave(evt) {
+    evt.preventDefault()
+    fileDragged = false
+  }
+
+  function handleDrop(evt) {
+    evt.preventDefault()
+    processFileList(evt.dataTransfer.files)
+    fileDragged = false
+  }
+</script>
+
+<div class="container">
+  {#if selectedImage}
+    <div class="gallery">
+      <div class="title">
+        <div class="filename">{selectedImage.name}</div>
+        <div class="filesize">
+          {#if selectedImage.size <= BYTES_IN_MB}
+            {`${selectedImage.size / BYTES_IN_KB} KB`}
+          {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+        </div>
+        {#if !disabled}
+          <div class="delete-button" on:click={removeFile}>
+            <Icon name="Close" />
+          </div>
+        {/if}
+      </div>
+      {#if isImage}
+        <img alt="preview" src={selectedImage.url} />
+      {:else}
+        <div class="placeholder">
+          <div class="extension">{selectedImage.extension}</div>
+          <div>Preview not supported</div>
+        </div>
+      {/if}
+      <div
+        class="nav left"
+        class:visible={selectedImageIdx > 0}
+        on:click={navigateLeft}>
+        <Icon name="ChevronLeft" />
+      </div>
+      <div
+        class="nav right"
+        class:visible={selectedImageIdx < fileCount - 1}
+        on:click={navigateRight}>
+        <Icon name="ChevronRight" />
+      </div>
+      <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+    </div>
+  {/if}
+  <div
+    class="spectrum-Dropzone"
+    class:disabled
+    role="region"
+    tabindex="0"
+    on:dragover={handleDragOver}
+    on:dragleave={handleDragLeave}
+    on:dragenter={handleDragOver}
+    on:drop={handleDrop}
+    class:is-dragged={fileDragged}>
+    <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
+      <input
+        id={fieldId}
+        {disabled}
+        type="file"
+        multiple
+        on:change={handleFile} />
+      <svg
+        class="spectrum-IllustratedMessage-illustration"
+        width="125"
+        height="60"
+        viewBox="0 0 199 97.7"><defs>
+          <style>
+            .cls-1,
+            .cls-2 {
+              fill: none;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            }
+            .cls-1 {
+              stroke-width: 3px;
+            }
+            .cls-2 {
+              stroke-width: 2px;
+            }
+          </style>
+        </defs>
+        <path
+          class="cls-1"
+          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" />
+        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+        <path
+          class="cls-1"
+          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" />
+        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+        <path
+          class="cls-2"
+          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" />
+        <path
+          class="cls-2"
+          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" />
+        <path
+          class="cls-2"
+          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" />
+        <path
+          class="cls-1"
+          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" />
+        <rect
+          class="cls-1"
+          x="1.5"
+          y="34.5"
+          width="58"
+          height="39"
+          rx="2"
+          ry="2" />
+      </svg>
+      <h2
+        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">
+        Drag and drop your file
+      </h2>
+      {#if !disabled}
+        <p
+          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description">
+          <label for={fieldId} class="spectrum-Link">Select a file to upload</label>
+          <br />
+          from your computer
+        </p>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    --spectrum-dropzone-padding: var(--spectrum-global-dimension-size-400);
+    --spectrum-heading-l-text-size: var(
+      --spectrum-global-dimension-font-size-400
+    );
+  }
+  .container * {
+    font-family: "Inter", sans-serif !important;
+  }
+
+  .gallery,
+  .spectrum-Dropzone {
+    user-select: none;
+  }
+  input[type="file"] {
+    display: none;
+  }
+
+  .gallery {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+    font-size: var(--spectrum-alias-item-text-size-m);
+    box-sizing: border-box;
+    border: var(--spectrum-alias-border-size-thin)
+      var(--spectrum-alias-border-color) solid;
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    padding: 10px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+  .placeholder,
+  img {
+    height: 120px;
+    max-width: 100%;
+    object-fit: contain;
+    margin: 20px 30px;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .filename {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 0;
+    margin-right: 10px;
+  }
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .extension {
+    color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+    font-weight: 500;
+    margin-bottom: 5px;
+  }
+
+  .nav {
+    padding: var(--spacing-xs);
+    position: absolute;
+    top: 50%;
+    border-radius: 5px;
+    display: none;
+    transition: all 0.3s;
+  }
+  .nav.visible {
+    display: block;
+  }
+  .nav:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
+  .left {
+    left: 5px;
+  }
+  .right {
+    right: 5px;
+  }
+  i {
+    font-size: 2rem;
+    color: var(--ink);
+  }
+  i:hover {
+    cursor: pointer;
+    color: var(--background);
+  }
+  .delete-button {
+    transition: all 0.3s;
+    margin-left: 10px;
+  }
+  .delete-button i {
+    font-size: 2em;
+  }
+  .delete-button:hover {
+    cursor: pointer;
+    color: var(--red);
+  }
+
+  .spectrum-Dropzone.disabled {
+    pointer-events: none;
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+  .disabled .spectrum-Heading--sizeL {
+    color: var(--spectrum-alias-text-color-disabled);
+  }
+</style>

packages/bbui/src/Form/Core/index.js

@@ -8,3 +8,4 @@ export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker.svelte"
+export { default as CoreDropzone } from "./Dropzone.svelte"

packages/bbui/src/Form/Dropzone.svelte

@@ -0,0 +1,31 @@
+<script>
+  import Field from "./Field.svelte"
+  import CoreDropzone from "./Core/Dropzone.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = []
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let error = null
+  export let fileSizeLimit = undefined
+  export let processFiles = undefined
+  export let handleFileTooLarge = undefined
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled} {error}>
+  <CoreDropzone
+    {error}
+    {disabled}
+    {value}
+    {fileSizeLimit}
+    {processFiles}
+    {handleFileTooLarge}
+    on:change={onChange} />
+</Field>

packages/bbui/src/Icon/Icon.svelte

@@ -10,6 +10,8 @@
   export let m = false
   export let l = false
   export let xl = false
+  export let hoverable = false
+  export let disabled = false
 
   $: rotation = directions.indexOf(direction) * 45
   $: useDefault = ![s, m, l, xl].includes(true)
@@ -17,6 +19,8 @@
 
 <svg
   on:click
+  class:hoverable
+  class:disabled
   class:spectrum-Icon--sizeS={s}
   class:spectrum-Icon--sizeM={m || useDefault}
   class:spectrum-Icon--sizeL={l}
@@ -28,3 +32,19 @@
   style={`transform: rotate(${rotation}deg)`}>
   <use xlink:href="#spectrum-icon-18-{name}" />
 </svg>
+
+<style>
+  svg.hoverable {
+    pointer-events: all;
+    transition: color var(--spectrum-global-animation-duration-100, 130ms);
+  }
+  svg.hoverable:hover {
+    color: var(--spectrum-alias-icon-color-selected);
+    cursor: pointer;
+  }
+
+  svg.disabled {
+    color: var(--spectrum-global-color-gray-500) !important;
+    pointer-events: none !important;
+  }
+</style>

packages/bbui/src/index.js

@@ -8,7 +8,7 @@ export { default as Input } from "./Form/Input.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"
 export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
-export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
+export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
 export { default as Avatar } from "./Avatar/Avatar.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"

packages/bbui/yarn.lock

@@ -111,6 +111,11 @@
   dependencies:
     "@spectrum-css/vars" "^3.0.2"
 
+"@spectrum-css/dropzone@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.2.tgz#34f137851054442b219fed7f32006b93fc5e0bcf"
+  integrity sha512-BuBBzm5re6lM0AWgd6V+mI5eEGnnmFEtcFiJBEn9jYNEQYgflFhvnERUt89jMX5WmspiecwI2JBWJFrtFsOzug==
+
 "@spectrum-css/fieldgroup@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846"
@@ -126,6 +131,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3"
   integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q==
 
+"@spectrum-css/illustratedmessage@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0"
+  integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA==
+
 "@spectrum-css/inputgroup@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -52,9 +52,9 @@
     border-radius: var(--border-radius-m);
     transition: 0.3s all ease;
     box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
-    background-color: var(--ink);
     font-size: 16px;
-    color: var(--background);
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--grey-9);
   }
   .block.selected,
   .block:hover {
@@ -77,9 +77,9 @@
   header .label {
     font-size: 14px;
     padding: var(--spacing-s);
-    color: var(--grey-8);
     border-radius: var(--border-radius-m);
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--grey-2);
+    color: var(--grey-8);
   }
   header i {
     font-size: 20px;
@@ -93,22 +93,12 @@
   }
 
   .ACTION {
-    background-color: var(--background);
-    color: var(--ink);
   }
 
   .TRIGGER {
-    background-color: var(--ink);
-    color: var(--background);
-  }
-  .TRIGGER header .label {
-    background-color: var(--grey-9);
-    color: var(--grey-5);
   }
 
   .LOGIC {
-    background-color: var(--background);
-    color: var(--ink);
   }
 
   p {

packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte

@@ -29,14 +29,13 @@
   onConfirm={createAutomation}
   disabled={!valid}>
   <Input bind:value={name} label="Name" />
-  <div slot="footer">
   <a
+    slot="footer"
     target="_blank"
     href="https://docs.budibase.com/automate/introduction-to-automate">
     <i class="ri-information-line" />
     <span>Learn about automations</span>
   </a>
-  </div>
 </ModalContent>
 
 <style>

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -49,26 +49,22 @@
   }
 </script>
 
-<div class="block-label">{block.name}</div>
+<div class="fields">
-{#each inputs as [key, value]}
+  <div class="block-label">{block.name}</div>
+  {#each inputs as [key, value]}
     <div class="block-field">
-    <Label extraSmall grey>{value.title}</Label>
+      <Label>{value.title}</Label>
       {#if value.type === 'string' && value.enum}
-      <Select bind:value={block.inputs[key]} extraThin secondary>
+        <Select
-        <option value="">Choose an option</option>
+          bind:value={block.inputs[key]}
-        {#each value.enum as option, idx}
+          options={value.enum}
-          <option value={option}>
+          getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)} />
-            {value.pretty ? value.pretty[idx] : option}
-          </option>
-        {/each}
-      </Select>
       {:else if value.customType === 'password'}
-      <Input type="password" extraThin bind:value={block.inputs[key]} />
+        <Input type="password" bind:value={block.inputs[key]} />
       {:else if value.customType === 'email'}
         <DrawerBindableInput
           panel={AutomationBindingPanel}
           type={'email'}
-        extraThin
           value={block.inputs[key]}
           on:change={e => (block.inputs[key] = e.detail)}
           {bindings} />
@@ -84,27 +80,33 @@
         <DrawerBindableInput
           panel={AutomationBindingPanel}
           type={value.customType}
-        extraThin
           value={block.inputs[key]}
           on:change={e => (block.inputs[key] = e.detail)}
           {bindings} />
       {/if}
     </div>
-{/each}
+  {/each}
+</div>
 {#if stepId === 'WEBHOOK'}
-  <Button secondary on:click={() => webhookModal.show()}>
+  <Button secondary on:click={() => webhookModal.show()}>Set Up Webhook</Button>
-    Set Up Webhook
-  </Button>
 {/if}
 
 <style>
+  .fields {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+  }
+
   .block-field {
     display: grid;
   }
 
   .block-label {
     font-weight: 500;
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
   }
 </style>

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -19,30 +19,24 @@
   }
 </script>
 
-<div class="block-field">
+<Select
-  <Select bind:value={value.tableId} extraThin secondary>
+  bind:value={value.tableId}
-    <option value="">Choose an option</option>
+  options={$tables.list}
-    {#each $tables.list as table}
+  getOptionLabel={table => table.name}
-      <option value={table._id}>{table.name}</option>
+  getOptionValue={table => table._id} />
-    {/each}
-  </Select>
-</div>
 
 {#if schemaFields.length}
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if !schema.autocolumn}
         {#if schemaHasOptions(schema)}
-          <Select label={field} extraThin secondary bind:value={value[field]}>
+          <Select
-            <option value="">Choose an option</option>
+            label={field}
-            {#each schema.constraints.inclusion as option}
+            bind:value={value[field]}
-              <option value={option}>{option}</option>
+            options={schema.constraints.inclusion} />
-            {/each}
-          </Select>
         {:else if schema.type === 'string' || schema.type === 'number'}
           <DrawerBindableInput
             panel={AutomationBindingPanel}
-            extraThin
             value={value[field]}
             on:change={e => (value[field] = e.detail)}
             label={field}
@@ -57,8 +51,8 @@
 <style>
   .schema-fields {
     display: grid;
-    grid-gap: var(--spacing-xl);
+    grid-gap: var(--spacing-s);
-    margin-top: var(--spacing-xl);
+    margin-top: var(--spacing-s);
   }
   .schema-fields :global(label) {
     text-transform: capitalize;

packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte

@@ -6,6 +6,24 @@
     name,
     type,
   }))
+  const typeOptions = [
+    {
+      label: "Text",
+      value: "string",
+    },
+    {
+      label: "Number",
+      value: "number",
+    },
+    {
+      label: "Boolean",
+      value: "boolean",
+    },
+    {
+      label: "DateTime",
+      value: "datetime",
+    },
+  ]
 
   function addField() {
     const newValue = { ...value }
@@ -22,7 +40,7 @@
   const fieldNameChanged = originalName => e => {
     // reconstruct using fieldsArray, so field order is preserved
     let entries = [...fieldsArray]
-    const newName = e.target.value
+    const newName = e.detail
     if (newName) {
       entries.find(f => f.name === originalName).name = newName
     } else {
@@ -46,16 +64,9 @@
         placeholder="Enter field name"
         on:change={fieldNameChanged(field.name)} />
       <Select
-        secondary
-        extraThin
         value={field.type}
-        on:blur={e => (value[field.name] = e.target.value)}>
+        on:change={e => (value[field.name] = e.target.value)}
-        <option>string</option>
+        options={typeOptions} />
-        <option>number</option>
-        <option>boolean</option>
-        <option>datetime</option>
-      </Select>
-
       <i
         class="remove-field ri-delete-bin-line"
         on:click={() => removeField(field.name)} />

packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte

@@ -1,9 +1,8 @@
 <script>
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
+  import { notifications, Icon, Button, Modal } from "@budibase/bbui"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import { Button, Modal } from "@budibase/bbui"
   import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
 
   let webhookModal
@@ -30,7 +29,9 @@
       automation: $automationStore.selectedAutomation.automation,
     })
     if (result.status === 200) {
-      notifications.success(`Automation ${automation.name} triggered successfully.`)
+      notifications.success(
+        `Automation ${automation.name} triggered successfully.`
+      )
     } else {
       notifications.error(`Failed to trigger automation ${automation.name}.`)
     }
@@ -47,17 +48,19 @@
 
 <div class="title">
   <h1>Setup</h1>
-  <i
+  <Icon
-    class:highlighted={automationLive}
+    l
-    class:hoverable={automationLive}
+    disabled={!automationLive}
-    on:click={() => setAutomationLive(false)}
+    hoverable={automationLive}
-    class="ri-stop-circle-fill" />
+    name="PauseCircle"
-  <i
+    on:click={() => setAutomationLive(false)} />
-    class:highlighted={!automationLive}
+  <Icon
-    class:hoverable={!automationLive}
+    l
+    name="PlayCircle"
+    disabled={automationLive}
+    hoverable={!automationLive}
     data-cy="activate-automation"
-    on:click={() => setAutomationLive(true)}
+    on:click={() => setAutomationLive(true)} />
-    class="ri-play-circle-fill" />
 </div>
 {#if $automationStore.selectedBlock}
   <AutomationBlockSetup
@@ -92,29 +95,10 @@
     margin: 0;
     flex: 1 1 auto;
   }
-  .title i {
-    font-size: 20px;
-    color: var(--grey-5);
-  }
-  .title i.highlighted {
-    color: var(--ink);
-  }
-  .title i.hoverable:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
 
   .block-label {
     font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
-
-  .footer {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: stretch;
-  }
 </style>

packages/builder/src/components/automation/SetupPanel/TableSelector.svelte

@@ -5,11 +5,8 @@
   export let value
 </script>
 
-<div class="block-field">
+<Select
-  <Select bind:value secondary extraThin>
+  bind:value
-    <option value="">Choose an option</option>
+  options={$tables.list}
-    {#each $tables.list as table}
+  getOptionLabel={table => table.name}
-      <option value={table._id}>{table.name}</option>
+  getOptionValue={table => table._id} />
-    {/each}
-  </Select>
-</div>

packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte

@@ -58,12 +58,13 @@
       bindable value{propCount > 1 ? 's' : ''}.
     </p>
   {/if}
-  <div slot="footer">
+  <a
-    <a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/steps/triggers">
     <i class="ri-information-line" />
     <span>Learn about webhooks</span>
   </a>
-  </div>
 </ModalContent>
 
 <style>

packages/builder/src/components/automation/Shared/WebhookDisplay.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { notifications } from "@budibase/bbui"
+  import { Input, Icon, notifications } from "@budibase/bbui"
-  import { Input } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
 
   export let value
@@ -29,10 +28,10 @@
 </script>
 
 <div>
-  <Input disabled="true" thin value={fullWebhookURL(value)} />
+  <Input readonly value={fullWebhookURL(value)} />
-  <span on:click={() => copyToClipboard()}>
+  <div class="icon" on:click={() => copyToClipboard()}>
-    <i class="ri-clipboard-line copy-icon" />
+    <Icon s name="Copy" />
-  </span>
+  </div>
 </div>
 
 <style>
@@ -40,26 +39,31 @@
     position: relative;
   }
 
-  div :global(input:disabled) {
+  .icon {
-    color: var(--grey-7);
+    right: 1px;
-  }
+    bottom: 1px;
-
-  span {
     position: absolute;
-    border: none;
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-    background: var(--background);
-    right: var(--spacing-s);
-    bottom: 9px;
-    display: flex;
-    flex-direction: row;
     justify-content: center;
     align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
   }
-
+  .icon:hover {
-  span:hover {
+    cursor: pointer;
-    background-color: var(--grey-3);
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
   }
 </style>

packages/builder/src/components/backend/DataTable/RowFieldControl.svelte

@@ -1,12 +1,5 @@
 <script>
-  import {
+  import { Input, Select, DatePicker, Toggle, TextArea } from "@budibase/bbui"
-    Input,
-    Select,
-    Label,
-    DatePicker,
-    Toggle,
-    TextArea,
-  } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "../../../helpers"
   import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
@@ -29,16 +22,11 @@
 {:else if type === 'datetime'}
   <DatePicker {label} bind:value />
 {:else if type === 'attachment'}
-  <div>
+  <Dropzone {label} bind:value />
-    <Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
-    <Dropzone bind:files={value} />
-  </div>
 {:else if type === 'boolean'}
   <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
 {:else if type === 'link'}
-  <div>
   <LinkedRowSelector bind:linkedRows={value} schema={meta} />
-  </div>
 {:else if type === 'longform'}
   <TextArea {label} bind:value />
 {:else}

packages/builder/src/components/common/DrawerBindableInput.svelte

@@ -6,7 +6,6 @@
   } from "builderStore/dataBinding"
   import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
-  const dispatch = createEventDispatcher()
 
   export let panel = BindingPanel
   export let value = ""
@@ -14,9 +13,10 @@
   export let thin = true
   export let title = "Bindings"
   export let placeholder
+  export let label
 
+  const dispatch = createEventDispatcher()
   let bindingDrawer
-
   $: tempValue = value
   $: readableValue = runtimeToReadableBinding(bindings, value)
 
@@ -32,6 +32,7 @@
 
 <div class="control">
   <Input
+    {label}
     value={readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder} />
@@ -66,7 +67,6 @@
 
   .icon {
     right: 1px;
-    top: 1px;
     bottom: 1px;
     position: absolute;
     justify-content: center;
@@ -84,6 +84,7 @@
         var(--spectrum-global-animation-duration-100, 130ms),
       box-shadow var(--spectrum-global-animation-duration-100, 130ms),
       border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
   }
   .icon:hover {
     cursor: pointer;

packages/builder/src/components/common/Dropzone.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { notifications } from "@budibase/bbui"
+  import { Dropzone, notifications } from "@budibase/bbui"
-  import { Dropzone } from "@budibase/bbui"
   import api from "builderStore/api"
 
-  export let files = []
+  export let value = []
+  export let label
 
   const BYTES_IN_MB = 1000000
 
@@ -24,4 +24,9 @@
   }
 </script>
 
-<Dropzone bind:files {processFiles} {handleFileTooLarge} />
+<Dropzone
+  bind:value
+  {label}
+  {...$$restProps}
+  {processFiles}
+  {handleFileTooLarge} />

packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte

@@ -37,12 +37,13 @@
   {#if webhookUrls.length === 0}
     <h5>No webhooks found.</h5>
   {/if}
-  <div slot="footer">
+  <a
-    <a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/steps/triggers">
     <i class="ri-information-line" />
     <span>Learn about webhooks</span>
   </a>
-  </div>
 </ModalContent>
 
 <style>

packages/builder/src/pages/builder/[application]/automate/_layout.svelte

@@ -13,7 +13,7 @@
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
-    <div class="nav setup">
+    <div class="setup">
       <SetupPanel />
     </div>
   {/if}
@@ -45,4 +45,14 @@
     gap: var(--spacing-l);
     overflow: hidden;
   }
+
+  .setup {
+    padding: var(--spectrum-global-dimension-size-200);
+    border-left: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
 </style>

packages/standard-components/src/attachments/AttachmentList.svelte

@@ -1,127 +0,0 @@
-<script>
-  import { Modal, ModalContent } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  import { FILE_TYPES } from "./fileTypes"
-
-  export let files = []
-  export let height = "70"
-  export let width = "70"
-
-  let modal
-  let currentFile
-
-  const openModal = file => {
-    currentFile = file
-    modal.show()
-  }
-
-  const handleConfirm = () => {
-    dispatch("delete", currentFile)
-  }
-</script>
-
-<div class="file-list">
-  {#each files as file}
-    <div class="file-container">
-      <a href={file.url} target="_blank" class="file">
-        {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
-          <img {width} {height} src={file.url} alt="preview of {file.name}" />
-        {:else}<i class="far fa-file" />{/if}
-      </a>
-      <span>{file.name}</span>
-      <div class="button-placement">
-        <button primary on:click|stopPropagation={() => openModal(file)}>
-          ×
-        </button>
-      </div>
-    </div>
-  {/each}
-</div>
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Confirm File Deletion"
-    confirmText="Delete"
-    onConfirm={handleConfirm}>
-    <span>Are you sure you want to delete this attachment?</span>
-  </ModalContent>
-</Modal>
-
-<style>
-  .file-list {
-    display: grid;
-    justify-content: start;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    grid-template-columns: repeat(auto-fill, 1fr);
-  }
-
-  img {
-    object-fit: contain;
-  }
-
-  i {
-    margin-bottom: var(--spacing-m);
-  }
-
-  a {
-    color: var(--ink);
-    text-decoration: none;
-  }
-
-  .file-container {
-    position: relative;
-  }
-
-  button {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    font-size: var(--font-size-m);
-    line-height: 110%;
-    z-index: 1000;
-    top: 4px;
-    left: 50px;
-    margin: 0;
-    padding: 0;
-    width: 1.3rem;
-    height: 1.3rem;
-    border: 0;
-    color: white;
-    border-radius: var(--border-radius-xl);
-    background: black;
-    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-      background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-    -webkit-appearance: none;
-    outline: none;
-  }
-  button:hover {
-    background-color: var(--grey-8);
-    cursor: pointer;
-  }
-  button:active {
-    background-color: var(--grey-9);
-    cursor: pointer;
-  }
-
-  .file {
-    position: relative;
-    height: 75px;
-    width: 75px;
-    border: 2px dashed var(--grey-7);
-    padding: var(--spacing-xs);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  span {
-    width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>

packages/standard-components/src/attachments/Dropzone.svelte

@@ -1,26 +0,0 @@
-<script>
-  import { Dropzone } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { API } = getContext("sdk")
-  const BYTES_IN_MB = 1000000
-
-  export let files = []
-
-  function handleFileTooLarge(fileSizeLimit) {
-    alert(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
-    )
-  }
-
-  async function processFiles(fileList) {
-    let data = new FormData()
-    for (let i = 0; i < fileList.length; i++) {
-      data.append("file", fileList[i])
-    }
-    return await API.uploadAttachment(data)
-  }
-</script>
-
-<Dropzone bind:files {processFiles} {handleFileTooLarge} />

packages/standard-components/src/attachments/fileTypes.js

@@ -1,5 +0,0 @@
-export const FILE_TYPES = {
-  IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg"],
-  CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
-  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
-}

packages/standard-components/src/forms/AttachmentField.svelte

@@ -1,7 +1,7 @@
 <script>
   import Field from "./Field.svelte"
-  import Dropzone from "../attachments/Dropzone.svelte"
+  import { CoreDropzone } from "@budibase/bbui"
-  import { onMount } from "svelte"
+  import { getContext } from "svelte"
 
   export let field
   export let label
@@ -10,16 +10,25 @@
   let fieldState
   let fieldApi
 
-  // Update form value from bound value after we've mounted
+  const { API, notifications } = getContext("sdk")
-  let value
+  const BYTES_IN_MB = 1000000
-  let mounted = false
-  $: mounted && fieldApi?.setValue(value)
 
-  // Get the fields initial value after initialising
+  export let files = []
-  onMount(() => {
+
-    value = $fieldState?.value
+  const handleFileTooLarge = fileSizeLimit => {
-    mounted = true
+    notifications.warning(
-  })
+      `Files cannot exceed ${fileSizeLimit /
+        BYTES_IN_MB} MB. Please try again with smaller files.`
+    )
+  }
+
+  const processFiles = async fileList => {
+    let data = new FormData()
+    for (let i = 0; i < fileList.length; i++) {
+      data.append("file", fileList[i])
+    }
+    return await API.uploadAttachment(data)
+  }
 </script>
 
 <Field
@@ -30,16 +39,12 @@
   bind:fieldState
   bind:fieldApi
   defaultValue={[]}>
-  {#if mounted}
+  {#if $fieldState}
-    <div class:disabled={$fieldState.disabled}>
+    <CoreDropzone
-      <Dropzone bind:files={value} />
+      value={$fieldState.value}
-    </div>
+      disabled={$fieldState.disabled}
+      on:change={e => fieldApi.setValue(e.detail)}
+      {processFiles}
+      {handleFileTooLarge} />
   {/if}
 </Field>
-
-<style>
-  div.disabled :global(> *) {
-    background-color: var(--spectrum-global-color-gray-200) !important;
-    pointer-events: none !important;
-  }
-</style>