Add Box component

[lederer]

Overview

Introduce the Box component.

We considered two existing approaches to this component:

• Kitchen Sink. eg, Pulse. Create an omnibus component that includes virtually every styled-system function.

• Family of Layout Components. eg, Rebass. Create a set of layout components, one for each layout model. Box would encapsulate styled-system's flow layout functions. Flex would extend Box, set display: flex, and add flex props. Grid would do the same for grid layout.

I opted to thread the needle with a hybrid approach. Our Box component is single component that supports all 3 layouts (flow, flex, grid) but strictly limits itself to layout only (so strictly, in fact, that unlike Rebass it even excludes fontSize and color).

Included styled-system functions

margin & padding: space
layout: display, verticalAlign, all flex props, all grid props
dimensions: width, height, {min, max}{Width, Height}, ratio
containment: overflow
position: position, zIndex, top, right, bottom, left

Excluded styled-system functions

type: fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, textStyle
visual: background*, border*, boxShadow, opacity, colorStyle

Checklist

• Relevant documentation pages have been created or updated
• Description of PR is in an appropriate section of the changelog and grouped with similar changes if possible

Are there any of the following in this PR?

• Changes to the prop names or types of existing components
• Changes in intended behavior of existing component props
• Changes in the theme file's structure
• A required version bump to a non-dev dependency of the project

If one of the above is checked...

• information or guidance around needed changes for consumers of this library has been added to the changelog under Upgrade Instructions

Demo

Closes #87

[designmatty]

+1