v34.0.0

34.0.0 (2018-02-23)

Features

• grid: Migrate to 6px baseline grid with 16px standard type (#437) (69e050c)

Reason for Change

In order to support a larger standard body copy size of 16px / 24px (instead of 14px / 18px), we've also had to change the underlying baseline grid from 9px to 6px.

Breaking Changes

• You will need to perform a design audit of your project, since the underlying grid and typography has changed significantly.
• The superstandard and substandard type variants have been removed from React components and Less variables/mixins. Consumers should use standard type instead.

Migration Guide

Design Audit

During the migration process, and at the end as a final review, you should seek guidance from the designer(s) on your team, or those that you collaborate with most often.

The grid and typography changes affect a large portion of the components, variables and mixins provided by this library. Even in cases where the public API of a component doesn't change, its internal dimensions may have changed, which could have flow-on effects for the design of your product.

Grid Variables

Use the new @row-height variable instead of @grid-row-height, but be aware that since the value has changed from 9px to 6px, you'll need to revisit any existing calculations in your project.

For example:

-@grid-row-height * 2
+@row-height * 3

When changing calculations like this, you're encouraged to visually check the result of each change, but you can use this table as a quick migration reference to speed up the process:

@grid-row-height * X	@row-height * X
1	2
2	3
3	5
4	6
5	7
6	9
7	11

If you arrive at different values in different scenarios, that's totally fine.

For consistency, all grid variables have been updated to follow the same naming convention, but since their values remain the same, you can safely rename all existing usages:

-@grid-gutter-width
+@gutter-width

-@grid-column-width
+@column-width

-@grid-container-width
+@container-width

To reduce breakage of custom layouts, the old grid variables are still provided with their existing values, but you're encouraged to migrate away from the old variables as soon as possible. Until you fully migrate all grid variables, your custom layouts might not necessarily be broken, but they won't be following the new grid.

Typography

All typography has been adjusted to fit the new grid, with most changes simply trying to match the existing design as closely as possible, with some notable exceptions.

The superstandard and substandard variants have been removed. In most cases, you should use standard type instead.

For example, when using the Text component:

-<Text substandard>...
+<Text>...

-<Text superstandard>...
+<Text>...

Or, for older projects, when using the Less mixins:

-.superstandardText()
+.standardText()

-.superstandardTextResponsive()
+.standardTextResponsive()

-.substandardText()
+.standardText()

-.substandardTextResponsive()
+.standardTextResponsive()

Even though we encourage the use of larger body copy, for some existing usages of substandard, you may want to keep the text at 14px. In these cases, you should switch to small text instead:

-<Text substandard>...
+<Text small>...