Add arrangement solution to the component library

[huyenltnguyen]

Describe the issue

During freeCodeCamp/freeCodeCamp#52092, I found that the ui-components buttons don't automatically space out when they stack on top of each other, and the library also doesn't have a prop or a component to handle this sort of arrangement.

Comparison:

Bootstrap	ui-components

To unblock the migration, I temporarily used the Spacer component in /learn to manually add a gap between the buttons (see freeCodeCamp/freeCodeCamp#52577).

Solution

Some approaches off the top of my head:

1. Mimic Bootstrap implementation and add spacing logic to the Button component
2. Build a new component component in ui-components that handles layout arrangement, including direction (vertical and horizontal) and content spacing

My thoughts:
I'm personally against (1). I think atomic components such as Button should be made as dumb as possible, and they shouldn't be aware of their layout context to compute their styles.

That leaves me with option (2). I would call this new component Container as the described responsibilities fit the name. However, we already have a Container component in ui-components, which at the moment is just a wrapper that controls width and pads its content. So we would need to either find a new name for this component or update Container to support these capabilities.

References

How Bootstrap handles the button spacing: https://github.com/twbs/bootstrap/blob/f17f882df292b29323f1e1da515bd16f326cee4a/less/buttons.less#L156-L159

[igoroganesian]

If this is specifically for buttons, why not mimic Bootstrap's "button group" container with our desired styling?

[huyenltnguyen]

I never said this is specifically for buttons 🙂

The ability to space out content should be made available to all component types. A non-button use case we have is input stacking:

[igoroganesian]

Noted, but would all these components share the same spacing rules? The buttons work well with that thin gap, whereas forms require more for clarity.

[huyenltnguyen]

I personally would want to standardize the list of spacing values as well as the values each component type can use. But since a component can have multiple sizes, we will need to have some if/else checks to ensure the gap is proportionate to the size.

---

What I have in mind at the moment is having a Container component that receives a space prop, and the prop only allows certain values, say 'small' | 'medium' | 'large'.

Container can be exported for consumption on its own, but can also be used as a building block for a ButtonGroup or an InputGroup component:

const ButtonGroup = () => (
  <Container space="small">
    // ...
  </Container>
)

const InputGroup = () => (
  <Container space="medium">
    // ...
  </Container>
)

And we can use all of these components for the layout above:

const Form = () => (
  <Container space="medium">
    <InputGroup />
    <ButtonGroup /> // Pretend we have multiple buttons in the form
  </Container>
)

---

That's just my thought, but the implementation or even technical design don't mean much at this phase though. We will need to revisit all of the layouts we have and write down the spec first :)

[nichgalzin]

First time contributer here looking to get involved. These seems something on my level. Let me know if you would like me to implement one of the above ideas?

[huyenltnguyen]

@nichgalzin Thank you for your interest.

This issue is not open for contributions at the moment. Please check issues labeled with help-wanted or first timers only instead.

[nichgalzin]

Thanks @huyenltnguyen. I'll do that.