Update button actions to use new spectrum components

packages/bbui/src/Drawer/Drawer.svelte

@@ -1,7 +1,7 @@
 <script>
   import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
-  import ActionButton from '../ActionButton/ActionButton.svelte'
+  import ActionButton from "../ActionButton/ActionButton.svelte"
 
   export let title
 
@@ -84,5 +84,8 @@
   }
   .text {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
   }
 </style>

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

@@ -8,17 +8,19 @@
   export let error = null
   export let id = null
 
+  let focus = false
   const dispatch = createEventDispatcher()
-
   const onChange = event => {
     dispatch("change", event.target.value)
+    focus = false
   }
 </script>
 
 <div
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
-  class:is-disabled={disabled}>
+  class:is-disabled={disabled}
+  class:is-focused={focus}>
   {#if error}
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
@@ -32,6 +34,7 @@
     class="spectrum-Textfield-input"
     {disabled}
     {id}
+    on:focus={() => (focus = true)}
     on:blur={onChange}>{value || ''}</textarea>
 </div>
 

packages/bbui/src/Styleguide/Label.svelte

@@ -0,0 +1,14 @@
+<script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+</script>
+
+<label
+  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel`}>
+  <slot />
+</label>
+
+<style>
+  label {
+    white-space: nowrap;
+  }
+</style>

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

@@ -25,6 +25,7 @@
 <ModalContent
   title="Create Automation"
   confirmText="Create"
+  size="L"
   onConfirm={createAutomation}
   disabled={!valid}>
   <Input bind:value={name} label="Name" />

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -109,10 +109,8 @@
     <div class="text">
       <TextArea
         bind:getCaretPosition
-        thin
         bind:value
-        placeholder="Add text, or click the objects on the left to add them to
-        the textbox." />
+        placeholder="Add text, or click the objects on the left to add them to the textbox." />
       {#if !valid}
         <p class="syntax-error">
           Current Handlebars syntax is invalid, please check the guide
@@ -145,7 +143,7 @@
     font-family: var(--font-sans);
   }
   .text :global(textarea) {
-    min-height: 100px;
+    min-height: 200px;
   }
   .text :global(p) {
     margin: 0;

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte

@@ -7,18 +7,17 @@
 
   export let parameters
 
-  $: tableOptions = $tables || []
+  $: tableOptions = $tables.list || []
   $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>
 
 <div class="root">
-  <Label small>Table</Label>
-  <Select thin secondary bind:value={parameters.tableId}>
-    <option value="" />
-    {#each tableOptions as table}
-      <option value={table._id}>{table.name}</option>
-    {/each}
-  </Select>
+  <Label>Table</Label>
+  <Select
+    bind:value={parameters.tableId}
+    options={tableOptions}
+    getOptionLabel={table => table.name}
+    getOptionValue={table => table._id} />
 
   <Label small>Row ID</Label>
   <DrawerBindableInput

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte

@@ -24,24 +24,22 @@
   }
 </script>
 
-<Label small>Datasource</Label>
-<Select thin secondary bind:value={parameters.datasourceId}>
-  <option value="" />
-  {#each $datasources.list as datasource}
-    <option value={datasource._id}>{datasource.name}</option>
-  {/each}
-</Select>
+<Label>Datasource</Label>
+<Select
+  bind:value={parameters.datasourceId}
+  option={$datasources.list}
+  getOptionLabel={source => source.name}
+  getOptionValue={source => source._id} />
 
 <Spacer medium />
 
 {#if parameters.datasourceId}
-  <Label small>Query</Label>
-  <Select thin secondary bind:value={parameters.queryId}>
-    <option value="" />
-    {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
-      <option value={query._id}>{query.name}</option>
-    {/each}
-  </Select>
+  <Label>Query</Label>
+  <Select
+    bind:value={parameters.queryId}
+    options={$queries.list.filter(query => query.datasourceId === datasource._id)}
+    getOptionLabel={query => query.name}
+    getOptionValue={query => query._id} />
 {/if}
 
 <Spacer medium />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte

@@ -61,7 +61,7 @@
         thin
         secondary
         value={field[0]}
-        on:change={event => updateFieldName(idx, event.target.value)} />
+        on:change={event => updateFieldName(idx, event.detail)} />
     {/if}
     <Label small>{valueLabel}</Label>
     <DrawerBindableInput

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte

@@ -75,17 +75,13 @@
 
     {#if automationStatus === AUTOMATION_STATUS.EXISTING}
       <Select
-        thin
-        secondary
         bind:value={parameters.automationId}
-        placeholder="Choose automation">
-        {#each automations as automation}
-          <option value={automation._id}>{automation.name}</option>
-        {/each}
-      </Select>
+        placeholder="Choose automation"
+        options={automations}
+        getOptionLabel={x => x.name}
+        getOptionValue={x => x._id} />
     {:else}
       <Input
-        thin
         bind:value={parameters.newAutomationName}
         placeholder="Enter automation name" />
     {/if}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte

@@ -14,21 +14,18 @@
 
 <div class="root">
   <Label small>Form</Label>
-  <Select thin secondary bind:value={parameters.componentId}>
-    <option value="" />
-    {#if actionProviders}
-      {#each actionProviders as component}
-        <option value={component._id}>{component._instanceName}</option>
-      {/each}
-    {/if}
-  </Select>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id} />
 </div>
 
 <style>
   .root {
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: center;
     max-width: 800px;
     margin: 0 auto;
   }