From 7df0555721cc8b8dc8c9b5205fa15dd259bde99f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 14:52:58 +0200
Subject: [PATCH] rewords FilterPanel to use new DrawerContent component

---
 packages/bbui/src/Drawer/DrawerContent.svelte |  2 +-
 .../PropertiesPanel/BindingPanel.svelte       |  2 +-
 .../EventsEditor/EventEditor.svelte           | 24 ++++----
 .../PropertyControls/FilterEditor.svelte      | 60 ++++++++++---------
 4 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 33c3de1f6..5b72870fa 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -10,7 +10,7 @@
       </div>
     {/if}
     <div class="main">
-      <slot name="main" />
+      <slot />
     </div>
   </div>
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index eff76a460..aab96d97b 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -107,7 +107,7 @@
     </section>
   </Layout>
   </svelte:fragment>
-  <div class="main" slot="main">
+  <div class="main">
     <TextArea
       bind:getCaretPosition
       bind:value
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 314ff2af3..a88485417 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -127,19 +127,19 @@
       </div>
     {/if}
   </div>
-</DrawerContent>
-<div class="actions-container">
-  <div class="action-config">
-    {#if selectedAction}
-      <div class="selected-action-container">
-        <svelte:component
-          this={selectedActionComponent}
-          parameters={selectedAction.parameters}
-        />
-      </div>
-    {/if}
+  <div class="actions-container">
+    <div class="action-config">
+      {#if selectedAction}
+        <div class="selected-action-container">
+          <svelte:component
+            this={selectedActionComponent}
+            parameters={selectedAction.parameters}
+          />
+        </div>
+      {/if}
+    </div>
   </div>
-</div>
+</DrawerContent>
 
 <style>
   .action-header {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
index a632561c4..7d349de7c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Button, Drawer, Spacer, Body } from "@budibase/bbui"
+  import {
+    Button,
+    Drawer,
+    Spacer,
+    Body,
+    DrawerContent,
+    Layout,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { notifications } from "@budibase/bbui"
   import {
@@ -18,7 +25,7 @@
 
   $: schemaFields = getSchemaFields(componentInstance)
 
-  const getSchemaFields = component => {
+  const getSchemaFields = (component) => {
     const datasource = getDatasourceForProvider($currentAsset, component)
     const { schema } = getSchemaForDatasource(datasource)
     return Object.values(schema || {})
@@ -30,42 +37,37 @@
     drawer.hide()
   }
 
-  const onFieldsChanged = event => {
+  const onFieldsChanged = (event) => {
     tempValue = event.detail
   }
 </script>
 
 <Button secondary wide on:click={drawer.show}>Define Filters</Button>
-<Drawer bind:this={drawer} title='Filtering'>
+<Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
-  <div class="root" slot="body">
-    <Body s>
-      {#if !Object.keys(tempValue || {}).length}
-        Add your first filter column.
-      {:else}
-        Results are filtered to only those which match all of the following
-        constaints.
-      {/if}
-    </Body>
-    <Spacer medium />
-    <div class="fields">
-      <SaveFields
-        parameterFields={value}
-        {schemaFields}
-        valueLabel="Equals"
-        on:change={onFieldsChanged} />
-    </div>
-  </div>
+  <DrawerContent slot="body">
+    <Layout>
+      <Body s>
+        {#if !Object.keys(tempValue || {}).length}
+          Add your first filter column.
+        {:else}
+          Results are filtered to only those which match all of the following
+          constaints.
+        {/if}
+      </Body>
+      <div class="fields">
+        <SaveFields
+          parameterFields={value}
+          {schemaFields}
+          valueLabel="Equals"
+          on:change={onFieldsChanged}
+        />
+      </div>
+    </Layout>
+  </DrawerContent>
 </Drawer>
 
 <style>
-  .root {
-    padding: var(--spacing-l);
-    min-height: calc(40vh - 2 * var(--spacing-l));
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
   .fields {
     display: grid;
     column-gap: var(--spacing-l);