Themeable design system for the SEEK Group
MIT License
Bot releases are visible (Hide)
Published by seek-oss-ci over 4 years ago
TextLink
/TestLinkRenderer
components no longer occupy full touchable height in the document flow. You will need to add a hitArea="large"
prop and reintroduce white space via layout components.TextLink
/TestLinkRenderer
components must now be nested within a Text
component.When TextLink is mentioned below, it refers to both the TextLink
and TextLinkRenderer
components.
Previously Braid had two different TextLink implementations, depending on whether it was nested within a Text
component or not. The thinking was, TextLinks that are not part of a sentence should reserve surrounding white space to ensure that they satisfied a minimum touchable size. The documentation referred to these as "block links".
Unfortunately, this clashes with our layout philosophy of first-class white space via layout components. It was also a confusing API for consumers due to its implicit nature.
This PR is removing the concept of block links entirely, in favour of an optional hitArea
prop that can increase the hit area of the link without adding additional whitespace to the layout.
To help debug this in development mode, you can add a data-braid-debug
attribute anywhere in the DOM tree to visualise the hit areas nested within it.
Note: Inline links (i.e. links nested within a Text component) are completely unaffected by this change.
-<TextLink href="...">
- <Text>Block link</Text>
-</TextLink>
+<Text>
+ <TextLink hitArea="large" href="...">Block link</TextLink>
+</Text>
You may also need to reintroduce white space. This can be done via Braid's layout components.
In simple cases where block links only contains 1–2 words, you can wrap them in a vertically centered touchable Box:
<Box height="touchable" display="flex" alignItems="center">
<Text>
<TextLink hitArea="large" href="...">Block link</TextLink>
</Text>
</Box>
As always, if you're finding this migration difficult, please reach out so we can give you a hand.
Published by seek-oss-ci over 4 years ago
Surrounding white space has been removed from Checkbox
, Radio
and Toggle
components. You'll need to explicitly reintroduce it.
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>
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.
Published by seek-oss-ci almost 5 years ago