From e806001107a8e62ca45f8c0406c7b5fd541dba29 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 8 Jun 2022 16:51:14 +0100
Subject: [PATCH] Update action button style for component settings to match
 designs

---
 packages/bbui/src/ActionButton/ActionButton.svelte             | 3 +++
 .../components/design/settings/controls/BarButtonList.svelte   | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 2b4d1076c2..b7c217c0d9 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -83,4 +83,7 @@
   :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
     margin-left: 0;
   }
+  .is-selected {
+    background: var(--spectrum-global-color-gray-300);
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/BarButtonList.svelte b/packages/builder/src/components/design/settings/controls/BarButtonList.svelte
index 01f198c5ec..339edb1f74 100644
--- a/packages/builder/src/components/design/settings/controls/BarButtonList.svelte
+++ b/packages/builder/src/components/design/settings/controls/BarButtonList.svelte
@@ -10,8 +10,9 @@
   {#each options as option}
     <ActionButton
       icon={option.barIcon}
-      quiet={option.value !== value}
+      quiet
       on:click={() => onChange(option.value)}
+      selected={option.value === value}
     />
   {/each}
 </ActionGroup>