From a760e6c1b5d64fe253d1001146ea67b3e91848b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 27 Apr 2021 15:34:17 +0200
Subject: [PATCH] Changes ActionMenu button slot to be called control

---
 .../bbui/src/ActionMenu/ActionMenu.svelte     |  2 +-
 .../EditAutomationPopover.svelte              |  2 +-
 .../popovers/EditDatasourcePopover.svelte     |  2 +-
 .../popovers/EditQueryPopover.svelte          |  6 +-
 .../popovers/EditTablePopover.svelte          |  9 +--
 .../AppPreview/ComponentSelectionList.svelte  | 60 ++++++-------------
 .../ComponentDropdownMenu.svelte              | 21 ++++---
 .../LayoutDropdownMenu.svelte                 | 10 +---
 .../ScreenDropdownMenu.svelte                 |  2 +-
 9 files changed, 41 insertions(+), 73 deletions(-)

diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
index 01bf3f1dae..6cfc531738 100644
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/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>
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 40cac7ddc7..2eefac0ea8 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/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}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index 6e865c2a32..cc54d599d8 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/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>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index 5dd2ab1cb8..99fe974e84 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/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
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 014a3a3527..0c88741d5e 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/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}>
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 4163e87104..35775d0d18 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/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>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index 99acdfedf0..8cf46facc6 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/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
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
index 0ade0cebd4..f76541a3b0 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/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
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index 10958eabe6..b6ec6b7e00 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/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>