v13.0.0

13.0.0 (2019-09-25)

Bug Fixes

• Convert seekAnz grid to 4px, unify grid rows and columns (#342) (73eed9e)

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, and touchableRows within treat files. Also moving seekAnz theme to 4px grid, 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.xsmall etc
• theme.spacing.column.xsmall 👉 theme.space.xsmall etc
• 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.