Make any drawer expandable

packages/bbui/src/Drawer/Drawer.svelte

@@ -61,6 +61,7 @@
   import Button from "../Button/Button.svelte"
   import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
+  import { Icon, ActionButton } from "@budibase/bbui"
 
   export let title
   export let forceModal = false
@@ -184,10 +185,24 @@
         {style}
       >
         <header>
-          <div class="text">{title || "Bindings"}</div>
+          {#if $$slots.title}
+            <slot name="title" />
+          {:else}
+            <div class="text">{title || "Bindings"}</div>
+          {/if}
           <div class="buttons">
             <Button secondary quiet on:click={hide}>Cancel</Button>
             <slot name="buttons" />
+            {#if $resizable}
+              <ActionButton
+                size="M"
+                quiet
+                selected={$modal}
+                on:click={() => modal.set(!$modal)}
+              >
+                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+              </ActionButton>
+            {/if}
           </div>
         </header>
         <slot name="body" />
@@ -274,4 +289,8 @@
     align-items: center;
     gap: var(--spacing-m);
   }
+  .buttons :global(.icon) {
+    width: 16px;
+    display: flex;
+  }
 </style>

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -30,7 +30,6 @@
   import formatHighlight from "json-format-highlight"
   import { capitalise } from "helpers"
   import { Utils } from "@budibase/frontend-core"
-  import { get } from "svelte/store"
 
   const dispatch = createEventDispatcher()
 
@@ -46,7 +45,6 @@
   export let autofocusEditor = false
   export let placeholder = null
 
-  const drawerContext = getContext("drawer")
   const Modes = {
     Text: "Text",
     JavaScript: "JavaScript",
@@ -66,10 +64,8 @@
   let insertAtPos
   let targetMode = null
   let expressionResult
-  let drawerIsModal
   let evaluating = false
 
-  $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(
     bindings,
@@ -239,18 +235,22 @@
   <div class="binding-panel">
     <div class="main">
       <div class="tabs">
-        <div class="editor-tabs">
+        {#if $$slots.tabs}
-          {#each editorModeOptions as editorMode}
+          <slot name="tabs" />
-            <ActionButton
+        {:else}
-              size="M"
+          <div class="editor-tabs">
-              quiet
+            {#each editorModeOptions as editorMode}
-              selected={mode === editorMode}
+              <ActionButton
-              on:click={() => changeMode(editorMode)}
+                size="M"
-            >
+                quiet
-              {capitalise(editorMode)}
+                selected={mode === editorMode}
-            </ActionButton>
+                on:click={() => changeMode(editorMode)}
-          {/each}
+              >
-        </div>
+                {capitalise(editorMode)}
+              </ActionButton>
+            {/each}
+          </div>
+        {/if}
         <div class="side-tabs">
           {#each sidePanelOptions as panel}
             <ActionButton
@@ -262,16 +262,6 @@
               <Icon name={panel} size="S" />
             </ActionButton>
           {/each}
-          {#if drawerContext && get(drawerContext.resizable)}
-            <ActionButton
-              size="M"
-              quiet
-              selected={drawerIsModal}
-              on:click={() => drawerContext.modal.set(!drawerIsModal)}
-            >
-              <Icon name={drawerIsModal ? "Minimize" : "Maximize"} size="S" />
-            </ActionButton>
-          {/if}
         </div>
       </div>
       <div class="editor">

packages/builder/src/components/common/bindings/SnippetDrawer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Drawer } from "@budibase/bbui"
+  import { Button, Drawer, Input } from "@budibase/bbui"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
   import { snippetStore } from "stores/builder"
@@ -47,7 +47,11 @@
         placeholder="return function(input) &#10100; ... &#10101;"
         value={code}
         on:change={e => (code = e.detail)}
-      />
+      >
+        <div slot="tabs">
+          <Input placeholder="Name" />
+        </div>
+      </BindingPanel>
     {/key}
   </svelte:fragment>
 </Drawer>