Box must support all props `Flex`, `Block`, etc support

[zakbutcher]

Box currently doesn't support additional properties defined by Flex. We need to figure out a scalable component architecture that supports component hierarchies.

Approach 1

• Box is a base component providing all core props for a component set
• Flex, Block, etc are specific variations of Box to reduce prop fatigue
• Proven approach that scales reasonably well

<Flex /> === <Box d="flex" />
<Flex direction="column" /> === <Box d="flex" direction="column" />

Approach 2

• Box is a "render" component that identifies which type of component to render
• Box removes only the props it needs before passing the rest to Flex
  • e.g. Box is responsible for background color, not Flex
• Unexplored api, unclear implications regarding performance, benefits, detriments, etc

const Box = ({d, ...restProps}) => {
  if (d === 'flex') {
    return <Flex {...restProps} />
  }
}

Others?

• Does Box need to support all Flex, Block properties or can it be a "style" component? 🤔
  • Box handles box shadow, border, background color, margin, padding, etc
  • Flex, Block, etc handles display, justify content, etc

[zakbutcher]

This is also related to #32

[zakbutcher]

Expanding on the question:

Does Box need to support all Flex, Block properties or can it be a "style" component? 🤔

Material UI uses an overlay to convey state. If Box is an accessible wrapper extended by Flex, Block, etc then all layout components are accessible. Furthermore, if Box is only intended to provide accessibility & baseline configuration support for layouts, then it can be reused as an accessible wrapper for any component built using a <div> as the root element.

Box would then be responsible for indicating UI state transitions (e.g. hover, pressed, focused, etc) as well as supporting keyboard, mouse, or other input-device accessibility.