converts component adding buttons in design section

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -1,6 +1,9 @@
 <script>
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
+
+  export let supressOpen = false
+
   let anchor
   let dropdown
 
@@ -23,7 +26,7 @@
   }
 </script>
 
-<div class="contents" use:getAnchor on:click={dropdown.show}>
+<div class="contents" use:getAnchor>
   <slot name="button" />
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">

packages/bbui/src/Menu/Item.svelte

@@ -1,13 +1,26 @@
 <script>
-    export let icon = undefined;
+  export let dataCy
-    export let disabled = undefined;
+  export let icon = undefined
+  export let disabled = undefined
 </script>
 
-<li on:click|preventDefault class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
+<li
-    {#if icon}
+  data-cy={dataCy}
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
+  on:click|preventDefault
-            <use xlink:href="#spectrum-icon-18-{icon}"></use>
+  class="spectrum-Menu-item"
-        </svg>
+  class:is-disabled={disabled}
-    {/if}
+  role="menuitem"
-    <span class="spectrum-Menu-itemLabel"><slot /></span>
+  tabindex="0"
-</li>
+>
+  {#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}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Menu-itemLabel"><slot /></span>
+</li>

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

@@ -1,14 +1,8 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { ActionMenu, ActionGroup, ActionButton, MenuItem, Icon } from "@budibase/bbui"
-  import {
+  import { store, currentAssetName } from "builderStore"
-    store,
+import { iterateeAry } from "lodash/fp/_mapping"
-    currentAssetName,
-    selectedComponent,
-    currentAssetId,
-  } from "builderStore"
   import structure from "./componentStructure.json"
-  import { Popover } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
 
@@ -19,7 +13,7 @@
 
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
-    structure.forEach(item => {
+    structure.forEach((item) => {
       if (typeof item === "string") {
         const def = definitions[`@budibase/standard-components/${item}`]
         if (def) {
@@ -39,50 +33,37 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async (item, idx) => {
+  const onItemChosen = async (item, idx, open) => {
     if (item.isCategory) {
       // Select and open this category
       selectedIndex = idx
-      popover.show()
+      open()
     } else {
       // Add this component
       await store.actions.components.create(item.component)
-      popover.hide()
     }
   }
 </script>
 
-<div class="container">
+<ActionGroup>
   {#each enrichedStructure as item, idx}
-    <div
+    <ActionMenu supressOpen={item.isCategory} let:open let:closeOnClick>
-      bind:this={anchors[idx]}
+      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx, open)}>
-      class="category"
+        {item.name}
-      data-cy={item.isCategory ? `category-${item.name}` : `component-${item.name}`}
+      </ActionButton>
-      on:click={() => onItemChosen(item, idx)}
+      {#each item.children || [] as item}
-      class:active={idx === selectedIndex}>
+        {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
-      {#if item.icon}<i class={item.icon} />{/if}
+          <MenuItem
-      <span>{item.name}</span>
+            dataCy={`component-${item.name}`}
-      {#if item.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+            icon={item.icon}
-    </div>
+            on:click={closeOnClick(onItemChosen(item))}>
+            {item.name}
+          </MenuItem>
+        {/if}
+      {/each}
+    </ActionMenu>
   {/each}
-</div>
+</ActionGroup>
-<Popover
-  on:close={() => (selectedIndex = null)}
-  bind:this={popover}
-  {anchor}
-  align="left">
-  <DropdownContainer>
-    {#each enrichedStructure[selectedIndex].children as item}
-      {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
-        <DropdownItem
-          data-cy={`component-${item.name}`}
-          icon={item.icon}
-          title={item.name}
-          on:click={() => onItemChosen(item)} />
-      {/if}
-    {/each}
-  </DropdownContainer>
-</Popover>
 
 <style>
   .container {