Allow choice cards to wrap

[SiAdcock]

Describe the bug

If choice cards don't fit into their container, they should wrap onto the next line

To Reproduce

Constrain the width of the container for a set of choice cards. Observe that the cards break out of their container

Expected behavior

The cards should wrap onto the next line. Currently, cards take up 1/n of the available space, where n is the number of choice cards (flex-grow: 1). In order to preserve the widths of each choice card, we would need to switch from using flexbox to using grid to layout the cards.

Screenshots

Currently:

Ideally:

[rrrahal]

Hello,

I was looking at this problem and I have a question.
Is there a max size that a choice card should have?
Because when we set something like: grid-template-columns you have to set some sort of ceiling for the grid to know when a column ends, otherwise the button will occupy the whole space available (flex-grow: 1)

I got it with grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); but I don't think that's 100% correct:

this is without constraining the container size

this is constraining the container size

[SiAdcock]

Hi @rrrahal. Thanks so much for taking a look at this 🙏

It's such a tricky problem! I suspect that you are correct and that there's no way of doing this without hardcoding either a ceiling or a minimum width for choice cards. However I don't think we should do this. It would be too constraining and would make these components less useful.

I have an alternative proposal that involves expanding the API.

Default behaviour

<ChoiceCardGroup>
  <ChoiceCard label="Single" />
  <ChoiceCard label="Fortnightly" />
  <ChoiceCard label="Monthly" />
  <ChoiceCard label="Half Yearly" />
  <ChoiceCard label="Annually" />
</ChoiceCardGroup>

The current behaviour. Choice cards have equal width and occupy a single row. If the parent is constrained, they will shrink as much as possible before breaking out of the boundary of the parent.

Tiling behaviour

<ChoiceCardGroup columns={3}>
  <ChoiceCard label="Single" />
  <ChoiceCard label="Fortnightly" />
  <ChoiceCard label="Monthly" />
  <ChoiceCard label="Half Yearly" />
  <ChoiceCard label="Annually" />
</ChoiceCardGroup>

Choice cards will be tiled with the specified number of columns. If there are more choice cards than columns, choice cards will wrap onto a new row. Choice cards will all be of equal width. This behaviour is inspired by the Tiles component in the Braid Design System.

I think this is achievable using flex, without having to resort to CSS grid. Let me know what you think

[rrrahal]

I like expanding the API.
I managed to do it but I couldn't figured it out using flex (it was the same issue involving the size of the choice card that wraps).
Using grid on the other hand it was pretty easy, apart from some small margin changes.
I will open a PR for you to check and see if it is useful.

[SiAdcock]

Fixed by #554