ButtonGroup with stretch

[sumius]

Suggested technology

Could we add a stretch prop to ButtonGroup, similar to what Button has.

I see a few designs, where we are using ButtonGroup, but with stretched buttons. Ref. img:

Alternatives

I can achieve this with using Buttons directly, that is an alternative.

Potential downsides

I tried to forward the stretch prop, but that doesn't give the correct look unfortunately.

[sumius]

Suggested solution:
#1473

[robinmetral]

Hey @sumius! Thanks for the suggestion 🙌 It seems to me that we might want to stick with one option for consistency here (either stretch buttons everywhere, or nowhere), but I'll double check with system designers and get back to you!

[sumius]

Hey @sumius! Thanks for the suggestion 🙌 It seems to me that we might want to stick with one option for consistency here (either stretch buttons everywhere, or nowhere), but I'll double check with system designers and get back to you!

Thanks

[robinmetral]

I have an update here—thanks for bearing with me @sumius! We decided to keep things consistent and go for the following definition:

• when two buttons are paired they should both have the size of the larger button's content
• when a button is by itself it should be sized according to its content

Note: we asked product designers for feedback about the design spec change so there's a small change it can still change.

What this means for Circuit UI Web is that our current implementation is almost correct: we just need two buttons to have the same width (the larger button's content width) instead of being sized independently.

A few months ago we had postponed this change because we couldn't think of a clean CSS solution, but since we're deprecating browsers that don't support CSS grid, we'll be able to achieve it using inline-grid starting in v5. Here's a POC for same-width inline buttons that I made back then.

I suggest keeping this issue open until we confirmed with other teams that there's no concerns with the design spec change, and after that tackling the new inline-grid layout for the ButtonGroup in a new PR targeting next (for v5). Happy to do it or to accept a contribution here 🙂

How does this sound?

Edit: ref of the full discussion with design, internal link

[sumius]

I have an update here—thanks for bearing with me @sumius! We decided to keep things consistent and go for the following definition:

• when two buttons are paired they should both have the size of the larger button's content
• when a button is by itself it should be sized according to its content

Note: we asked product designers for feedback about the design spec change so there's a small change it can still change.

What this means for Circuit UI Web is that our current implementation is almost correct: we just need two buttons to have the same width (the larger button's content width) instead of being sized independently.

A few months ago we had postponed this change because we couldn't think of a clean CSS solution, but since we're deprecating browsers that don't support CSS grid, we'll be able to achieve it using inline-grid starting in v5. Here's a POC for same-width inline buttons that I made back then.

I suggest keeping this issue open until we confirmed with other teams that there's no concerns with the design spec change, and after that tackling the new inline-grid layout for the ButtonGroup in a new PR targeting next (for v5). Happy to do it or to accept a contribution here 🙂

How does this sound?

Edit: ref of the full discussion with design, internal link

Thanks for looking into this.