1
0
Fork 0
mirror of synced 2024-06-17 09:55:09 +12:00

add sizes to boolean field and checkbox component

This commit is contained in:
Maurits Lourens 2021-08-03 20:54:32 +02:00
parent b8d94c7cb5
commit 2d5a747803
4 changed files with 31 additions and 4 deletions

View file

@ -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>

View file

@ -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

View file

@ -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",

View file

@ -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}
/>