wip: fixes a couple of drawers

5 years ago · 9f5393a7ac
3 changed files with 27 additions and 43 deletions
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@ -40,9 +40,9 @@
          <Heading xs>{title}</Heading>
          <Body xxs><slot name="description" /></Body>
        </div>
-        <div class="controls">
+        <div class="buttons">
          <slot name="buttons" />
-          <ActionButton quiet icon="Close" on:click={hide} />
+          <ActionButton selected quiet icon="Close" on:click={hide} />
        </div>
      </header>
      <slot name="body" />
@ -66,22 +66,17 @@
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-light);
-    padding: 0 var(--spectrum-alias-item-padding-s) ;
+    padding: var(--spectrum-alias-item-padding-s) 0;
  }
  header :global(*) + :global(*) {
-    margin: var(--spectrum-alias-grid-baseline);
+    margin: 0 var(--spectrum-alias-grid-baseline);
  }

-  .controls {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spectrum-alias-item-padding-s);
-    align-items: center;
-  }
  .text {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
+    margin-left: var(--spectrum-alias-item-padding-s);
  }
 </style>
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Icon, Input, Drawer, Body, Button } from "@budibase/bbui"
+  import { Icon, Input, Drawer, Button } from "@budibase/bbui"
  import {
    readableToRuntimeBinding,
    runtimeToReadableBinding,
@ -10,7 +10,6 @@
  export let panel = BindingPanel
  export let value = ""
  export let bindings = []
-  export let thin = true
  export let title = "Bindings"
  export let placeholder
  export let label
@ -41,22 +40,17 @@
  </div>
 </div>
 <Drawer bind:this={bindingDrawer} {title}>
-  <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>
-  <div slot="body">
-    <svelte:component
-      this={panel}
-      value={readableValue}
-      close={handleClose}
-      on:update={event => (tempValue = event.detail)}
-      bindableProperties={bindings} />
-  </div>
+  <svelte:fragment slot="description">
+    Add the objects on the left to enrich your text.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
+  <svelte:component
+    slot="body"
+    this={panel}
+    value={readableValue}
+    close={handleClose}
+    on:update={event => (tempValue = event.detail)}
+    bindableProperties={bindings} />
 </Drawer>

 <style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -90,22 +90,17 @@
      <Icon s name="FlashOn" />
    </div>
    <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
-      <div slot="description">
-        <Body extraSmall grey>
+      <svelte:fragment slot="description">
          Add the objects on the left to enrich your text.
-        </Body>
-      </div>
-      <heading slot="buttons">
-        <Button thin blue disabled={!valid} on:click={handleClose}>Save</Button>
-      </heading>
-      <div slot="body">
-        <BindingPanel
-          bind:valid
-          value={safeValue}
-          close={handleClose}
-          on:update={e => (temporaryBindableValue = e.detail)}
-          {bindableProperties} />
-      </div>
+      </svelte:fragment>
+      <Button cta slot="buttons" disabled={!valid} on:click={handleClose}>Save</Button>
+      <BindingPanel
+        slot="body"
+        bind:valid
+        value={safeValue}
+        close={handleClose}
+        on:update={e => (temporaryBindableValue = e.detail)}
+        {bindableProperties} />
    </Drawer>
  {/if}
 </div>