From b17c4b961d1e88b1b67ddbdeb8fb31762f12a9d1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 20 Apr 2021 12:31:08 +0100
Subject: [PATCH] Update filter popover

---
 packages/bbui/src/Button/Button.svelte        | 12 ++---
 .../DataTable/popovers/FilterPopover.svelte   | 48 ++++++++-----------
 2 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index d85b9da1ee..f39a1bc25a 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -2,16 +2,11 @@
   import "@spectrum-css/button/dist/index-vars.css"
 
   export let disabled = false
-
-  /** @type {('S', 'M', 'L', 'XL')} Size of button */
   export let size = "M"
-
-  // Types
   export let cta, primary, secondary, warning, overBackground
-
   export let quiet = false
-
   export let icon = undefined
+  export let active = false
 </script>
 
 <button
@@ -21,6 +16,7 @@
   class:spectrum-Button--warning={warning}
   class:spectrum-Button--overBackground={overBackground}
   class:spectrum-Button--quiet={quiet}
+  class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   on:click|preventDefault>
@@ -44,4 +40,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  button.active {
+    color: var(--spectrum-semantic-cta-color-background-default);
+  }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
index 825644b908..ecc52ce170 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
@@ -105,6 +105,9 @@
       filter.value = ""
     }
   }
+
+  const getOptionLabel = x => x.name
+  const getOptionValue = x => x.key
 </script>
 
 <div class="actions">
@@ -115,49 +118,37 @@
         {#if idx === 0}
           <p>Where</p>
         {:else}
-          <Select secondary thin bind:value={filter.conjunction}>
-            <option value="">Choose an option</option>
-            {#each CONJUNCTIONS as conjunction}
-              <option value={conjunction.key}>{conjunction.name}</option>
-            {/each}
-          </Select>
+          <Select
+            bind:value={filter.conjunction}
+            options={CONJUNCTIONS}
+            {getOptionLabel}
+            {getOptionValue} />
         {/if}
         <Select
-          secondary
-          thin
           bind:value={filter.key}
-          on:change={fieldChanged(filter)}>
-          <option value="">Choose an option</option>
-          {#each fields as field}
-            <option value={field}>{field}</option>
-          {/each}
-        </Select>
-        <Select secondary thin bind:value={filter.condition}>
-          <option value="">Choose an option</option>
-          {#each CONDITIONS as condition}
-            <option value={condition.key}>{condition.name}</option>
-          {/each}
-        </Select>
+          on:change={fieldChanged(filter)}
+          options={fields} />
+        <Select
+          bind:value={filter.condition}
+          options={CONDITIONS}
+          {getOptionLabel}
+          {getOptionValue} />
         {#if filter.key && isMultipleChoice(filter.key)}
-          <Select secondary thin bind:value={filter.value}>
-            <option value="">Choose an option</option>
-            {#each fieldOptions(filter.key) as option}
-              <option value={option}>{option.toString()}</option>
-            {/each}
-          </Select>
+          <Select
+            bind:value={filter.value}
+            options={fieldOptions(filter.key)}
+            getOptionLabel={x => x.toString()} />
         {:else if filter.key && isDate(filter.key)}
           <DatePicker
             bind:value={filter.value}
             placeholder={filter.key || fields[0]} />
         {:else if filter.key && isNumber(filter.key)}
           <Input
-            thin
             bind:value={filter.value}
             placeholder={filter.key || fields[0]}
             type="number" />
         {:else}
           <Input
-            thin
             placeholder={filter.key || fields[0]}
             bind:value={filter.value} />
         {/if}
@@ -180,6 +171,7 @@
   .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
+    padding: var(--spacing-xl);
   }
 
   h5 {