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 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 renderBox 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, etcFlex, Block, etc handles display, justify content, etc
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
Boxis a base component providing all core props for a component setFlex,Block, etc are specific variations ofBoxto reduce prop fatigueApproach 2
Boxis a "render" component that identifies which type of component to renderBoxremoves only the props it needs before passing the rest toFlexBoxis responsible for background color, notFlexOthers?
Boxneed to support allFlex,Blockproperties or can it be a "style" component? 🤔Boxhandles box shadow, border, background color, margin, padding, etcFlex,Block, etc handles display, justify content, etc