braid-design-system
Themeable design system for the SEEK Group
MIT License
Bot releases are hidden (Show)
Published by seek-oss-ci over 4 years ago
22.0.0 (2020-02-19)
Features
💥 Breaking Changes
Alert no longer has a weight property. The strong treatment was considered too heavy and was most often used to avoid contrast issues when used outside of a Card, this has instead been addressed through a design update.
✨ New Features
🎨 Caution Tone
Introduces the caution tone as a mechanism for making the user aware something is happening or mid-way through a process. Could used to highlight a risk or an item that needs to be acted upon.
⚛️ Notice
Better facilitates in-flow messaging where usage of an Alert would be considered too visually dominant or distracting. Supports a subset of tones, namely promote, info, positive and critical, seen below:
Migration Guide
⚛️ Alert
If you're setting weight="strong", you should remove it.
If you're not setting weight="strong" (the default), please validate the design suits your use case. You might find that for in-flow messaging, eg. amongst content within a Card, you might prefer the new Notice component.
Published by seek-oss-ci over 4 years ago
21.0.0 (2020-01-29)
Bug Fixes
BREAKING CHANGES
- Block-level
TextLink/TestLinkRenderercomponents no longer occupy full touchable height in the document flow. You will need to add ahitArea="large"prop and reintroduce white space via layout components. - All
TextLink/TestLinkRenderercomponents must now be nested within aTextcomponent.
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.
