Update filter popover to modal

packages/bbui/src/Styleguide/Label.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label
-  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel`}>
+  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-Form-itemLabel`}>
   <slot />
 </label>
 

packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte

@@ -1,20 +1,21 @@
 <script>
-  import { Popover, Button, Icon } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import FilterPopover from "../popovers/FilterPopover.svelte"
 
   export let view = {}
 
-  let anchor
+  let modal
-  let dropdown
 </script>
 
-<div bind:this={anchor}>
+<Button
-  <Button icon="Filter" primary size="S" quiet
+  icon="Filter"
-    on:click={dropdown.show}
+  primary
-    active={view.filters && view.filters.length}>
+  size="S"
-    Filter
+  quiet
-  </Button>
+  on:click={modal.show}
-</div>
+  active={view.filters?.length}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  Filter
-  <FilterPopover {view} onClosed={dropdown.hide} />
+</Button>
-</Popover>
+<Modal bind:this={modal}>
+  <FilterPopover {view} />
+</Modal>

packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte → packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Select, Label, notifications } from "@budibase/bbui"
+  import { Select, Label, notifications, ModalContent } from "@budibase/bbui"
   import { tables, views } from "stores/backend"
   import analytics from "analytics"
 
@@ -35,13 +35,15 @@
   function saveView() {
     views.save(view)
     notifications.success(`View ${view.name} saved.`)
-    onClosed()
     analytics.captureEvent("Added View Calculate", { field: view.field })
   }
 </script>
 
-<div class="actions">
+<ModalContent
-  <h5>Calculate</h5>
+  title="Calculate"
+  confirmText="Save"
+  onConfirm={saveView}
+  disabled={!view.field}>
   <div class="input-group-row">
     <Label>The</Label>
     <Select
@@ -54,31 +56,9 @@
       <Select bind:value={view.field} options={fields} />
     {/if}
   </div>
-  <div class="footer">
+</ModalContent>
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button cta on:click={saveView} disabled={!view.field}>Save</Button>
-  </div>
-</div>
 
 <style>
-  .actions {
-    width: 200px;
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    padding: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-
   .input-group-row {
     display: grid;
     grid-template-columns: auto 1fr;