More explicit Box

[jeroenransijn]

In Evergreen we try to lock things down a bit more:

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import Box, { dimensions, spacing, position, layout } from 'ui-box'

class Button extends PureComponent {
  static propTypes = {
    /**
     * Composes some specs from the Box primitivie.
     */
    ...dimensions.propTypes,
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,

But this is not actually enforced by Box.

Proposed API

import React from 'react'
import Box, { dimensions, spacing, position, layout } from 'ui-box'

const Button = props =>
  <Box is="button" enhancers={[dimensions, spacing, position, layout]} {...props} />

By default Box can simply have a default prop with an enhancers array with all of the enhancers.

Prop types issues

One problem I see happening when prop support is dynamic, that prop type warnings will not be triggered when you limit the Box APIs.