Switching to an explicit select for the OR/AND options in the filter.

packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte

@@ -9,7 +9,6 @@
     Input,
     Layout,
     Select,
-    Toggle,
     Label,
   } from "@budibase/bbui"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
@@ -17,7 +16,7 @@
   import { generate } from "shortid"
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { getFields } from "helpers/searchFields"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -33,6 +32,11 @@
   $: fieldOptions = enrichedSchemaFields.map(field => field.name) || []
   $: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]
 
+  let behaviourValue
+  const behaviourOptions = [
+    { value: "and", label: "Match all of the following filters" },
+    { value: "or", label: "Match any of the following filters" },
+  ]
   const addFilter = () => {
     filters = [
       ...filters,
@@ -99,6 +103,10 @@
     const schema = enrichedSchemaFields.find(x => x.name === field)
     return schema?.constraints?.inclusion || []
   }
+
+  onMount(() => {
+    behaviourValue = allOr ? "or" : "and"
+  })
 </script>
 
 <DrawerContent>
@@ -113,6 +121,21 @@
         {/if}
       </Body>
       {#if filters?.length}
+        <div class="fields">
+          <Select
+            label="Behaviour"
+            value={behaviourValue}
+            options={behaviourOptions}
+            getOptionLabel={opt => opt.label}
+            getOptionValue={opt => opt.value}
+            on:change={e => (allOr = e.detail === "or")}
+            placeholder={null}
+          />
+        </div>
+        <div>
+          <div class="filter-label">
+            <Label>Filters</Label>
+          </div>
           <div class="fields">
             {#each filters as filter, idx}
               <Select
@@ -185,17 +208,12 @@
               />
             {/each}
           </div>
+        </div>
       {/if}
       <div class="bottom">
         <Button icon="AddCircle" size="M" secondary on:click={addFilter}>
           Add filter
         </Button>
-        <div class="toggle">
-          <Toggle
-            value={allOr}
-            on:change={event => (allOr = event.detail)}
-          /><Label size="L">OR conditions</Label>
-        </div>
       </div>
     </Layout>
   </div>
@@ -216,10 +234,8 @@
     grid-template-columns: 1fr 120px 120px 1fr auto auto;
   }
 
-  .toggle {
-    display: flex;
-    align-items: center;
-    padding-right: var(--spacing-s);
+  .filter-label {
+    margin-bottom: var(--spacing-s);
   }
 
   .bottom {