From 2d5a7478037df8fbf91debb7d2b51e0cdba447d9 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Tue, 3 Aug 2021 20:54:32 +0200
Subject: [PATCH] add sizes to boolean field and checkbox component

---
 packages/bbui/src/Form/Checkbox.svelte        |  3 ++-
 packages/bbui/src/Form/Core/Checkbox.svelte   |  3 ++-
 packages/standard-components/manifest.json    | 25 ++++++++++++++++++-
 .../src/forms/BooleanField.svelte             |  4 ++-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte
index 90a2cddda5..6aa88f6dee 100644
--- a/packages/bbui/src/Form/Checkbox.svelte
+++ b/packages/bbui/src/Form/Checkbox.svelte
@@ -9,6 +9,7 @@
   export let text = null
   export let disabled = false
   export let error = null
+  export let size = "M"
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -18,5 +19,5 @@
 </script>
 
 <Field {label} {labelPosition} {error}>
-  <Checkbox {error} {disabled} {text} {value} on:change={onChange} />
+  <Checkbox {error} {disabled} {text} {value} {size} on:change={onChange} />
 </Field>
diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index e9a6b56fd9..74745aa9a6 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -8,6 +8,7 @@
   export let id = null
   export let text = null
   export let disabled = false
+  export let size = null
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
@@ -16,7 +17,7 @@
 </script>
 
 <label
-  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+  class="spectrum-Checkbox spectrum-Checkbox--size{size} spectrum-Checkbox--emphasized"
   class:is-invalid={!!error}
 >
   <input
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 2d0384056e..c5827f1719 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1852,7 +1852,6 @@
   "booleanfield": {
     "name": "Checkbox",
     "icon": "Checkmark",
-    "styles": ["size"],
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1870,6 +1869,30 @@
         "label": "Text",
         "key": "text"
       },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra large",
+            "value": "XL"
+          }
+        ],
+        "defaultValue": "M"
+      },
       {
         "type": "boolean",
         "label": "Disabled",
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 17a3c563bc..f0baebbfef 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -6,9 +6,10 @@
   export let label
   export let text
   export let disabled = false
-
+  export let size
   let fieldState
   let fieldApi
+
 </script>
 
 <Field
@@ -26,6 +27,7 @@
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       id={$fieldState.fieldId}
+      size={size}
       on:change={e => fieldApi.setValue(e.detail)}
       {text}
     />