actually convert table command buttons

packages/builder/src/App.svelte

@@ -14,3 +14,10 @@
 
 <NotificationDisplay />
 <Router {routes} {config} />
+<div class="modal-container" />
+
+<style>
+  .modal-container {
+    position: absolute;
+  }
+</style>

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -92,7 +92,7 @@
   </div>
 {/each}
 {#if stepId === 'WEBHOOK'}
-  <Button wide secondary on:click={() => webhookModal.show()}>
+  <Button type="secondary" on:click={() => webhookModal.show()}>
     Set Up Webhook
   </Button>
 {/if}

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 secondary wide on:click={testAutomation}>Test Automation</Button>
+  <Button type="secondary" on:click={testAutomation}>Test Automation</Button>
 {/if}
 <Button
   secondary

packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import { Popover, Button } from "@budibase/bbui"
   import CalculatePopover from "../popovers/CalculatePopover.svelte"
 
   export let view = {}
@@ -9,14 +9,11 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton
+  <Button icon="Calculator" type="overBackground" size="S" quiet
-    text
-    small
     on:click={dropdown.show}
     active={view.field && view.calculation}>
-    <Icon name="calculate" />
     Calculate
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <CalculatePopover {view} onClosed={dropdown.hide} />

packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte

@@ -1,7 +1,6 @@
 <script>
   import {
-    DropdownMenu,
+    Button,
-    TextButton as Button,
     Icon,
     Modal,
     ModalContent,
@@ -9,15 +8,11 @@
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   let modal
-  let fieldName
 </script>
 
-<div>
+<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
-  <Button text small on:click={modal.show}>
-    <Icon name="addcolumn" />
   Create New Column
 </Button>
-</div>
 <Modal bind:this={modal}>
   <ModalContent
     showCancelButton={false}

packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { TextButton as Button, Icon, Modal } from "@budibase/bbui"
+  import { Button, Icon, Modal } from "@budibase/bbui"
   import CreateEditRow from "../modals/CreateEditRow.svelte"
 
   export let modalContentComponent = CreateEditRow
@@ -8,12 +8,9 @@
   let modal
 </script>
 
-<div>
+<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
-  <Button text small on:click={modal.show}>
-    <Icon name="addrow" />
   {title}
 </Button>
-</div>
 <Modal bind:this={modal}>
   <svelte:component this={modalContentComponent} />
 </Modal>

packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import { Popover, Button } from "@budibase/bbui"
   import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
 
   let anchor
@@ -7,10 +7,9 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
+  <Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
-    <Icon name="view" />
     Create New View
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <CreateViewPopover onClosed={dropdown.hide} />

packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { TextButton, Icon } from "@budibase/bbui"
+  import { Button, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let selectedRows
@@ -13,14 +13,11 @@
   }
 </script>
 
-<div>
+<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
-  <TextButton small text on:click={modal.show}>
-    <Icon name="delete" />
   Delete
   {selectedRows.length}
   row(s)
-  </TextButton>
+</Button>
-</div>
 <ConfirmDialog
   bind:this={modal}
   okText="Delete"

packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte

@@ -1,23 +1,15 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
 <div>
-  <Button text small on:click={modal.show}>
+  <Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
-    <i class="ri-lock-line" />
     Edit Roles
   </Button>
 </div>
 <Modal bind:this={modal}>
   <EditRolesModal />
 </Modal>
-
-<style>
-  i {
-    margin-right: var(--spacing-xs);
-    font-size: var(--font-size-s);
-  }
-</style>

packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { TextButton, Icon, Popover } from "@budibase/bbui"
+  import { Button, Icon, Popover } from "@budibase/bbui"
-  import api from "builderStore/api"
   import ExportPopover from "../popovers/ExportPopover.svelte"
 
   export let view
@@ -10,10 +9,9 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
+  <Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
-    <Icon name="download" />
     Export
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <ExportPopover {view} onClosed={dropdown.hide} />

packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import { Popover, Button, Icon } from "@budibase/bbui"
   import FilterPopover from "../popovers/FilterPopover.svelte"
 
   export let view = {}
@@ -9,14 +9,11 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton
+  <Button icon="Filter" type="overBackground" size="S" quiet
-    text
-    small
     on:click={dropdown.show}
     active={view.filters && view.filters.length}>
-    <Icon name="filter" />
     Filter
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <FilterPopover {view} onClosed={dropdown.hide} />

packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte

@@ -9,8 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
+  <TextButton icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
-    <Icon name="group" />
     Group By
   </TextButton>
 </div>

packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { TextButton } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
 
   export let hideAutocolumns
 
@@ -12,12 +12,13 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={hideOrUnhide}>
+  <Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
     {#if hideAutocolumns}
-      <i class="ri-magic-line" />
       Show Auto Columns
-    {:else}<i class="ri-magic-fill" /> Hide Auto Columns{/if}
+    {:else}
-  </TextButton>
+      Hide Auto Columns
+    {/if}
+  </Button>
 </div>
 
 <style>

packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { TextButton, Popover } from "@budibase/bbui"
+  import { Button, Popover } from "@budibase/bbui"
   import { permissions } from "stores/backend"
   import ManageAccessPopover from "../popovers/ManageAccessPopover.svelte"
 
@@ -16,10 +16,9 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={openDropdown}>
+  <Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
-    <i class="ri-lock-line" />
     Manage Access
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <ManageAccessPopover
@@ -28,10 +27,3 @@
     permissions={resourcePermissions}
     onClosed={dropdown.hide} />
 </Popover>
-
-<style>
-  i {
-    margin-right: var(--spacing-xs);
-    font-size: var(--font-size-s);
-  }
-</style>

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -291,8 +291,8 @@
     {#if !uneditable && originalName != null}
       <TextButton text on:click={confirmDelete}>Delete Column</TextButton>
     {/if}
-    <Button secondary on:click={onClosed}>Cancel</Button>
+    <Button on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveColumn} bind:disabled={invalid}>
+    <Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
       Save Column
     </Button>
   </footer>
@@ -319,7 +319,6 @@
   .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
-    min-width: 400px;
   }
 
   footer {

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte

@@ -56,7 +56,7 @@
 
   .integration-list {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat( auto-fit, minmax(150px, 1fr));
     grid-gap: var(--spacing-m);
   }
 
@@ -68,7 +68,6 @@
     transition: 0.3s all;
     border-radius: var(--border-radius-s);
     height: 75px;
-    width: 200px;
   }
 
   span {

packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte

@@ -41,6 +41,7 @@
 
 <ModalContent
   title="Create Datasource"
+  size="large"
   confirmText="Create"
   onConfirm={saveDatasource}
   disabled={error || !name}>

packages/builder/src/pages/builder/index.svelte

@@ -76,7 +76,6 @@
 
   <AppList />
 </div>
-<div id="modal-container" />
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
   <CreateAppModal {hasKey} {template} />
@@ -122,8 +121,4 @@
     display: flex;
     flex-direction: row;
   }
-
-  #modal-container {
-    position: absolute;
-  }
 </style>