Skip to content

v21.0.0

Choose a tag to compare

View all tags
@seek-oss-ci seek-oss-ci released this 29 Jan 23:59
· 1455 commits to master since this release
v21.0.0
6bf13bc
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

21.0.0 (2020-01-29)

Bug Fixes

  • TextLink,TextLinkRenderer: Remove surrounding space, add hitArea prop (#472) (6bf13bc)

BREAKING CHANGES

  • Block-level 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.
  • All TextLink/TestLinkRenderer components must now be nested within a Text component.

Description

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.

Migration Guide

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

Assets 2
Loading