Helper for joining multiple Box elements together

[Flufd]

Hello 👋

Our new Box component allows us to build elements like this without dipping into custom CSS, nice.

Hoping to open some discussion on what approaches we should be taking to build something like this. Traditionally this would be styled using selectors first-child/last-child to apply the border selectively and create a dividing line. With the Box styles applied directly in React props, this can be done with selectively applying the border to the individual line boxes using javascript.

Simple enough with basic layouts that might come from an array, we can look at the index. There's a few approaches here:

We can consider each item as it's own Box, and selectively apply the border to each side, as well as the border radii to the start and end components, this gets messy quite quickly:

<>
  {items.map((item, idx) => (
    <Box
            borderInlineStart="base"
            borderInlineEnd="base"
            borderBlockStart={idx === 0 ? "base" : undefined}
            borderBlockEnd="base"
            padding="4"
            borderRadiusStartStart={idx === 0 ? "4" : undefined}
            borderRadiusStartEnd={idx === 0 ? "4" : undefined}
            borderRadiusEndEnd={idx === items.length - 1 ? "4" : undefined}
            borderRadiusEndStart={idx === items.length - 1 ? "4" : undefined}
          >
            <Text as="span" variant="bodyMd">
              {item.title}
            </Text>
          </Box>
        ))}
      </>

Another approach is to have a container Box for the outer border, and apply a bottom/top border to each Box for the items inside:

<Box border="base" borderRadius="4">
          {items.map((item, idx) => (
            <Box padding="4" borderBlockStart={idx !== 0 ? "base" : undefined}>
              <Text as="span" variant="bodyMd">
                {item.title}
              </Text>
            </Box>
          ))}
        </Box>

Much simpler, but if we want to add a header/footer to our "card", we need to take that into account when identifying the index of the items. Not too bad:

<Box border="base" borderRadius="4">
          <Box padding="4">
            <Text as="h2" variant="headingMd">
              Our card title
            </Text>
          </Box>
          {items.map((item, idx) => (
            <Box padding="4" borderBlockStart="base">
              <Text as="span" variant="bodyMd">
                {item.title}
              </Text>
            </Box>
          ))}
          <Box padding="4" borderBlockStart="base">
            <Text as="span" variant="bodySm">
              Our card footer
            </Text>
          </Box>
        </Box>

But if we are doing something like conditionally rendering the footer, this can also get quite messy.

There is an opportunity here to build a helper component that can do this for us automatically. Here is a scrappy example that takes advantage of React.Children. The JoinedBox takes the props that a box would normally have, passing them to a containing box, which applies the outer border, then for the inner items I wrap them with a Box applying the top border with the same styles as the container, and the padding, just for consistent item padding.

function JoinedBox(props: BoxProps) {
  return (
    <Box {...props} padding="0">
      {React.Children.map(props.children, (child, idx) => (
        <Box
          padding={props.padding}
          borderBlockStart={idx !== 0 ? props.border : undefined}
        >
          {child}
        </Box>
      ))}
    </Box>
  );
}


        <JoinedBox border="base" borderRadius="4" padding="4">
          <Text as="h2" variant="headingMd">
            Our card title
          </Text>
          {items.map((item) => (
            <Text as="span" variant="bodyMd">
              {item.title}
            </Text>
          ))}
          <Text as="span" variant="bodySm">
            Our card footer
          </Text>
        </JoinedBox>

So my question is, should we have some helper like this, and is this a good approach, or should we be building these layouts manually each time?

Codesandbox with examples

[Flufd]

Here's another more composable example where we would directly manipulate the props of child boxes to set their border, and borderRadius props.

https://codesandbox.io/s/pensive-torvalds-8h4ko7?file=/App.tsx:1688-2522

// these border styles get applied to the immediate children of the `JoinedBox`, 
// setting for example the block start borders radiuses of the first child to the `JoinedBox.borderRadius` prop, 
// and setting the blockStart/blockEnd borders for the children to the appropriate value, 
// based on the index of the child
<JoinedBox border="base" borderRadius="4">
          <Box padding="4">
            <Text as="h2" variant="headingMd">
              Our card title
            </Text>
          </Box>
          {items.map((item) => (
            <Box padding="4">
              <Text as="span" variant="bodyMd">
                {item.title}
              </Text>
            </Box>
          ))}
          <Box
            padding="2"
            paddingInlineStart="4"
            background="surface-attention"
          >
            <Text as="span" variant="bodySm">
              Our card footer
            </Text>
          </Box>

          <Box padding="2" paddingInlineStart="4" background="surface-warning">
            <Text as="span" variant="bodySm">
              Another footer
            </Text>
          </Box>
        </JoinedBox>