Added error messages to inputs instead

packages/bbui/src/Drawer/Drawer.svelte

@@ -6,7 +6,8 @@
 
   export let title
   export let fillWidth
-  export let visible = false
+
+  let visible = false
 
   export function show() {
     if (visible) {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte

@@ -41,12 +41,14 @@
               bind:value={option.label}
               label="Label"
               labelPosition="left"
+              error={option.error?.label}
             />
             <Input
               placeholder="Value"
               bind:value={option.value}
               label="Value"
               labelPosition="left"
+              error={option.error?.value}
             />
             <Icon
               name="Close"

packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte

@@ -7,55 +7,60 @@
 
   export let value
 
-  let drawerVisible = false
   let drawer
-  let valid = true
   let tempValue = value || []
 
   const saveFilter = async () => {
-    // Filter out incomplete options, but if all are incomplete then show error
+    let hasError = false
-    let filteredOptions = tempValue.filter(
+    for (let i = 0; i < tempValue.length; i++) {
-      option => option.value && option.label
+      let option = tempValue[i]
-    )
+      if (!(option.label && option.value)) {
-    if (filteredOptions.length > 0 || tempValue.length === 0) {
+        option.error = {
-      tempValue = filteredOptions
+          label: option.label ? undefined : "You must provide a label.",
-      valid = true
+          value: option.value ? undefined : "You must provide a value.",
-      dispatch("change", tempValue)
+        }
+        tempValue[i] = option
+        hasError = true
+      }
+    }
+    if (!hasError) {
       drawer.hide()
-    } else {
+    }
-      valid = false
+    dispatch("change", tempValue)
+  }
+
+  const clearOptionErrors = () => {
+    for (let i = 0; i < tempValue.length; i++) {
+      let option = tempValue[i]
+      option.error = undefined
+      tempValue[i] = option
     }
   }
 
-  //If the drawer is hidden or error corrected, reset the validation
   $: {
-    if (
+    for (let i = 0; i < tempValue.length; i++) {
-      !drawerVisible ||
+      let option = tempValue[i]
-      tempValue.some(option => option.label && option.value)
+      if (option.error?.label && option.label) {
-    ) {
+        option.error.label = undefined
-      valid = true
+      }
+      if (option.error?.value && option.value) {
+        option.error.value = undefined
+      }
+      tempValue[i] = option
     }
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Define Options</ActionButton>
+<ActionButton
-<Drawer bind:this={drawer} bind:visible={drawerVisible} title="Options">
+  on:click={() => {
-  <svelte:fragment slot="description">
+    clearOptionErrors()
-    {#if !valid}
+    drawer.show()
-      <span class="syntax-error"
+  }}>Define Options</ActionButton
-        >You must provide option labels and values.</span
 >
-    {:else}
+<Drawer bind:this={drawer} title="Options">
+  <svelte:fragment slot="description">
     Define the options for this picker.
-    {/if}
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
 </Drawer>
-
-<style>
-  .syntax-error {
-    padding-top: var(--spacing-m);
-    color: var(--red);
-  }
-</style>