v20.0.0
20.0.0 (2020-01-24)
Bug Fixes
Breaking Change
Surrounding white space has been removed from Checkbox, Radio and Toggle components. You'll need to explicitly reintroduce it.
Description
Checkbox, Radio and Toggle components currently reserve surrounding white space to ensure that they satisfy a minimum touchable size. Unfortunately, this clashes with our layout philosophy of first-class white space via layout components.
In order to fix this problem, we've made the hit targets absolute so that the empty space isn't part of the document flow. For example:
Before:
After:
Since this introduces the risk of overlapping hit targets where the user may inadvertently activate the wrong element, you should ensure that there is enough surrounding white space. Generally this is already the case since this is standard design practice, particularly when designing for mobile, but it's worth being aware of.
To help debug this in development mode, you can add a data-braid-debug attribute anywhere in the DOM tree to visualise the hit targets nested within it.
For example:
<Box data-braid-debug>
<Card>
<Stack space="medium">
<Checkbox label="Checkbox" />
<Checkbox label="Checkbox" />
<Checkbox label="Checkbox" />
</Stack>
</Card>
</Box>
Migration Guide
Since white space has been removed from the layout, you'll need to explicitly reintroduce it.
In most cases, the ideal fix is to ensure that the space between elements is handled by a Stack:
+<Stack space="medium">
<Checkbox label="..." />
<Checkbox label="..." />
<Checkbox label="..." />
+</Stack>If you're finding this migration difficult, please let us know so we can give you a hand.