Rationale

When bootstrapping new UI A non zero amount of time is spent writing basic CSS to position elements on the screen. The usual tools for doing this are wrapper divs that have combinations of flex properties, padding, and margin. This new component provides a utility for easily creating these sorts of wrappers.

I am aiming at the smallest API to support the known usages that I have for it at present, with the intention of expanding upon it gradually to support most use cases. I drew heavy inspiration from tailwind CSS on this one.

Examples

Box around an element

The box has a border with border radius, and margins and padding

<Box
 margin={6}
 padding={4}
 paddingBottom={3}
 borderRadius={SIZES.LG}
 borderColor={COLORS.UI2}
>
 {children}
</Box>

Flex box example 1

Three children, each spaced evenly in the middle of the box. The box should consume half of it's parent's width and height. Apply a 3px border with UI1 color.

<Box
 borderColor={COLORS.UI1}
 borderWidth={3}
 display={DISPLAY.FLEX}
 width={BLOCK_SIZES.HALF}
 height={BLOCK_SIZES.HALF}
 justifyContent={JUSTIFY_CONTENT.SPACE_EVENLY}
 alignItems={ALIGN_ITEMS.CENTER}
>
 {children}
</Box>

Flex box example 2

Three children, space placed between each element, aligned in the middle. The box should expand to the full height and width of the screen. Apply a 3px border with UI1 color.

<Box
 borderColor={COLORS.UI1}
 borderWidth={3}
 display={DISPLAY.FLEX}
 width={BLOCK_SIZES.SCREEN}
 height={BLOCK_SIZES.SCREEN}
 justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
 alignItems={ALIGN_ITEMS.CENTER}
>
 {children}
</Box>

Avoiding superfluous divs

The Box component does nothing, really, except computing classNames. I thought of creating this as a function that spits out these classNames that could then be added to any element. I decided against that because it would create a misdirection in the component+style coupling in the filesystem we are currently doing.

I also didn't want to encourage adding superfluous wrappers when the box classes could just be applied to another element that needs to use the margin/padding or other classes.

To that end, <Box> will accept a functional child, the function is passed the computed box class names that can then be added to another component.

<Box padding={[0, 2]}>
 {(boxClasses) => <YourComponent className={boxClasses} />}
</Box>

Sizing System

The sizing system presented here is a general attempt to implement rudimentary sizing. This system is simple, and will not meet our needs at scale (of the usage of this system). I will accept change requests to the sizing system but note that I have already queued up a conversation about this in the component/design system sync. Including the original message:

Topic for our next component/design system sync: Spacing/Sizing
Context: For the few components i’ve been adding as I push forward @rachel.cope’s confirmation designs in code, the need for being able to programmatically assign a size has arisen. In each case i’m making some generic decisions that work for the cases i’m presenting, so it isn’t an immediate need. I am also conforming to a generic template that should be able to be extended to meet the needs of our future spacing system. Essentially what that means in the code is passing 4 to the padding prop of the new Box component generates a padding of 16px (4 * 4px). We cannot use arbitrary values (like 14.56px ) because we want to be able to assign class names to elements that apply styles to reduce the amount of css we have to write for every new component/experience we code.
My background with spacing comes from Material-ui, which has a spacing system similar to what I described but slightly more nuanced. I’ve been using tailwind css for inspiration on this as well. This would require some changes in how designs are laid out, in-so-far as the margins and paddings chosen must match a numeric value in the scale that we decide.
In addition to these numeric sizes, both material ui and tailwind allow fractions for widths “11/12” computes to a percentage width value of 91.66667% for example.