Update all backend buttons to be action buttons. Add missing ActionMenu conversion to views

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -41,14 +41,12 @@
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   {disabled}
   on:longPress
-  on:click|preventDefault
->
+  on:click|preventDefault>
   {#if longPressable}
     <svg
       class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
       focusable="false"
-      aria-hidden="true"
-    >
+      aria-hidden="true">
       <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
     </svg>
   {/if}
@@ -57,8 +55,7 @@
       class="spectrum-Icon spectrum-Icon--size{size}"
       focusable="false"
       aria-hidden="true"
-      aria-label={icon}
-    >
+      aria-label={icon}>
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
@@ -66,9 +63,3 @@
     <span class="spectrum-ActionButton-label"><slot /></span>
   {/if}
 </button>
-
-<style>
-  span {
-    text-transform: capitalize;
-  }
-</style>

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

@@ -57,7 +57,7 @@
   <CreateColumnButton />
   {#if schema && Object.keys(schema).length > 0}
     <CreateRowButton
-      title={isUsersTable ? 'Create New User' : 'Create New Row'}
+      title={isUsersTable ? 'Create user' : 'Create row'}
       modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
     <CreateViewButton />
     <ManageAccessButton resourceId={$tables.selected?._id} />

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

@@ -1,5 +1,5 @@
 <script>
-  import { Modal, Button } from "@budibase/bbui"
+  import { Modal, ActionButton } from "@budibase/bbui"
   import CalculateModal from "../modals/CalculateModal.svelte"
 
   export let view = {}
@@ -7,15 +7,14 @@
   let modal
 </script>
 
-<Button
+<ActionButton
   icon="Calculator"
-  primary
   size="S"
   quiet
   on:click={modal.show}
   active={view.field && view.calculation}>
   Calculate
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <CalculateModal {view} />
 </Modal>

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

@@ -1,13 +1,13 @@
 <script>
-  import { Button, Icon, Modal, ModalContent } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   let modal
 </script>
 
-<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
-  Create New Column
-</Button>
+<ActionButton icon="TableColumnAddRight" quiet size="S" on:click={modal.show}>
+  Create column
+</ActionButton>
 <Modal bind:this={modal}>
   <CreateEditColumn />
 </Modal>

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

@@ -1,16 +1,16 @@
 <script>
-  import { Button, Icon, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import CreateEditRow from "../modals/CreateEditRow.svelte"
 
   export let modalContentComponent = CreateEditRow
-  export let title = "Create New Row"
+  export let title = "Create row"
 
   let modal
 </script>
 
-<Button icon="Add" primary size="S" quiet on:click={modal.show}>
+<ActionButton icon="TableRowAddBottom" size="S" quiet on:click={modal.show}>
   {title}
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <svelte:component this={modalContentComponent} />
 </Modal>

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

@@ -1,13 +1,13 @@
 <script>
-  import { Modal, Button } from "@budibase/bbui"
+  import { Modal, ActionButton } from "@budibase/bbui"
   import CreateViewModal from "../modals/CreateViewModal.svelte"
 
   let modal
 </script>
 
-<Button icon="CollectionAdd" primary size="S" quiet on:click={modal.show}>
-  Create New View
-</Button>
+<ActionButton icon="CollectionAdd" size="S" quiet on:click={modal.show}>
+  Create view
+</ActionButton>
 <Modal bind:this={modal}>
   <CreateViewModal />
 </Modal>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import ExportModal from "../modals/ExportModal.svelte"
 
   export let view
@@ -7,9 +7,9 @@
   let modal
 </script>
 
-<Button icon="Download" primary size="S" quiet on:click={modal.show}>
+<ActionButton icon="Download" size="S" quiet on:click={modal.show}>
   Export
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <ExportModal {view} />
 </Modal>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import FilterModal from "../modals/FilterModal.svelte"
 
   export let view = {}
@@ -7,15 +7,14 @@
   let modal
 </script>
 
-<Button
+<ActionButton
   icon="Filter"
-  primary
   size="S"
   quiet
   on:click={modal.show}
   active={view.filters?.length}>
   Filter
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <FilterModal {view} />
 </Modal>

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

@@ -1,28 +1,13 @@
 <script>
-  import { Button } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
 
   export let hideAutocolumns
 
-  let anchor
-  let dropdown
-
   function hideOrUnhide() {
     hideAutocolumns = !hideAutocolumns
   }
 </script>
 
-<div bind:this={anchor}>
-  <Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
-    {#if hideAutocolumns}
-      Show Auto Columns
-    {:else}
-      Hide Auto Columns
-    {/if}
-  </Button>
-</div>
-
-<style>
-  i {
-    margin-right: 4px;
-  }
-</style>
+<ActionButton icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
+  {#if hideAutocolumns}Show auto columns{:else}Hide auto columns{/if}
+</ActionButton>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import { permissions } from "stores/backend"
   import ManageAccessModal from "../modals/ManageAccessModal.svelte"
 
@@ -14,9 +14,9 @@
   }
 </script>
 
-<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
-  Manage Access
-</Button>
+<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
+  Manage access
+</ActionButton>
 <Modal bind:this={modal}>
   <ManageAccessModal
     {resourceId}

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -34,11 +34,10 @@
     {#each $tables.list as table, idx}
       <NavItem
         border={idx > 0}
-        icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
+        icon={table._id === TableNames.USERS ? 'UserGroup' : 'Table'}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
-        on:click={() => selectTable(table)}
-      >
+        on:click={() => selectTable(table)}>
         {#if table._id !== TableNames.USERS}
           <EditTablePopover {table} />
         {/if}
@@ -46,14 +45,12 @@
       {#each Object.keys(table.views || {}) as viewName, idx (idx)}
         <NavItem
           indentLevel={1}
-          icon="ri-eye-line"
+          icon="Remove"
           text={viewName}
           selected={selectedView === viewName}
-          on:click={() => onClickView(table, viewName)}
-        >
+          on:click={() => onClickView(table, viewName)}>
           <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }}
-          />
+            view={{ name: viewName, ...table.views[viewName] }} />
         </NavItem>
       {/each}
     {/each}

packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte

@@ -1,40 +1,30 @@
 <script>
   import { goto } from "@roxi/routify"
   import { views } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
-  import { Icon, Popover, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import {
+    notifications,
+    Icon,
+    Input,
+    ActionMenu,
+    MenuItem,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
 
   export let view
 
-  let anchor
-  let dropdown
-  let editing
+  let editorModal
+  let confirmDeleteDialogue
   let originalName = view.name
   let confirmDeleteDialog
 
-  function showEditor() {
-    editing = true
-  }
-
-  function hideEditor() {
-    dropdown.hide()
-    editing = false
-  }
-
-  function showDelete() {
-    dropdown.hide()
-    confirmDeleteDialog.show()
-  }
-
   async function save() {
     await views.save({
       originalName,
       ...view,
     })
     notifications.success("View renamed successfully")
-    hideEditor()
   }
 
   async function deleteView() {
@@ -46,69 +36,21 @@
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+<ActionMenu>
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <Popover align="left" {anchor} bind:this={dropdown}>
-    {#if editing}
-      <div class="actions">
-        <h5>Edit View</h5>
+  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+</ActionMenu>
+<Modal bind:this={editorModal}>
+  <ModalContent title="Edit View" onConfirm={save} confirmText="Save">
     <Input label="View Name" thin bind:value={view.name} />
-        <footer>
-          <Button secondary on:click={hideEditor}>Cancel</Button>
-          <Button primary on:click={save}>Save</Button>
-        </footer>
-      </div>
-    {:else}
-      <DropdownContainer>
-        <DropdownItem
-          icon="ri-edit-line"
-          data-cy="edit-view"
-          title="Edit"
-          on:click={showEditor}
-        />
-        <DropdownItem
-          icon="ri-delete-bin-line"
-          title="Delete"
-          data-cy="delete-view"
-          on:click={showDelete}
-        />
-      </DropdownContainer>
-    {/if}
-  </Popover>
-</div>
+  </ModalContent>
+</Modal>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete View"
   onOk={deleteView}
-  title="Confirm Deletion"
-/>
-
-<style>
-  div.icon {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .actions {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>
+  title="Confirm Deletion" />

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Modal, ModalContent } from "@budibase/bbui"
+  import { Modal, ModalContent, Body } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
@@ -20,15 +20,9 @@
 
 <Modal bind:this={modal} on:hide={onCancel}>
   <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <div class="body">
+    <Body size="S">
       {body}
       <slot />
-    </div>
+    </Body>
   </ModalContent>
 </Modal>
-
-<style>
-  .body {
-    font-size: var(--font-size-s);
-  }
-</style>