You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
The text was updated successfully, but these errors were encountered:
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:10calc(33%-(var(--spacing-50)*2));
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:10calc(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.
Description
Currently, it looks like our
toggle-buttons
within atoggle-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
The text was updated successfully, but these errors were encountered: