From d3460232db95403c9e94e4eed7f6a111d8eeff04 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 08:41:15 +0100
Subject: [PATCH 1/8] updates bbui and adds dummy drawer component to binding

---
 packages/builder/package.json                 |   2 +-
 .../userInterface/PropertyControl.svelte      |  24 +-
 packages/builder/yarn.lock                    | 215 +-----------------
 3 files changed, 22 insertions(+), 219 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 781210041a..7d5b0ee31b 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.52.4",
+    "@budibase/bbui": "^1.53.0",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 4bf9082091..2c6538add6 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Drawer } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,6 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import { DropdownMenu } from "@budibase/bbui"
   import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
 
   export let label = ""
@@ -22,7 +21,7 @@
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
-  let dropdown
+  let showDrawer = false
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
@@ -95,23 +94,24 @@
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={dropdown.show}>
+      on:click={() => showDrawer = true}>
       <Icon name="edit" />
     </div>
   {/if}
 </div>
-{#if control == Input}
-  <DropdownMenu
-    on:close={handleClose}
-    bind:this={dropdown}
-    {anchor}
-    align="right">
+{#if showDrawer}
+  <Drawer
+    title="Binding"
+    onClose={() => {
+      handleClose()
+      showDrawer = false
+    }}>
     <BindingDropdown
       {...handlevalueKey(value)}
-      close={dropdown.hide}
+      close={() => showDrawer = false}
       on:update={e => (temporaryBindableValue = e.detail)}
       {bindableProperties} />
-  </DropdownMenu>
+  </Drawer>
 {/if}
 
 <style>
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 9200f95b91..0a851e8179 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.52.4":
-  version "1.52.4"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.4.tgz#ae3c17e1f49f14e65831703958bcddc6e64afd24"
-  integrity sha512-/wiv5dSyvXLgy2/zGEslnCsjwE8qqng1D8k5ScSOPEyMab8tzzd1XxfZAN9rp84zIMgAXeH6s5a4j4riR+jVkg==
+"@budibase/bbui@^1.53.0":
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.53.0.tgz#36b57e6803fb7622111dce3e9766f6c63e34dbb2"
+  integrity sha512-v+L2HCaZ9MD2uyzpAvWQ5vWF+rf3WOkZLMMFpil2GHJ+DHwgm3/9eC4BhHoNjCntF5zxbfpO+Y2DG7AF4UhNgw==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"
@@ -854,16 +854,6 @@
     svelte-portal "^1.0.0"
     turndown "^7.0.0"
 
-"@budibase/client@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.3.tgz#eaf1ac83ed04722c29ea51907ac7c2190bd09b74"
-  integrity sha512-gfVIU7P1HCMuH9rgmqgv2pD5oFDwwuX0QF3+FXuKR3/Cr6JW+bstVsNZHGgwOrmbxT3oAxfeNX186zrQupJ42w==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-    svelte-spa-router "^3.0.5"
-
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -928,11 +918,6 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@fortawesome/fontawesome-free@^5.14.0":
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
-  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
-
 "@hapi/hoek@^9.0.0":
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
@@ -1656,11 +1641,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1728,13 +1708,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2903,27 +2876,6 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deep-equal@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
-  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
-  dependencies:
-    call-bind "^1.0.0"
-    es-get-iterator "^1.1.1"
-    get-intrinsic "^1.0.1"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.4"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3150,20 +3102,6 @@ es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-get-iterator@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
-  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.1"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3547,7 +3485,7 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3646,15 +3584,6 @@ get-intrinsic@^1.0.0:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
-  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -4022,11 +3951,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
-  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -4034,13 +3958,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
-  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
-  dependencies:
-    call-bind "^1.0.0"
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -4079,7 +3996,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4156,11 +4073,6 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
-  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -4171,11 +4083,6 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
-is-number-object@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4241,11 +4148,6 @@ is-regex@^1.0.4, is-regex@^1.1.1:
   dependencies:
     has-symbols "^1.0.1"
 
-is-set@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
-  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4256,44 +4158,18 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
-is-symbol@^1.0.2, is-symbol@^1.0.3:
+is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
   dependencies:
     has-symbols "^1.0.1"
 
-is-typed-array@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
-  integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    call-bind "^1.0.0"
-    es-abstract "^1.18.0-next.1"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4319,11 +4195,6 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -5613,11 +5484,6 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-inspect@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
-  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
-
 object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
@@ -5626,14 +5492,6 @@ object-is@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
-object-is@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
-  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5660,7 +5518,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0, object.assign@^4.1.1, object.assign@^4.1.2:
+object.assign@^4.1.0, object.assign@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -6240,7 +6098,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
+regexp.prototype.flags@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -6248,11 +6106,6 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
-regexparam@1.3.0, regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpu-core@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
@@ -6737,15 +6590,6 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7162,13 +7006,6 @@ svelte-portal@^1.0.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
-svelte-spa-router@^3.0.5:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
-  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
-  dependencies:
-    regexparam "1.3.0"
-
 svelte@^3.30.0:
   version "3.30.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
@@ -7598,45 +7435,11 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
-  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
-  dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
-  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    call-bind "^1.0.0"
-    es-abstract "^1.18.0-next.1"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

From 1ea5c47ad5c322ebf429abdcc9d2cabb27723f96 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 09:20:31 +0100
Subject: [PATCH 2/8] bump bbui

---
 packages/builder/package.json                 |  2 +-
 .../userInterface/BindingDropdown.svelte      | 32 ++-----------------
 .../userInterface/PropertyControl.svelte      | 29 +++++++++++++----
 3 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 7d5b0ee31b..0ebc799ed5 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.53.0",
+    "@budibase/bbui": "^1.53.1",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index afbad79f96..74dbc52fff 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -52,52 +52,26 @@
     {/if}
   </div>
   <div class="text">
-    <Heading extraSmall>Data binding</Heading>
-    <Spacer small />
-    <Body extraSmall lh>
-      Binding connects one piece of data to another and makes it dynamic. Click
-      the objects on the left, to add them to the textbox.
-    </Body>
-    <Spacer large />
     <TextArea
       thin
       bind:value
       placeholder="Add text, or click the objects on the left to add them to the
       textbox." />
-    <div class="controls">
-      <a href="https://docs.budibase.com/design/binding">
-        <Body small grey>Learn more about binding</Body>
-      </a>
-      <Button on:click={cancel} secondary>Cancel</Button>
-      <Button on:click={close} primary>Done</Button>
-    </div>
   </div>
 </div>
 
 <style>
   .container {
     display: grid;
-    grid-template-columns: auto auto;
-  }
-  .list,
-  .text {
-    padding: var(--spacing-m);
-  }
-  .controls {
-    margin-top: var(--spacing-m);
-    display: grid;
-    align-items: center;
-    grid-gap: var(--spacing-l);
-    grid-template-columns: 1fr auto auto;
+    grid-template-columns: auto 1fr;
   }
   .list {
     width: 150px;
     border-right: 1.5px solid var(--grey-4);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-s);
   }
   .text {
-    width: 600px;
-    padding: var(--spacing-xl);
+    padding: var(--spacing-s);
     font-family: var(--font-sans);
   }
   .text :global(p) {
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 2c6538add6..0a7718e455 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Drawer } from "@budibase/bbui"
+  import { Button, Icon, Drawer } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -106,11 +106,24 @@
       handleClose()
       showDrawer = false
     }}>
-    <BindingDropdown
-      {...handlevalueKey(value)}
-      close={() => showDrawer = false}
-      on:update={e => (temporaryBindableValue = e.detail)}
-      {bindableProperties} />
+    <div slot="buttons">
+      <Button
+        blue
+        thin
+        on:click={() => {
+          notifier.success('Query parameters saved.')
+          handleSelected(value)
+        }}>
+        Save
+      </Button>
+    </div>
+    <div class="drawer-contents" slot="body">
+      <BindingDropdown
+        {...handlevalueKey(value)}
+        close={() => showDrawer = false}
+        on:update={e => (temporaryBindableValue = e.detail)}
+        {bindableProperties} />
+    </div>
   </Drawer>
 {/if}
 
@@ -161,4 +174,8 @@
     color: var(--ink);
     cursor: pointer;
   }
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
 </style>

From d2851057f6c19fde0dcb093396f145d9ee9236db Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:13:28 +0100
Subject: [PATCH 3/8] bump bbui

---
 packages/builder/package.json                 |   2 +-
 .../userInterface/BindingDropdown.svelte      | 106 ------------------
 .../userInterface/PropertyControl.svelte      |  40 ++-----
 packages/builder/yarn.lock                    |   8 +-
 4 files changed, 15 insertions(+), 141 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/BindingDropdown.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 0ebc799ed5..f1c91e9e7c 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.53.1",
+    "@budibase/bbui": "^1.54.0",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
deleted file mode 100644
index 74dbc52fff..0000000000
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-  import groupBy from "lodash/fp/groupBy"
-  import {
-    Button,
-    TextArea,
-    Label,
-    Body,
-    Heading,
-    Spacer,
-  } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  export let bindableProperties
-  export let value = ""
-  export let close
-
-  function addToText(readableBinding) {
-    value = value + `{{ ${readableBinding} }}`
-  }
-  let originalValue = value
-
-  $: dispatch("update", value)
-
-  function cancel() {
-    dispatch("update", originalValue)
-    close()
-  }
-
-  $: ({ instance, context } = groupBy("type", bindableProperties))
-</script>
-
-<div class="container" data-cy="binding-dropdown-modal">
-  <div class="list">
-    <Heading extraSmall>Objects</Heading>
-    <Spacer medium />
-    {#if context}
-      <Heading extraSmall>Tables</Heading>
-      <ul>
-        {#each context as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
-    {/if}
-    {#if instance}
-      <Heading extraSmall>Components</Heading>
-      <ul>
-        {#each instance as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-  <div class="text">
-    <TextArea
-      thin
-      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the
-      textbox." />
-  </div>
-</div>
-
-<style>
-  .container {
-    display: grid;
-    grid-template-columns: auto 1fr;
-  }
-  .list {
-    width: 150px;
-    border-right: 1.5px solid var(--grey-4);
-    padding: var(--spacing-s);
-  }
-  .text {
-    padding: var(--spacing-s);
-    font-family: var(--font-sans);
-  }
-  .text :global(p) {
-    margin: 0;
-  }
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--grey-7);
-    padding: var(--spacing-s) 0;
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    color: var(--ink);
-    font-weight: 500;
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 0a7718e455..56d82e2940 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
+  import BindingDrawer from "components/userInterface/BindingDrawer.svelte"
 
   export let label = ""
   export let bindable = true
@@ -17,7 +17,7 @@
   export let value
   export let props = {}
   export let onChange = () => {}
-
+  
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
@@ -25,6 +25,7 @@
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
+    showDrawer = false
   }
 
   function getBindableProperties() {
@@ -99,33 +100,12 @@
     </div>
   {/if}
 </div>
-{#if showDrawer}
-  <Drawer
-    title="Binding"
-    onClose={() => {
-      handleClose()
-      showDrawer = false
-    }}>
-    <div slot="buttons">
-      <Button
-        blue
-        thin
-        on:click={() => {
-          notifier.success('Query parameters saved.')
-          handleSelected(value)
-        }}>
-        Save
-      </Button>
-    </div>
-    <div class="drawer-contents" slot="body">
-      <BindingDropdown
-        {...handlevalueKey(value)}
-        close={() => showDrawer = false}
-        on:update={e => (temporaryBindableValue = e.detail)}
-        {bindableProperties} />
-    </div>
-  </Drawer>
-{/if}
+<BindingDrawer
+  {...handlevalueKey(value)}
+  close={handleClose}
+  show={showDrawer}
+  on:update={e => (temporaryBindableValue = e.detail)}
+  {bindableProperties} />
 
 <style>
   .property-control {
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 0a851e8179..e7f46418b1 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.53.0":
-  version "1.53.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.53.0.tgz#36b57e6803fb7622111dce3e9766f6c63e34dbb2"
-  integrity sha512-v+L2HCaZ9MD2uyzpAvWQ5vWF+rf3WOkZLMMFpil2GHJ+DHwgm3/9eC4BhHoNjCntF5zxbfpO+Y2DG7AF4UhNgw==
+"@budibase/bbui@^1.54.0":
+  version "1.54.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.0.tgz#60e6c0faa3d8f1781c503e74f8b8990f75ba2c40"
+  integrity sha512-98koXkueqda6oQT6q0NPNvdL878ETRevtmmm34aSz9C6B4Oz68VVCsiFzRWuHvP/7wiNaAxMgY1nsEsCwP3LpQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

From a287b0449743a154b4d67fb886f395a4808eecba Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:39:39 +0100
Subject: [PATCH 4/8] wire BindingPanel correctly to PropertyControl

---
 .../userInterface/BindingPanel.svelte         | 113 ++++++++++++++++++
 .../userInterface/PropertyControl.svelte      |  34 +++---
 2 files changed, 132 insertions(+), 15 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/BindingPanel.svelte

diff --git a/packages/builder/src/components/userInterface/BindingPanel.svelte b/packages/builder/src/components/userInterface/BindingPanel.svelte
new file mode 100644
index 0000000000..1e40e8e001
--- /dev/null
+++ b/packages/builder/src/components/userInterface/BindingPanel.svelte
@@ -0,0 +1,113 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import {
+    Button,
+    TextArea,
+    Drawer,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let bindableProperties
+  export let value = ""
+  export let bindingDrawer
+
+  function addToText(readableBinding) {
+    value = value + `{{ ${readableBinding} }}`
+  }
+  let originalValue = value
+
+  $: dispatch("update", value)
+
+  export function cancel() {
+    dispatch("update", originalValue)
+    bindingDrawer.close()
+  }
+
+  $: ({ instance, context } = groupBy("type", bindableProperties))
+</script>
+
+<div class="drawer-contents">
+  <div class="container" data-cy="binding-dropdown-modal">
+    <div class="list">
+      <Heading extraSmall>Objects</Heading>
+      <Spacer medium />
+      {#if context}
+        <Heading extraSmall>Tables</Heading>
+        <ul>
+          {#each context as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+          {/each}
+        </ul>
+      {/if}
+      {#if instance}
+        <Heading extraSmall>Components</Heading>
+        <ul>
+          {#each instance as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+    <div class="text">
+      <TextArea
+        thin
+        bind:value
+        placeholder="Add text, or click the objects on the left to add them to the
+        textbox." />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+  .list {
+    width: 150px;
+    border-right: 1.5px solid var(--grey-4);
+    padding: var(--spacing-s);
+  }
+  .text {
+    padding: var(--spacing-s);
+    font-family: var(--font-sans);
+  }
+  .text :global(p) {
+    margin: 0;
+  }
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--grey-7);
+    padding: var(--spacing-s) 0;
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    color: var(--ink);
+    font-weight: 500;
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 56d82e2940..1fe0f542aa 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Button, Icon, Drawer } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import BindingDrawer from "components/userInterface/BindingDrawer.svelte"
+  import BindingPanel from "components/userInterface/BindingPanel.svelte"
 
   export let label = ""
   export let bindable = true
@@ -17,15 +17,16 @@
   export let value
   export let props = {}
   export let onChange = () => {}
+
+  let bindingDrawer
   
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
-  let showDrawer = false
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
-    showDrawer = false
+    bindingDrawer.hide()
   }
 
   function getBindableProperties() {
@@ -95,17 +96,24 @@
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={() => showDrawer = true}>
+      on:click={bindingDrawer.show}>
       <Icon name="edit" />
     </div>
   {/if}
 </div>
-<BindingDrawer
-  {...handlevalueKey(value)}
-  close={handleClose}
-  show={showDrawer}
-  on:update={e => (temporaryBindableValue = e.detail)}
-  {bindableProperties} />
+
+<Drawer bind:this={bindingDrawer} title="Bindings">
+  <div slot="description">This describes the drawer!</div>
+  <heading slot="buttons">
+    <Button thin blue on:click={handleClose}>Save</Button>
+  </heading>
+  <div slot="body">
+    <BindingPanel {...handlevalueKey(value)}
+    close={handleClose}
+    on:update={e => (temporaryBindableValue = e.detail)}
+    {bindableProperties} />
+  </div>
+</Drawer>
 
 <style>
   .property-control {
@@ -154,8 +162,4 @@
     color: var(--ink);
     cursor: pointer;
   }
-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
 </style>

From 0004746cfffa1d9d0440171f9ea03c3de96762cb Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:47:02 +0100
Subject: [PATCH 5/8] adds missing description

---
 .../src/components/userInterface/PropertyControl.svelte      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 1fe0f542aa..e118301862 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer } from "@budibase/bbui"
+  import { Button, Icon, Drawer, Body } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -103,7 +103,7 @@
 </div>
 
 <Drawer bind:this={bindingDrawer} title="Bindings">
-  <div slot="description">This describes the drawer!</div>
+  <div slot="description"><Body extraSmall grey>Add the objects on thel eft to enrich your text.</Body></div>
   <heading slot="buttons">
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>
@@ -116,6 +116,7 @@
 </Drawer>
 
 <style>
+
   .property-control {
     position: relative;
     display: flex;

From c7726ff7fefe100081c36b66dd8bcf6f455c4e4c Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:56:02 +0100
Subject: [PATCH 6/8] fix typo

---
 .../builder/src/components/userInterface/PropertyControl.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index e118301862..0dda08f569 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -103,7 +103,7 @@
 </div>
 
 <Drawer bind:this={bindingDrawer} title="Bindings">
-  <div slot="description"><Body extraSmall grey>Add the objects on thel eft to enrich your text.</Body></div>
+  <div slot="description"><Body extraSmall grey>Add the objects on the left to enrich your text.</Body></div>
   <heading slot="buttons">
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>

From 0834eb5495f62bc899f610723e0735d95f5f0728 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 14:16:55 +0100
Subject: [PATCH 7/8] changes earlier BottomDrawer to use the bbui component
 instead

---
 .../src/builderStore/store/frontend.js        |  3 +-
 .../src/components/common/BottomDrawer.svelte | 52 -------------------
 .../EventsEditor/EventPropertyControl.svelte  | 32 +++++-------
 .../userInterface/TableViewSelect.svelte      | 22 +++-----
 4 files changed, 19 insertions(+), 90 deletions(-)
 delete mode 100644 packages/builder/src/components/common/BottomDrawer.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 13a5cbc824..ad00d2bd55 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -41,8 +41,7 @@ const INITIAL_FRONTEND_STATE = {
   hasAppPackage: false,
   libraries: null,
   appId: "",
-  routes: {},
-  bottomDrawerVisible: false,
+  routes: {}
 }
 
 export const getFrontendStore = () => {
diff --git a/packages/builder/src/components/common/BottomDrawer.svelte b/packages/builder/src/components/common/BottomDrawer.svelte
deleted file mode 100644
index dc442bc2c3..0000000000
--- a/packages/builder/src/components/common/BottomDrawer.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-  import { slide } from "svelte/transition"
-  import Portal from "svelte-portal"
-
-  export let title
-  export let onClose = () => {}
-</script>
-
-<Portal>
-  <section class="drawer" transition:slide>
-    <header>
-      {title}
-      <div class="controls">
-        <slot name="buttons" />
-        <i class="ri-close-fill close" on:click={onClose} />
-      </div>
-    </header>
-    <slot name="body" />
-  </section>
-</Portal>
-
-<style>
-  .drawer {
-    height: 50vh;
-    position: absolute;
-    bottom: 0;
-    width: 100vw;
-    background: var(--background);
-    border-top: var(--border-light);
-    z-index: 2;
-  }
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: var(--border-light);
-    padding: var(--spacing-m);
-  }
-
-  .controls {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-
-  .close {
-    font-size: var(--font-size-xl);
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index e171f31d65..9340ec4c28 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@@ -1,10 +1,8 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { Button, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import EventEditor from "./EventEditor.svelte"
-  import BottomDrawer from "components/common/BottomDrawer.svelte"
   import { automationStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
@@ -12,11 +10,7 @@
   export let value
   export let name
 
-  let drawerVisible
-
-  function showDrawer() {
-    drawerVisible = true
-  }
+  let drawer
 
   const saveEventData = async () => {
     // any automations that need created from event triggers
@@ -27,6 +21,7 @@
 
     dispatch("change", value)
     notifier.success("Component actions saved.")
+    drawer.hide()
   }
 
   // called by the parent modal when actions are saved
@@ -62,15 +57,12 @@
   }
 </script>
 
-<Button secondary small on:click={showDrawer}>Define Actions</Button>
-
-{#if drawerVisible}
-  <BottomDrawer title={'Actions'} onClose={() => (drawerVisible = false)}>
-    <heading slot="buttons">
-      <Button thin blue on:click={saveEventData}>Save</Button>
-    </heading>
-    <div slot="body">
-      <EventEditor event={value} eventType={name} />
-    </div>
-  </BottomDrawer>
-{/if}
+<Button secondary small on:click={drawer.show}>Define Actions</Button>
+<Drawer bind:this={drawer} title={'Actions'}>
+  <heading slot="buttons">
+    <Button thin blue on:click={saveEventData}>Save</Button>
+  </heading>
+  <div slot="body">
+    <EventEditor event={value} eventType={name} />
+  </div>
+</Drawer>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index dc34923deb..c0ad36a79f 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -1,16 +1,15 @@
 <script>
-  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
+  import { Button, Icon, DropdownMenu, Spacer, Heading, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import BottomDrawer from "components/common/BottomDrawer.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
   let anchorRight, dropdownRight
-  let bindingDrawerOpen
+  let drawer
 
   export let value = {}
 
@@ -73,14 +72,6 @@
     dropdownRight.hide()
   }
 
-  function openBindingDrawer() {
-    bindingDrawerOpen = true
-  }
-
-  function closeDatabindingDrawer() {
-    bindingDrawerOpen = false
-  }
-
   function fetchDatasourceSchema(query) {
     const source = $backendUiStore.datasources.find(
       ds => ds._id === query.datasourceId
@@ -99,9 +90,8 @@
   <Icon name="arrowdown" />
 </div>
 {#if value.type === 'query'}
-  <i class="ri-settings-5-line" on:click={openBindingDrawer} />
-  {#if bindingDrawerOpen}
-    <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
+  <i class="ri-settings-5-line" on:click={drawer.show} />
+    <Drawer title={'Query'}>
       <div slot="buttons">
         <Button
           blue
@@ -109,6 +99,7 @@
           on:click={() => {
             notifier.success('Query parameters saved.')
             handleSelected(value)
+            drawer.hide()
           }}>
           Save
         </Button>
@@ -126,9 +117,8 @@
             bindings={queryBindableProperties} />
         {/if}
       </div>
-    </BottomDrawer>
+    </Drawer>
   {/if}
-{/if}
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">

From e31dd64e46e70b7087f2f9b9aa2cdf289810503e Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 14:31:37 +0100
Subject: [PATCH 8/8] lint fix

---
 packages/builder/src/builderStore/store/frontend.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index ad00d2bd55..2082a3e49b 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -41,7 +41,7 @@ const INITIAL_FRONTEND_STATE = {
   hasAppPackage: false,
   libraries: null,
   appId: "",
-  routes: {}
+  routes: {},
 }
 
 export const getFrontendStore = () => {