Spacings

Spacing components enable us to use consistent vertical and horizontal rhythm without ever having to remember specific pixel values. The use of these components eliminates most margins and paddings and flex layouts, while making our markup a lot more semantic.

The three available spacing components are:

• Inset: creates space around the edges of the children
• Inline: creates space between horizontially layed out children
• Stack: creates space between vertically layed out children

Something that all of these components share is a spacing scale. It abstracts pixel values away and provides us with semantic scale options that we use to specify how big the spacing is that we want.

Scales

Inset

Adds some padding and doesn't lay out its children in a certain way.

<div style={{ display: "inline-block", backgroundColor: "papayawhip" }}>
  <Spacings.Inset scale="medium">
    <div
      style={{
        backgroundColor: designTokens.palette.brand.light,
        height: 50,
        width: 50,
      }}
    />
  </Spacings.Inset>
</div>

InsetSquish

Just like inset but adds more horizontal than vertical padding. This is most commonly used for buttons and button-like elements like tabs.

<div style={{ display: "inline-block", backgroundColor: "papayawhip" }}>
  <Spacings.InsetSquish scale="medium">
    <div style={{ backgroundColor: designTokens.palette.brand.light }}>
      <Text>Button</Text>
    </div>
  </Spacings.InsetSquish>
</div>

Stack

Lays out children vertically and adds consistent space between them.

<Spacings.Inset>
  <div style={{ backgroundColor: "papayawhip" }}>
    <Spacings.Stack scale="medium">
      <div
        style={{
          backgroundColor: designTokens.palette.brand.light,
          height: 40,
        }}
      />
      <div
        style={{
          backgroundColor: designTokens.palette.brand.light,
          height: 30,
        }}
      />
      <div
        style={{
          backgroundColor: designTokens.palette.brand.light,
          height: 70,
        }}
      />
    </Spacings.Stack>
  </div>
</Spacings.Inset>

Inline

Lays out children horizontally and adds consistent space between them.

<Spacings.Inset>
  <div style={{ display: "inline-block", backgroundColor: "papayawhip" }}>
    <Spacings.Inline scale="medium">
      <div
        style={{
          backgroundColor: designTokens.palette.brand.light,
          height: 100,
          width: 40,
        }}
      />
      <div
        style={{
          backgroundColor: designTokens.palette.brand.light,
          height: 100,
          width: 30,
        }}
      />
      <div
        style={{
          backgroundColor: designTokens.palette.brand.light,
          height: 100,
          width: 70,
        }}
      />
    </Spacings.Inline>
  </div>
</Spacings.Inset>

Switcher

Lays out children horizontally when the container's width is above the given threshold and vertically when the container's width is below the threshold.

<Spacings.Stack scale="big">
  <Spacings.Stack>
    <Text textStyle="headline6">30em - Horizontal</Text>
    <div
      style={{
        display: "inline-block",
        backgroundColor: "papayawhip",
        width: "30em",
      }}
    >
      <Spacings.Switcher scale="medium" threshold="30em">
        <div
          style={{
            backgroundColor: designTokens.palette.brand.light,
          }}
        >
          1
        </div>
        <div
          style={{
            backgroundColor: designTokens.palette.brand.light,
          }}
        >
          2
        </div>
        <div
          style={{
            backgroundColor: designTokens.palette.brand.light,
          }}
        >
          3
        </div>
      </Spacings.Switcher>
    </div>
  </Spacings.Stack>
  <Spacings.Stack>
    <Text textStyle="headline6">29em - Horizontal</Text>
    <div
      style={{
        display: "inline-block",
        backgroundColor: "papayawhip",
        width: "29em",
      }}
    >
      <Spacings.Switcher scale="medium" threshold="30em">
        <div
          style={{
            backgroundColor: designTokens.palette.brand.light,
          }}
        >
          1
        </div>
        <div
          style={{
            backgroundColor: designTokens.palette.brand.light,
          }}
        >
          2
        </div>
        <div
          style={{
            backgroundColor: designTokens.palette.brand.light,
          }}
        >
          3
        </div>
      </Spacings.Switcher>
    </div>
  </Spacings.Stack>
</Spacings.Stack>