Update StringField and OptionsField to use BBUI components

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

@@ -98,13 +98,11 @@
 
       const newValue = value == null ? defaultValue : value
       const newError = validate ? validate(newValue) : null
-      const newValid = !newError
 
       // Update field state
       fieldState.update(state => {
         state.value = newValue
         state.error = newError
-        state.valid = newValid
         return state
       })
 
@@ -120,7 +118,7 @@
         return state
       })
 
-      return newValid
+      return !newError
     }
     return {
       setValue,
@@ -138,7 +136,6 @@
       fieldId: `id-${generateID()}`,
       value: initialValues[field] ?? defaultValue,
       error: null,
-      valid: true,
       disabled: fieldDisabled,
     })
   }

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

@@ -1,6 +1,6 @@
 <script>
+  import { Select } from "@budibase/bbui/internal"
   import Field from "./Field.svelte"
-  import Picker from "./Picker.svelte"
 
   export let field
   export let label
@@ -10,18 +10,6 @@
   let fieldState
   let fieldApi
   let fieldSchema
-
-  // Picker state
-  let open = false
-  $: options = fieldSchema?.constraints?.inclusion ?? []
-  $: placeholderText = placeholder || "Choose an option"
-  $: isNull = $fieldState?.value == null || $fieldState?.value === ""
-  $: fieldText = isNull ? placeholderText : $fieldState?.value
-
-  const selectOption = value => {
-    fieldApi.setValue(value)
-    open = false
-  }
 </script>
 
 <Field
@@ -33,14 +21,13 @@
   bind:fieldApi
   bind:fieldSchema>
   {#if fieldState}
-    <Picker
+    <Select
-      bind:open
+      value={$fieldState.value}
-      {fieldState}
+      fieldId={$fieldState.fieldId}
-      {fieldText}
+      disabled={$fieldState.disabled}
-      {options}
+      error={$fieldState.error}
-      isPlaceholder={isNull}
+      options={fieldSchema?.constraints?.inclusion ?? []}
-      placeholderOption={placeholderText}
+      {placeholder}
-      isOptionSelected={option => option === $fieldState.value}
+      on:change={e => fieldApi.setValue(e.detail)} />
-      onSelectOption={selectOption} />
   {/if}
 </Field>

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

@@ -1,5 +1,5 @@
 <script>
-  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { TextField } from "@budibase/bbui/internal"
   import Field from "./Field.svelte"
 
   export let field
@@ -10,25 +10,6 @@
 
   let fieldState
   let fieldApi
-  let input
-
-  const updateValue = value => {
-    if (type === "number") {
-      const float = parseFloat(value)
-      value = isNaN(float) ? null : float
-    }
-    fieldApi.setValue(value)
-  }
-
-  const onBlur = event => {
-    updateValue(event.target.value)
-  }
-
-  const updateValueOnEnter = event => {
-    if (event.key === "Enter") {
-      updateValue(event.target.value)
-    }
-  }
 </script>
 
 <Field
@@ -39,34 +20,13 @@
   bind:fieldState
   bind:fieldApi>
   {#if fieldState}
-    <div
+    <TextField
-      class="spectrum-Textfield"
+      value={$fieldState.value}
-      class:is-invalid={!$fieldState.valid}
+      on:change={e => fieldApi.setValue(e.detail)}
-      class:is-disabled={$fieldState.disabled}>
-      {#if !$fieldState.valid}
-        <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
-        on:keyup={updateValueOnEnter}
-        bind:this={input}
       disabled={$fieldState.disabled}
+      error={$fieldState.error}
       id={$fieldState.fieldId}
-        value={$fieldState.value || ''}
+      {placeholder}
-        placeholder={placeholder || ''}
+      {type} />
-        on:blur={onBlur}
-        {type}
-        class="spectrum-Textfield-input" />
-    </div>
   {/if}
 </Field>
-
-<style>
-  .spectrum-Textfield {
-    width: 100%;
-  }
-</style>

packages/standard-components/src/index.js

@@ -1,4 +1,3 @@
-import "@budibase/bbui/dist/style.css"
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-large.css"