Open zakbutcher opened 4 years ago
This is also related to #32
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.
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 setFlex
,Block
, etc are specific variations ofBox
to reduce prop fatigueApproach 2
Box
is a "render" component that identifies which type of component to renderBox
removes only the props it needs before passing the rest toFlex
Box
is responsible for background color, notFlex
Others?
Box
need to support allFlex
,Block
properties or can it be a "style" component? 🤔Box
handles box shadow, border, background color, margin, padding, etcFlex
,Block
, etc handles display, justify content, etc