From 937479986d950e584deae2a56c1b9f8ac832af07 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 08:55:45 +0100
Subject: [PATCH] Add pretty labels to button props, ensure button width is
 always determined by content

---
 packages/standard-components/manifest.json    | 39 +++++++++++++++++--
 .../standard-components/src/Button.svelte     |  7 ++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 2e7e52fc32..ba858c44b4 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -245,16 +245,49 @@
       },
       {
         "type": "select",
-        "label": "Button Type",
+        "label": "Variant",
         "key": "type",
-        "options": ["primary", "secondary", "cta", "warning"],
+        "options": [
+          {
+            "label": "Primary",
+            "value": "primary"
+          }, {
+            "label": "Secondary",
+            "value": "secondary"
+          },
+          {
+            "label": "Action",
+            "value": "cta"
+          },
+          {
+            "label": "Warning",
+            "value": "warning"
+          }
+        ],
         "defaultValue": "primary"
       },
       {
         "type": "select",
         "label": "Size",
         "key": "size",
-        "options": ["S", "M", "L", "XL"],
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra large",
+            "value": "XL"
+          }
+        ],
         "defaultValue": "M"
       },
       {
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 3739f5e3af..3086fe95cd 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -19,3 +19,10 @@
 >
   {text || ""}
 </button>
+
+<style>
+  button {
+    width: fit-content;
+    width: -moz-fit-content;
+  }
+</style>