toggle-button-group: add equal heights to toggle buttons in group

[ArtBlue]

Description

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

For this, add the feature, either baked in, or using a modifier to allow for this use case.

Screenshots

Current:

Desired:

Figma link

No response

Engineering pre-requisites

• [X] Successful design review with Design System Team.
• [X] Supports dark mode.
• [X] Supports responsive design.
• [X] Tokens have been provided (or already exist).
• [X] Successful accessibility review with Core A11Y Team.
• [X] 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.