toggle-button-group: add equal heights and make fully responsive

[ArtBlue]

Description

Currently, our toggle-buttons within a toggle-button-group do not have the same height so when the content of one button is taller than others, the layout is not balanced.

Additionally, the initial iteration of toggle-button-group was semi-responsive with the use of 'desired columns` for the preferred number of buttons per row before wrapping, which was not guaranteed.

Since these two features are extremely intertwined because of a shift to use display: grid and both require a breaking change, it's best to do them at the same time.

For this issue,

1. Add equal heights feature to toggle-button-group so that an increase in height of one button makes all buttons the same height, whether they are on a single row or span multiple rows.
2. Make toggle-button-group fully responsive using container queries.

Screenshots

Current:

Desired:

Figma link

No response

Engineering pre-requisites

• Successful design review with Design System Team.
• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).
• Successful accessibility review with Core A11Y Team.
• Successful frontend review with eBayUI Team.

[ArtBlue]

Dev Note

Most likely, we'll have to start using flex for toggle-button-group, which will be a slight abandoning of inline-block, which allows more easy wrapping. The solution might need to make clever use of flex on the <li>s, something like,

/* width percentages relative to 100% / [columns] */
/* subtracting the margins from both sides */
flex: 1 0 calc(33% -(var(--spacing-50)* 2));

[ArtBlue]

Dev Note

Most likely, we'll have to start using flex for toggle-button-group, which will be a slight abandoning of inline-block, which allows more easy wrapping. The solution might need to make clever use of flex on the <li>s, something like,

/* width percentages relative to 100% / [columns] */
/* subtracting the margins from both sides */
flex: 1 0 calc(33% -(var(--spacing-50)* 2));

This option only allowed equal heights across a single row. Once the row wraps, heights are reset. This means that each row can have a different height.

[ArtBlue]

Note on direction: the only way to have equal height buttons spanning multiple rows is to use display: grid with column templates and implied rows.