From 61b82b8817f8d3525e977299e3f39cd0862bcaeb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 6 Sep 2024 09:20:00 +0100
Subject: [PATCH] Add quiet reverse button variant for collapsed button groups
 in grids

---
 packages/bbui/src/Button/Button.svelte              | 13 ++++++++++++-
 .../src/ButtonGroup/CollapsedButtonGroup.svelte     |  9 ++++++---
 .../src/components/grid/layout/ButtonColumn.svelte  |  4 ++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 7971c0ea8d..0a8917c3c1 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -18,6 +18,7 @@
   export let newStyles = true
   export let id
   export let ref
+  export let reverse = false
 
   const dispatch = createEventDispatcher()
 </script>
@@ -43,6 +44,9 @@
       }
     }}
   >
+    {#if $$slots && reverse}
+      <span class="spectrum-Button-label"><slot /></span>
+    {/if}
     {#if icon}
       <svg
         class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
@@ -53,7 +57,7 @@
         <use xlink:href="#spectrum-icon-18-{icon}" />
       </svg>
     {/if}
-    {#if $$slots}
+    {#if $$slots && !reverse}
       <span class="spectrum-Button-label"><slot /></span>
     {/if}
   </button>
@@ -93,4 +97,11 @@
   .spectrum-Button--secondary.new-styles.is-disabled {
     color: var(--spectrum-global-color-gray-500);
   }
+  .spectrum-Button .spectrum-Button-label + .spectrum-Icon {
+    margin-left: var(--spectrum-button-primary-icon-gap);
+    margin-right: calc(
+      -1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) -
+            var(--spectrum-button-primary-padding-left-adjusted))
+    );
+  }
 </style>
diff --git a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
index 12dee055e2..d7aad5ccff 100644
--- a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
+++ b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
@@ -10,7 +10,7 @@
   export let align = "left"
   export let offset
   export let animate
-  export let secondary = false
+  export let quiet = false
 
   let anchor
   let popover
@@ -25,10 +25,13 @@
   bind:ref={anchor}
   {size}
   icon="ChevronDown"
-  cta={!secondary}
-  {secondary}
+  {quiet}
+  primary={quiet}
+  cta={!quiet}
+  newStyles={!quiet}
   on:click={() => popover?.show()}
   on:click
+  reverse
 >
   {text || "Action"}
 </Button>
diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 1e40f326ff..371e8d46af 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext, onMount } from "svelte"
-  import { Button, CollapsedButtonGroup } from "@budibase/bbui"
+  import { Button, CollapsedButtonGroup, Select } from "@budibase/bbui"
   import GridCell from "../cells/GridCell.svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import { BlankRowID } from "../lib/constants"
@@ -98,7 +98,7 @@
                   align="right"
                   offset={5}
                   size="S"
-                  secondary
+                  quiet
                   animate={false}
                   on:mouseenter={() => ($hoveredRowId = row._id)}
                 />