[Suggestion][QoL] Add a rhythm property to FlexProps

rhythm is an idea I’ve used in the past to describe containers that kept identical spacing between their children. As an example, the phrase “with an 8-pixel vertical rhythm” means that items in the vertical list were separated vertically by 8 pixels.

I’ve usually implemented this idea with a set of rhythm-$direction-$spacing CSS classes that would be applied to Flex containers like this:

<div className="flex-column rhythm-vertical-8>{...children}</div>

These classes do the following (SCSS):

& > :not(:firstChild) {
    margin-top: $spacing; // margin-left for horizontal
}

Given that Primer’s Flex component has flexDirection as a prop, exposing a rhythm prop would allow Flex to automatically generate the appropriate classes.

This paradigm allows for a few things:

1. Use of components that don’t actually have any margin props exposed without having to manage the margins of elements around them (eg. putting an SVG between two Text elements is currently a tiny bit painful if you want any spacing)
2. Less duplication of mr={2} on child components for these kinds of scenarios

I’m not sure if this is a thing that’s in keeping with the Primer design system, or necessarily something that Primer wants to support as a first-class idea, but I’ve found a notion of this handy in the past and wanted to float it as an idea.

If this is something Primer wants to support, I’m happy to spend an hour or two this weekend opening a pull-request for it.

[colebemis]

> * + *

👆 This funky-looking selector tells CSS to select any element that immediately follows a direct child of the flex container:

It’s a combination of a child combinator (>), adjacent sibling combinator (+), and universal selectors (*) if you’re interested in reading more.

[colebemis]

I think I found a simple way to implement this with just CSS:

CodeSandbox demo

const Flex = styled.div`
  display: flex;

  > * + * {
    ${props => {
      const gap = themeGet("space." + props.gap)(props);
      return props.flexDirection === "column"
        ? `margin-top: ${gap}`
        : `margin-left: ${gap}`;
    }}
  }

  ${color};
  ${space};
  ${layout};
  ${flexbox};
`;

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Flex bg="red.3" flexDirection="column" gap={2}>
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <Flex mt={0}>four</Flex>
      </Flex>
    </ThemeProvider>
  );
}

This implementation allows children to override the margin without needing any special logic 😄

Update: Playing with this component in CodeSandbox makes me really want it in Primer Components now haha