Merge pull request #2239 from mslourens/checkbox_sizes

add sizes to boolean field and checkbox component

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>

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

packages/standard-components/manifest.json

@@ -1868,7 +1868,6 @@
   "booleanfield": {
     "name": "Checkbox",
     "icon": "Checkmark",
-    "styles": ["size"],
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1886,6 +1885,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",

packages/standard-components/src/forms/BooleanField.svelte

@@ -6,7 +6,7 @@
   export let label
   export let text
   export let disabled = false
-
+  export let size
   let fieldState
   let fieldApi
 </script>
@@ -26,6 +26,7 @@
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       id={$fieldState.fieldId}
+      {size}
       on:change={e => fieldApi.setValue(e.detail)}
       {text}
     />