How to handle spacing

[developer239]

Great UI library you have here. I have one question though. How do you handle layouting? I like to write clean code and wrapping UI library components into custom components just so that I can add spacing seems a bit redundant to me. Maybe I just didn't look hard enough? 🤔

Expectations

<Field>
  <Label>Soil</Label>
  <FauxInput>Loam</FauxInput>
</Field>
<Field marginTop={10}>
  <Label>Soil</Label>
  <FauxInput>Loam</FauxInput>
</Field>

Reality

const StyledField = styled.`& + & { margin-top: 10px }`

<StyledField>
  <Label>Soil</Label>
  <FauxInput>Loam</FauxInput>
</Field>
<StyledField marginTop={10}>
  <Label>Soil</Label>
  <FauxInput>Loam</FauxInput>
</Field>;

[jzempel]

Hi Michal,

Thank you for the kind words. When you look through the documentation, you'll see an Extends clause connected with each component. This clause is key (and easy to miss) for letting you know that the component can apply all the props related to the element it extends (in the case of Field, this would be a div).

This means you can use style, className (with Tailwind CSS perhaps), etc. to affect the component of interest. In your case:

<Field>
  <Label>Soil</Label>
  <FauxInput>Loam</FauxInput>
</Field>
<Field style={{ marginTop: 10 }}>
  <Label>Soil</Label>
  <FauxInput>Loam</FauxInput>
</Field>

You might also find that theming is a helpful route for building custom components that incorporate the spacing you need. Hope that helps.

[developer239]

@jzempel Personally I mark inline styles as errors with ESLint and I dislike Tailwind because I like to keep my view separate from styles. 🤔 I was wondering if you plan to add Box component or something in that sense.

Ideal scenario would look like this:

<StyledField marginTop={10}>
  <Label>Soil</Label>
  <FauxInput>Loam</FauxInput>
</Field>

Not so ideal scenario could look lke this:

<Box marginTop={10}>
  <StyledField>
    <Label>Soil</Label>
    <FauxInput>Loam</FauxInput>
  </Field>
</Box>

marginTop can also be replaced with something like spacing="small|medium|large"

[jzempel]

There are no plans to change Garden's documented forwardRef API to introduce one-off spacing props. Also, at this time, there are no plans for a Box-like component.