Update filter popover

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>

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}>
+          <Select
-            <option value="">Choose an option</option>
+            bind:value={filter.conjunction}
-            {#each CONJUNCTIONS as conjunction}
+            options={CONJUNCTIONS}
-              <option value={conjunction.key}>{conjunction.name}</option>
+            {getOptionLabel}
-            {/each}
+            {getOptionValue} />
-          </Select>
         {/if}
         <Select
-          secondary
-          thin
           bind:value={filter.key}
-          on:change={fieldChanged(filter)}>
+          on:change={fieldChanged(filter)}
-          <option value="">Choose an option</option>
+          options={fields} />
-          {#each fields as field}
+        <Select
-            <option value={field}>{field}</option>
+          bind:value={filter.condition}
-          {/each}
+          options={CONDITIONS}
-        </Select>
+          {getOptionLabel}
-        <Select secondary thin bind:value={filter.condition}>
+          {getOptionValue} />
-          <option value="">Choose an option</option>
-          {#each CONDITIONS as condition}
-            <option value={condition.key}>{condition.name}</option>
-          {/each}
-        </Select>
         {#if filter.key && isMultipleChoice(filter.key)}
-          <Select secondary thin bind:value={filter.value}>
+          <Select
-            <option value="">Choose an option</option>
+            bind:value={filter.value}
-            {#each fieldOptions(filter.key) as option}
+            options={fieldOptions(filter.key)}
-              <option value={option}>{option.toString()}</option>
+            getOptionLabel={x => x.toString()} />
-            {/each}
-          </Select>
         {: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 {