braid-design-system
Themeable design system for the SEEK Group
MIT License
Bot releases are visible (Hide)
Published by seek-oss-ci about 5 years ago
13.0.0 (2019-09-25)
Bug Fixes
BREAKING CHANGES
- Grid & space scale flattened to single dimension and touchable space moved to top level of theme. Consumers will need to update references of
grid,spacing, andtouchableRowswithintreatfiles. Also movingseekAnztheme to4pxgrid, consumers of anz-only apps should review any manually spacing, eg.<Box paddingBottom="small" />
Details of change
Theme structure
The shape of a theme has changed, flattening out the grid and space scale to be a single definition applying to both vertical and horizontal dimensions, e.g.
{
- grid: {
- row: number
- column: number
- }
- spacing: {
- touchableRows: number
- row: SpaceScale
- column: SpaceScale
- }
+ grid: number
+ touchableSize: number
+ space: SpaceScale
}
This work will better support how white space is handled and balanced within the system. We will be leveraging this heavily in upcoming components.
Removed rows theme utility
The rows utility that was provided on the theme has been removed as since unifying to a single grid unit on the theme the function was considered to provide more indirection than value.
Moved seekAnz to 4px grid
Previously seekAnz has utilised a 6px grid system. This has posed problems when trying to manage white space across themes as it lacks some granularity at the smaller end of the space scale.
Moving to a 4px grid allows us to better handle describing a layout once and more optimally rendering across themes. In order to maintain the brands spacing we have adjusted the space scale to increase in larger steps from medium to xxlarge.
Migration Guide
Theme structure
Any rules in treat files that consume the theme will need to be updated.
-
theme.grid.row👉theme.grid -
theme.grid.column👉theme.grid -
theme.spacing.row.xsmall👉theme.space.xsmalletc -
theme.spacing.column.xsmall👉theme.space.xsmalletc -
theme.spacing.touchableRows👉theme.touchableSize
Removed rows theme utility
export const minHeight = style(theme => ({
- minHeight: theme.utils.rows(12)
+ minHeight: theme.grid * 12
});
Moved seekAnz to 4px grid
For cross-brand seekAnz consumers:
It is likely that your usage of Braid components and the APIs on Box are consistent enough cross brand that you should not notice a change. It is recommended you review all usages of Box or CSS rules in your treat files that are driven by the space scale, e.g. <Box marginTop="small" /> or theme.spacing.row.small.
For single brand seekAnz consumers:
These apps are likely the most affected as usages of the space scale are subjective and are selected based on a single theme. Reviewing usages of Box or CSS rules in your treat files that are driven by the space scale is highly recommended as the computed spacing will have changed and you may need to increase the space scale selected, e.g. <Box marginTop="small" /> or theme.spacing.row.small.
Published by seek-oss-ci about 5 years ago
12.0.0 (2019-09-17)
Features
BREAKING CHANGES
-
BulletList: Setting
component="li"onTextno longer renders a bullet. Please migrate toBullet. Also no longer renders white space after the lastBullet, please validate your usage.
See usage: https://seek-oss.github.io/braid-design-system/components/BulletList.
Migration Guide
Setting the component prop on Text to "li" no longer renders a bullet list item. Consumers depending on this behaviour should migrate to Bullet and leverage the new apis on BulletList to achieve the desired outcome.
Text size of bullets
Consumers using Text instead of Bullet to support customising the text size should now migrate to Bullet and set the size on BulletList as follows:
-<BulletList>
+<BulletList size="small">
- <Text component="li" size="small">...</Text>
+ <Bullet>...</Bullet>
...
</BulletList>
Space between bullets
Consumers using Text to remove default spacing in between Bullets should now migrate to Bullet and instead configure the space on BulletList. Eg:
-<BulletList>
+<BulletList space="none">
- <Text component="li">...</Text>
+ <Bullet>...</Bullet>
...
</BulletList>
Alternatively you can also increase the spacing as required, using the space scale, eg:
-<BulletList>
+<BulletList space="large">
<Bullet>...</Bullet>
...
</BulletList>
Published by seek-oss-ci about 5 years ago
Published by seek-oss-ci about 5 years ago
10.0.0 (2019-09-06)
Bug Fixes
BREAKING CHANGES
- The
secondarytone forBadgehas been renamed toneutral, as a side effect thebackgroundproperty onBoxhas also been updated —secondarytoneutralandsecondaryLighttoneutralLight.
Published by seek-oss-ci about 5 years ago
9.0.0 (2019-09-05)
Features
BREAKING CHANGES
- All icon artwork has been updated and standardised. In addition, all icon names are now prefixed with Icon to improve discoverability.
Migration Guide
Design
The icon suite has been redesigned to be built from a common set of guidelines, providing a more consistent look and feel across the suite.
It is recommended consumers review their current usages of icons as the size/ratio of the assets has been standardised.
Rename
To aid discoverability all icons have been renamed to be prefixed with Icon. Consumers will be need to rename their imports as follows:
-
BookmarkIcon>IconBookmark -
ChevronIcon>IconChevron -
ErrorIcon>IconCritical -
InfoIcon>IconInfo -
TickCircleIcon>IconPositive -
TickIcon>IconTick
