create space between panes inside a container

[GhostOrder28]

This seems a fairly simple task and maybe I'm overthinking it but I can't achieve the result I want.

In pure css you can use the adjacent selector to give margins to all the elements but the first one

.item + .item {
 margin-top: 10px;
}

This helps when you have a bunch of elements inside a container and you want to create some space between them.

However when using evergreen I would like to not use additional css sheets if possible and so I was wondering if there is a way to achieve the same result with the css-in-js style of evergreen, right now I have:

<Container>
  <Pane></Pane>
  <Pane></Pane>
  <Pane></Pane>
</Container>

and I would like to add some space between my panes, of course I can do:

<Container>
  <Pane></Pane>
  <Pane marginTop={10}></Pane>
  <Pane marginTop={10}></Pane>
</Container>

but obviously this is not DRY, what if I have like 10 panes?

Other solution is create a wrapper component just to apply that style but that seems very unpractical.

So is there a way to achieve the same result that the adjacent selector produce?

[brandongregoryscott]

Hey @GhostOrder28! While we don't have something out of the box that can do this, you could do this by pulling in glamor and making a utility component for spacing with something like this:

import { Pane, PaneProps } from "evergreen-ui";
import React from "react";
import { css } from "glamor";

interface SpaceProps {
  props: Pick<
    PaneProps,
    | "margin"
    | "marginBottom"
    | "marginLeft"
    | "marginRight"
    | "marginTop"
    | "marginX"
    | "marginY"
  >;
  children: React.ReactNode;
}

const Space: React.FC<SpaceProps> = (props) => {
  const { props: paneProps, children } = props;

  const className = css({
    "& > *": paneProps
  }).toString();

  return <Pane className={className}>{children}</Pane>;
};


// ...
<Space props={{ marginTop: 10 }}>
    <Pane />
    <Pane />
    <Pane />
</Space>

You could also leverage React.cloneElement to clone children with the desired styling props without having to pull in glamor directly. This example demonstrates cloning margin props onto Pane children only, although you could include Card or other component types as needed.

import { Pane, PaneProps } from "evergreen-ui";
import React from "react";

interface SpaceProps
  extends Pick<
    PaneProps,
    | "margin"
    | "marginBottom"
    | "marginLeft"
    | "marginRight"
    | "marginTop"
    | "marginX"
    | "marginY"
  > {
  children: React.ReactNode;
}

const Space: React.FC<SpaceProps> = (props) => {
  const { children, ...paneProps } = props;

  return (
    <React.Fragment>
      {React.Children.map(children, (child) => {
        if (React.isValidElement(child) && child.type === Pane) {
          return React.cloneElement(child, paneProps);
        }

        return child;
      })}
    </React.Fragment>
  );
};

// ...
<Space marginTop={10}>
    <Pane />
    <Pane />
    <Pane />
</Space>

[GhostOrder28]

Hey @brandongregoryscott thank you for the help! I didn't knew about glamor.

[brandongregoryscott]

Yep! We use glamor for some of our more advanced css-in-js (such as animations and pseudoselectors), so it comes bundled with evergreen. We're looking at moving to another css-in-js abstraction since glamor hasn't been maintained in a long time (#1304, #1146) but I can't promise when that'll happen.