Standardise hover and selected states between action buttons and icons in view nav bar

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -15,6 +15,7 @@
   let anchor
   let dropdown
   let timeout
+  let open
 
   // This is needed because display: contents is considered "invisible".
   // It should only ever be an action button, so should be fine.
@@ -63,10 +64,11 @@
   on:mouseenter={openOnHover ? show : null}
   on:mouseleave={openOnHover ? queueHide : null}
 >
-  <slot name="control" />
+  <slot name="control" {open} />
 </div>
 <Popover
   bind:this={dropdown}
+  bind:open
   {anchor}
   {align}
   {portalTarget}

packages/bbui/src/Icon/Icon.svelte

@@ -60,10 +60,11 @@
   .newStyles {
     color: var(--spectrum-global-color-gray-700);
   }
-
+  svg {
+    transition: color var(--spectrum-global-animation-duration-100, 130ms);
+  }
   svg.hoverable {
     pointer-events: all;
-    transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
     color: var(--hover-color) !important;

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte

@@ -88,16 +88,15 @@
     display: grid;
     place-items: center;
     transition: background 130ms ease-out;
+    cursor: pointer;
   }
-  .icon:hover,
   .icon:active,
   .icon.open {
     background: var(--spectrum-global-color-gray-300);
-    cursor: pointer;
   }
-  .icon:hover :global(.spectrum-Icon),
-  .icon:active :global(.spectrum-Icon),
-  .icon.open :global(.spectrum-Icon) {
+  .icon:hover :global(svg),
+  .icon:active :global(svg),
+  .icon.open :global(svg) {
     color: var(--spectrum-global-color-gray-900) !important;
   }
 </style>

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte

@@ -268,8 +268,8 @@
   {/if}
   {#if overflowedViews.length}
     <ActionMenu align="right" bind:this={overflowMenu}>
-      <div slot="control">
-        <ActionButton icon="ChevronDown" quiet selected={viewHidden}>
+      <div slot="control" let:open>
+        <ActionButton icon="ChevronDown" quiet selected={open || viewHidden}>
           {overflowedViews.length} more
         </ActionButton>
       </div>