From 0921bcf3334e6a77a67b8771005587e2f37a3af4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 1 Nov 2023 11:40:27 +0000
Subject: [PATCH] Add button setting to grid and allow removing all buttons

---
 .../ButtonConfiguration/ButtonConfiguration.svelte  | 13 ++++++++-----
 packages/client/manifest.json                       | 10 ++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
index 324418511b..6fed8abdba 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -19,7 +19,7 @@
     componentBindings: componentBindings || [],
     bindings,
     removeButton,
-    canRemove: buttonCount > 1,
+    canRemove: true,
   }
 
   const sanitizeValue = val => {
@@ -86,11 +86,11 @@
       focus={focusItem}
       draggable={buttonCount > 1}
     />
-
-    <div class="list-footer" on:click={addButton}>
-      <div class="add-button">Add button</div>
-    </div>
   {/if}
+
+  <div class="list-footer" on:click={addButton} class:empty={!buttonCount}>
+    <div class="add-button">Add button</div>
+  </div>
 </div>
 
 <style>
@@ -120,6 +120,9 @@
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
     cursor: pointer;
   }
+  .list-footer.empty {
+    border-radius: 4px;
+  }
 
   .add-button {
     margin: var(--spacing-s);
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index c8ef406472..43b2d1b81d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5858,6 +5858,16 @@
         "label": "High contrast",
         "key": "stripeRows",
         "defaultValue": false
+      },
+      {
+        "section": true,
+        "name": "Buttons",
+        "settings": [
+          {
+            "type": "buttonConfiguration",
+            "key": "buttons"
+          }
+        ]
       }
     ]
   },