Merge branch 'spectrum-bbui' of github.com:Budibase/budibase into spectrum-bbui

2021-04-13 18:08:55 +01:00 · 2021-04-13 18:08:55 +01:00 · 758297a093
parent 8af2b8f2a0 744f943e95
commit 758297a093
40 changed files with 280 additions and 288 deletions
--- a/package.json
+++ b/package.json
@ -40,6 +40,10 @@
    "build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
  },
  "dependencies": {
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/actiongroup": "^1.0.1",
+    "@spectrum-css/link": "^3.1.1",
+    "@spectrum-css/menu": "^3.0.1",
    "@spectrum-css/toast": "^3.0.1"
  }
 }
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@ -0,0 +1,65 @@
+<script>
+    import "@spectrum-css/actionbutton/dist/index-vars.css"
+    import { createEventDispatcher } from "svelte"
+    const dispatch = createEventDispatcher()
+
+    
+    /** @type {('S', 'M', 'L', 'XL')} Size of button */
+    export let size = "M";
+    export let quiet = false;
+    export let emphasized = false;
+    export let selected = false
+    export let longPressable = false;
+    export let disabled = false
+    export let icon = '';
+
+    function longPress(element) {
+        if (!longPressable) return
+        let timer
+
+        const listener = () => {
+            timer = setTimeout(() => {
+                dispatch('longpress')
+            }, 700)
+        }
+
+        element.addEventListener('pointerdown', listener)
+
+        return {
+            destroy() {
+                clearTimeout(timer)
+                element.removeEventListener('pointerdown', longPress)
+            }
+        }
+    }
+</script>
+  
+
+<button 
+    use:longPress
+    class:spectrum-ActionButton--quiet={quiet}
+    class:spectrum-ActionButton--emphasized={emphasized}
+    class:is-selected={selected}
+    class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}"
+    {disabled}
+    on:longPress
+    on:click|preventDefault>
+    {#if longPressable}
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
+        </svg>
+    {/if}
+    {#if icon}
+        <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
+            <use xlink:href="#spectrum-icon-18-{icon}" />
+        </svg>
+    {/if}
+    {#if $$slots} 
+        <span class="spectrum-ActionButton-label"><slot /></span>
+    {/if}
+</button>
+  
+  <style>
+  
+  </style>
+  
--- a/packages/bbui/src/ActionGroup/ActionGroup.svelte
+++ b/packages/bbui/src/ActionGroup/ActionGroup.svelte
@ -0,0 +1,24 @@
+<script>
+    import "@spectrum-css/actiongroup/dist/index-vars.css"
+    export let vertical;
+    export let justified;
+    export let quiet;
+    export let compact;
+
+    // Attaches a spectrum-ActionGroup-item class to buttons inside the div
+    function group(element) {
+        const buttons = Array.from(element.getElementsByTagName('button'))
+        buttons.forEach(button => {
+            button.classList.add('spectrum-ActionGroup-item')
+        })
+    }
+</script>
+
+<div use:group
+    class:spectrum-ActionGroup--vertical={vertical}
+    class:spectrum-ActionGroup--justified={justified}
+    class:spectrum-ActionGroup--quiet={quiet}
+    class:spectrum-ActionGroup--compact={compact}
+    class="spectrum-ActionGroup">
+    <slot />
+</div>
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@ -0,0 +1,30 @@
+<script>
+    import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte'
+    import Menu from '../Menu/Menu.svelte'
+    let anchor;
+    let dropdown;
+
+    // This is needed because display: contents is considered "invisible".
+    // It should only ever be an action button, so should be fine.
+    function getAnchor(node) {
+        anchor = node.firstChild
+    }
+    
+    export const hide = () => { dropdown.hide() }
+    export const show = () => { dropdown.show() }
+</script>
+
+<div class="contents" use:getAnchor  on:click={dropdown.show}>
+    <slot name="button" />
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="left">
+    <Menu>
+        <slot />
+    </Menu>
+</DropdownMenu>
+
+<style>
+    div {
+        display: contents;
+    }
+</style>
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@ -18,10 +18,10 @@ export default function positionDropdown(element, { anchor, align }) {
    if (spaceAbove > spaceBelow) {
      positionSide = "bottom"
      maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove
+      y = window.innerHeight - spaceAbove + 5
    } else {
      positionSide = "top"
-      y = bottom
+      y = bottom + 5
      maxHeight = spaceBelow - 20
    }

--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@ -1,15 +1,13 @@
 <script>
  import "@spectrum-css/button/dist/index-vars.css"

-
-
-  export let href = false
  export let disabled = false

  /** @type {('S', 'M', 'L', 'XL')} Size of button */
  export let size = "M";
-  /** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
-  export let type = "primary"
+
+  // Types
+  export let cta, primary, secondary, warning, overBackground;

  export let quiet = false
  
@ -17,33 +15,25 @@
 </script>


-{#if href}
-  <a
-    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()}"
-    {href}
-    {disabled}>
-    {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
+<button
+  class:spectrum-Button--cta={cta}
+  class:spectrum-Button--primary={primary}
+  class:spectrum-Button--secondary={secondary}
+  class:spectrum-Button--warning={warning}
+  class:spectrum-Button--overBackground={overBackground}
+  class:spectrum-Button--quiet={quiet}
+  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+  {disabled}
+  on:click|preventDefault>
+  {#if icon}
+    <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots} 
    <span class="spectrum-Button-label"><slot /></span>
-  </a>
-{:else}
-  <button
-    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()} {quiet && 'spectrum-Button--quiet'}"
-    {disabled}
-    on:click|preventDefault>
-    {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
-    {#if $$slots} 
-      <span class="spectrum-Button-label"><slot /></span>
-    {/if}
-  </button>
-{/if}
+  {/if}
+</button>

 <style>

--- a/packages/bbui/src/Button/TextButton.svelte
+++ b/packages/bbui/src/Button/TextButton.svelte
@ -1,128 +0,0 @@
-<script>
-  export let active = false,
-    text = false,
-    small = false,
-    medium = false,
-    large = false,
-    blue = false,
-    green = false,
-    yellow = false,
-    purple = false,
-    red = false,
-    orange = false,
-    disabled = false,
-    href = false
-</script>
-
-{#if href}
-  <a
-    {href}
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange><slot /></a>
-{:else}
-  <button
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange
-    {disabled}
-    on:click|preventDefault>
-    <slot />
-  </button>
-{/if}
-
-<style>
-  button,
-  a {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
-    overflow: hidden;
-    transition: all 0.08s ease 0s;
-    display: inline-flex;
-    align-items: center;
-    text-rendering: optimizeLegibility;
-    text-decoration: none;
-    outline: none;
-    -webkit-box-align: center;
-    user-select: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .text {
-    background-color: transparent;
-    color: var(--grey-7);
-    border: none;
-    font-weight: 500;
-  }
-  button.text:hover:not([disabled]) {
-    color: var(--ink);
-  }
-  button.text:active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text.active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text:disabled {
-    cursor: not-allowed;
-    color: var(--grey-4);
-  }
-
-  .blue {
-    color: var(--blue);
-  }
-
-  .green {
-    color: var(--green);
-  }
-
-  .red {
-    color: var(--red);
-  }
-
-  .purple {
-    color: var(--purple);
-  }
-
-  .yellow {
-    color: var(--yellow);
-  }
-
-  .orange {
-    color: var(--orange);
-  }
-
-  .small {
-    font-size: var(--font-size-xs);
-    margin: 0;
-  }
-
-  .medium {
-    font-size: var(--font-size-s);
-    margin: 0;
-  }
-
-  .large {
-    font-size: var(--font-size-m);
-    margin: 0;
-  }
-</style>
--- a/packages/bbui/src/Button/TextButton.svench
+++ b/packages/bbui/src/Button/TextButton.svench
@ -1,69 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextButton from "./TextButton.svelte";
-  import Icon from "../Icons/Icon.svelte";
-</script>
-
-<style>
-  div {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: var(--spacing-xl);
-  }
-</style>
-
-<View name="Text">
-  <div>
-    <TextButton text small on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text large on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text disabled on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" direction="w" />
-      Disabled Text Button
-    </TextButton>
-    <TextButton active text on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Active Calculation
-    </TextButton>
-  </div>
-</View>
-
-<View name="Colours">
-  <div>
-    <TextButton text medium yellow on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium blue on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text medium purple on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text medium red on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" />
-      Delete
-    </TextButton>
-    <TextButton text medium green on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Calculate
-    </TextButton>
-  </div>
-</View>
-
-<View name="Usage as a link">
-  <div>
-    <TextButton green text href="https://google.com">This is a link</TextButton>
-  </div>
-</View>
--- a/packages/bbui/src/DatePicker/DatePicker.svelte
+++ b/packages/bbui/src/DatePicker/DatePicker.svelte
@ -1,6 +1,6 @@
 <script>
  import Flatpickr from "svelte-flatpickr"
-  import { Label, Input } from "../"
+  import { Label } from "../"
  import "flatpickr/dist/flatpickr.css"

  const PICKER_OPTIONS = {
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@ -1,7 +1,7 @@
 <script>
  import { slide } from "svelte/transition"
  import Portal from "svelte-portal"
-  import clickOutside from "../Actions/click_outside"
+  import ActionButton from '../ActionButton/ActionButton.svelte'

  export let title

@ -40,7 +40,7 @@
        </div>
        <div class="controls">
          <slot name="buttons" />
-          <i class="ri-close-fill close" on:click={hide} />
+          <ActionButton quiet icon="Close" on:click={hide} />
        </div>
      </header>
      <slot name="body" />
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@ -0,0 +1,17 @@
+<script>
+    import "@spectrum-css/link/dist/index-vars.css"
+
+    export let href = "#"
+    export let size = "M"
+    export let quiet = false;
+    export let primary = false;
+    export let secondary = false;
+    export let overBackground = false
+</script>
+
+<a {href}
+    class:spectrum-Link--primary={primary}
+    class:spectrum-Link--secondary={secondary}
+    class:spectrum-Link--overBackground={overBackground}
+    class:spectrum-Link--quiet={quiet}
+class="spectrum-Link spectrum-Link--size{size}"><slot /></a>
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@ -0,0 +1,15 @@
+<script>
+    export let icon = undefined;
+    export let disabled = undefined;
+</script>
+
+<li on:click class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
+    <span class="spectrum-Menu-itemLabel">
+        {#if icon}
+            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
+                <use xlink:href="#spectrum-icon-18-{icon}"></use>
+            </svg>
+        {/if}
+        <span class="spectrum-Menu-itemLabel"><slot /></span>
+    </span>
+</li>
--- a/packages/bbui/src/Menu/Menu.svelte
+++ b/packages/bbui/src/Menu/Menu.svelte
@ -0,0 +1,7 @@
+<script>
+    import "@spectrum-css/menu/dist/index-vars.css"
+</script>
+
+<ul class="spectrum-Menu" role="menu">
+    <slot />
+</ul>
--- a/packages/bbui/src/Menu/Menu.svench
+++ b/packages/bbui/src/Menu/Menu.svench
@ -0,0 +1,19 @@
+<script>
+    import Menu from './Menu.svelte'
+    import Separator from './Separator.svelte'
+    import Section from './Section.svelte'
+    import Item from './Item.svelte'
+</script>
+
+<Menu>
+    <Section heading="Section heading">
+        <Item>Some Item 1</Item>
+        <Item>Some Item 2</Item>
+        <Item>Some Item 3</Item>
+    </Section>
+    <Separator />
+    <Section heading="Section heading">
+        <Item icon="SaveFloppy">Save</Item>
+        <Item disabled icon="DataDownload">Download</Item>
+    </Section>
+</Menu>
--- a/packages/bbui/src/Menu/Section.svelte
+++ b/packages/bbui/src/Menu/Section.svelte
@ -0,0 +1,9 @@
+<script>
+    export let heading
+</script>
+<li role="presentation">
+<span class="spectrum-Menu-sectionHeading">{heading}</span>
+    <ul class="spectrum-Menu" role="group">
+        <slot />
+    </ul>
+</li>
--- a/packages/bbui/src/Menu/Separator.svelte
+++ b/packages/bbui/src/Menu/Separator.svelte
@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator"></li>
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -46,11 +46,11 @@
        <div class="spectrum-ButtonGroup-item">
          <slot name="footer" />
          {#if showCancelButton}
-            <Button type="secondary" on:click={hide}>{cancelText}</Button>
+            <Button secondary on:click={hide}>{cancelText}</Button>
          {/if}
          {#if showConfirmButton}
            <Button
-            type="cta"
+            cta
              primary
              {...$$restProps}
              disabled={confirmDisabled}
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@ -8,9 +8,11 @@ export { default as Select } from "./Form/Select.svelte"
 export { default as DataList } from "./Form/DataList.svelte"
 export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
+export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
-export { default as TextButton } from "./Button/TextButton.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as Radio } from "./Form/Radio.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
@ -22,7 +24,12 @@ export { default as Popover } from "./Popover/Popover.svelte"
 export { default as Body } from "./Styleguide/Body.svelte"
 export { default as Heading } from "./Styleguide/Heading.svelte"
 export { default as Label } from "./Styleguide/Label.svelte"
+export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
+export { default as Menu } from "./Menu/Menu.svelte"
+export { default as MenuSection } from "./Menu/Section.svelte"
+export { default as MenuSeparator } from "./Menu/Separator.svelte"
+export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@ -1,7 +1,7 @@
 <script>
  import { sortBy } from "lodash/fp"
  import { automationStore } from "builderStore"
-  import { Button, DropdownMenu, Modal } from "@budibase/bbui"
+  import { ActionButton, DropdownMenu, Modal } from "@budibase/bbui"
  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
  import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"

@ -64,14 +64,14 @@
 <div class="tab-container">
  {#each tabs as tab, idx}
  <div bind:this={anchors[idx]}>
-    <Button
+    <ActionButton
      size="S"
      quiet
      icon={tab.icon}
      disabled={tab.disabled}
      on:click={tab.disabled ? null : () => onChangeTab(idx)}>
        {tab.label}
-      </Button>
+      </ActionButton>
    </div>
  {/each}
 </div>
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -92,7 +92,7 @@
  </div>
 {/each}
 {#if stepId === 'WEBHOOK'}
-  <Button type="secondary" on:click={() => webhookModal.show()}>
+  <Button secondary on:click={() => webhookModal.show()}>
    Set Up Webhook
  </Button>
 {/if}
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@ -65,7 +65,7 @@
    {webhookModal} />
 {:else if $automationStore.selectedAutomation}
  <div class="block-label">{automation.name}</div>
-  <Button type="secondary" on:click={testAutomation}>Test Automation</Button>
+  <Button secondary on:click={testAutomation}>Test Automation</Button>
 {/if}
 <Button
  secondary
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@ -9,7 +9,7 @@
 </script>

 <div bind:this={anchor}>
-  <Button icon="Calculator" type="overBackground" size="S" quiet
+  <Button icon="Calculator" primary size="S" quiet
    on:click={dropdown.show}
    active={view.field && view.calculation}>
    Calculate
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@ -10,7 +10,7 @@
  let modal
 </script>

-<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
+<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
  Create New Column
 </Button>
 <Modal bind:this={modal}>
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@ -8,7 +8,7 @@
  let modal
 </script>

-<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
+<Button icon="Add" primary size="S" quiet on:click={modal.show}>
  {title}
 </Button>
 <Modal bind:this={modal}>
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@ -7,7 +7,7 @@
 </script>

 <div bind:this={anchor}>
-  <Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
+  <Button icon="CollectionAdd" primary size="S" quiet on:click={dropdown.show}>
    Create New View
  </Button>
 </div>
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@ -13,7 +13,7 @@
  }
 </script>

-<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
+<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
  Delete
  {selectedRows.length}
  row(s)
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@ -6,7 +6,7 @@
 </script>

 <div>
-  <Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
+  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
    Edit Roles
  </Button>
 </div>
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@ -9,7 +9,7 @@
 </script>

 <div bind:this={anchor}>
-  <Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
+  <Button icon="Download" primary size="S" quiet on:click={dropdown.show}>
    Export
  </Button>
 </div>
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@ -9,7 +9,7 @@
 </script>

 <div bind:this={anchor}>
-  <Button icon="Filter" type="overBackground" size="S" quiet
+  <Button icon="Filter" primary size="S" quiet
    on:click={dropdown.show}
    active={view.filters && view.filters.length}>
    Filter
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@ -9,7 +9,7 @@
 </script>

 <div bind:this={anchor}>
-  <Button icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
+  <Button icon="Group" primary size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
    Group By
  </Button>
 </div>
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@ -12,7 +12,7 @@
 </script>

 <div bind:this={anchor}>
-  <Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
+  <Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
    {#if hideAutocolumns}
      Show Auto Columns
    {:else}
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@ -16,7 +16,7 @@
 </script>

 <div bind:this={anchor}>
-  <Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
+  <Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
    Manage Access
  </Button>
 </div>
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -288,10 +288,10 @@
  {/if}
  <footer class="create-column-options">
    {#if !uneditable && originalName != null}
-      <Button type="warning" size="S" text on:click={confirmDelete}>Delete Column</Button>
+      <Button warning size="S" text on:click={confirmDelete}>Delete Column</Button>
    {/if}
    <Button on:click={onClosed}>Cancel</Button>
-    <Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
+    <Button cta on:click={saveColumn} bind:disabled={invalid}>
      Save Column
    </Button>
  </footer>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@ -81,7 +81,7 @@
  {/each}
  <div>
    <Spacer small />
-    <Button icon="AddCircle" size="S" type="cta" on:click={addField}>
+    <Button icon="AddCircle" size="S" cta on:click={addField}>
      Add
      {fieldLabel}
    </Button>
--- a/packages/builder/src/components/settings/tabs/APIKeys.svelte
+++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Input, Label, TextButton } from "@budibase/bbui"
+  import { Input, Label, Link } from "@budibase/bbui"
  import api from "builderStore/api"
  import { notifications } from "@budibase/bbui"
  import { database } from "stores/backend"
@ -41,9 +41,9 @@
    edit
    value={keys.budibase}
    label="Budibase Cloud API Key" />
-  <TextButton text medium blue href="https://portal.budi.live">
+  <Link primary href="https://portal.budi.live">
    Log in to the Budibase Hosting Portal to get your API Key. →
-  </TextButton>
+  </Link>
  <div>
    <Label extraSmall grey>Instance ID (Webhooks)</Label>
    <span>{$database._id}</span>
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@ -1,6 +1,6 @@
 <script>
  import { params, goto } from "@roxi/routify"
-  import { Input, TextArea, Button, Body } from "@budibase/bbui"
+  import { Input, Button, Body } from "@budibase/bbui"
  import { del } from "builderStore/api"

  let value = ""
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -1,8 +1,6 @@
 <script>  
-  import { TextButton } from "@budibase/bbui"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
-  import api from "builderStore/api"
+  import { goto } from "@roxi/routify"
+  import { ActionButton, Heading, Spacer } from "@budibase/bbui"
  import { notifications } from "@budibase/bbui"
  import Spinner from "components/common/Spinner.svelte"
  import download from "downloadjs"
@ -31,11 +29,11 @@
  <Heading small black>{name}</Heading>
  <Spacer medium />
  <div class="card-footer" data-cy={`app-${name}`}>
-    <TextButton text medium blue href="/builder/{_id}">
+    <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
      Open
      {name}
      →
-    </TextButton>
+    </ActionButton>
    {#if appExportLoading}
      <Spinner size="10" />
    {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
--- a/packages/builder/src/components/start/BuilderSettingsButton.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsButton.svelte
@ -1,32 +1,15 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
  import BuilderSettingsModal from "./BuilderSettingsModal.svelte"

  let modal
 </script>

 <div>
-  <Button text on:click={modal.show}>
-    <i class="ri-settings-3-fill" />
-    <p>Settings</p>
+  <Button overBackground quiet icon="Settings" text on:click={modal.show}>
+    Settings
  </Button>
 </div>
 <Modal bind:this={modal} width="30%">
  <BuilderSettingsModal />
 </Modal>
-
-<style>
-  div i {
-    font-size: 26px;
-    color: var(--grey-7);
-    margin-left: 12px;
-  }
-
-  div p {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    color: var(--ink);
-    font-weight: 400;
-    margin: 0 0 0 12px;
-  }
-</style>
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@ -3,7 +3,7 @@
  import AppList from "components/start/AppList.svelte"
  import { get } from "builderStore/api"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Menu, MenuSection, MenuItem } from "@budibase/bbui"
  import TemplateList from "components/start/TemplateList.svelte"
  import analytics from "analytics"
  import Banner from "/assets/orange-landscape.png"
@ -61,7 +61,7 @@
    <div class="button-group">
      <Button secondary on:click={initiateAppImport}>Import Web App</Button>
      <Spacer medium />
-      <Button primary on:click={modal.show}>Create New Web App</Button>
+      <Button cta on:click={modal.show}>Create New Web App</Button>
    </div>
  </div>

--- a/yarn.lock
+++ b/yarn.lock
@ -824,6 +824,26 @@
    estree-walker "^1.0.1"
    micromatch "^4.0.2"

+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+
+"@spectrum-css/actiongroup@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c"
+  integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA==
+
+"@spectrum-css/link@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb"
+  integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA==
+
+"@spectrum-css/menu@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
+  integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
+
 "@spectrum-css/toast@^3.0.1":
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
				`@ -0,0 +1 @@`
				`<li class="spectrum-Menu-divider" role="separator"></li>`