v4.0.0

4.0.0 (2019-08-13)

Features

• Icons: Remove inline & infer size from usage (#286) (ebd646e)

BREAKING CHANGES

• Icons: Removes inline in favour of inferring this from the context of use. Nesting an icon inside a <Text> or <Heading> component will determine its size and position — no longer requiring the inline modifier or allowing a size that differs from the parent text.

Migration Guide

inline removal

An example migration, ie. determined as inline based on it being a child of <Text> or <Heading>.

<Text>
-  An inline icon <Icon inline />  amongst text
+  An inline icon <Icon />  amongst text
</Text>

size inference

An example migration, ie. determined as being size="large" based on it being a child of <Text size="large">.

<Text size="large">
-  An large icon <Icon size="large" />  amongst large text
+  An large icon <Icon />  amongst large text
</Text>

Note: Having different sizes is no longer permitted. Eg:

<Text size="large">
-  An large icon <Icon size="small" />  amongst large text
+  An large icon <Icon />  amongst large text
</Text>

This also adds support for icons used inside of <Heading> components, eg:

<Heading level="2">
  <Icon /> Title
</Heading>

Developer Notes

• Added a more detailed debugIdent to textColorForBackground util to ease debugging.
• Removed redundant display="flex" around the icon inside Alert