Changes ActionMenu button slot to be called control

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div class="contents" use:getAnchor on:click={openMenu}>
-  <slot name="button" />
+  <slot name="control" />
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <Menu>

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <ActionMenu>
-  <div slot="button" class="icon">
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
   <MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <ActionMenu>
-  <div slot="button" class="icon">
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -14,12 +14,10 @@
 </script>
 
 <ActionMenu>
-  <div slot="button" class="icon">
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
-    >Delete</MenuItem
-  >
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
 <ConfirmDialog

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

@@ -61,14 +61,11 @@
 </script>
 
 <ActionMenu>
-  <div slot="button" class="icon">
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem
-  >
-  <MenuItem icon="Delete" on:click={showDeleteModal}
-    >Delete</MenuItem
-  >
+  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
 </ActionMenu>
 
 <Modal bind:this={editorModal}>

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -1,15 +1,15 @@
 <script>
-  import { ActionMenu, ActionGroup, ActionButton, MenuItem } from "@budibase/bbui"
+  import {
+    ActionMenu,
+    ActionGroup,
+    ActionButton,
+    MenuItem,
+  } from "@budibase/bbui"
   import { store, currentAssetName } from "builderStore"
   import structure from "./componentStructure.json"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
 
-  let selectedIndex
-  let anchors = []
-  let popover
-  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
-
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
     structure.forEach((item) => {
@@ -32,7 +32,7 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async (item, idx, open) => {
+  const onItemChosen = async (item, idx) => {
     if (item.isCategory) {
       // Select and open this category
       selectedIndex = idx
@@ -46,7 +46,14 @@
 <ActionGroup>
   {#each enrichedStructure as item, idx}
     <ActionMenu disabled={!item.isCategory}>
-      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx)}>
+      <ActionButton
+        icon={item.icon}
+        xs
+        primary
+        quiet
+        slot="control"
+        on:click={() => onItemChosen(item, idx)}
+      >
         {item.name}
       </ActionButton>
       {#each item.children || [] as item}
@@ -54,7 +61,8 @@
           <MenuItem
             dataCy={`component-${item.name}`}
             icon={item.icon}
-            on:click={() => onItemChosen(item)}>
+            on:click={() => onItemChosen(item)}
+          >
             {item.name}
           </MenuItem>
         {/if}
@@ -62,37 +70,3 @@
     </ActionMenu>
   {/each}
 </ActionGroup>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    min-height: 24px;
-    flex-wrap: wrap;
-    gap: var(--spacing-l);
-  }
-
-  .category {
-    color: var(--grey-7);
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-s);
-    font-size: var(--spectrum-global-dimension-font-size-75);
-  }
-  .category span {
-    font-weight: 500;
-    user-select: none;
-  }
-  .category.active,
-  .category:hover {
-    color: var(--ink);
-  }
-  .category i:not(:last-child) {
-    font-size: 16px;
-  }
-</style>

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -67,18 +67,21 @@
 </script>
 
 <ActionMenu>
-  <div slot="button" class="icon">
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
-    >Delete</MenuItem
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+  <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
+    >Move up</MenuItem
   >
-  <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
-  <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
-  <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
-  <MenuItem
-    icon="Cut"
-    on:click={() => storeComponentForCopy(true)}>Cut</MenuItem
+  <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}
+    >Move down</MenuItem
+  >
+  <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}
+    >Duplicate</MenuItem
+  >
+  <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}
+    >Cut</MenuItem
   >
   <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
     >Copy</MenuItem

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte

@@ -40,15 +40,11 @@
 </script>
 
 <ActionMenu>
-  <div slot="button" class="icon">
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={editLayoutNameModal.show}
-    >Edit</MenuItem
-  >
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
-    >Delete</MenuItem
-  >
+  <MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
 <ConfirmDialog

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <ActionMenu>
-  <div slot="button" class="icon">
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>