-
Notifications
You must be signed in to change notification settings - Fork 66
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
toggle-button-group: add equal heights and make fully responsive #2310
Comments
Dev NoteMost likely, we'll have to start using /* 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. |
Note on direction: the only way to have equal height buttons spanning multiple rows is to use |
Description
Currently, our
toggle-buttons
within atoggle-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,
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.toggle-button-group
fully responsive using container queries.Screenshots
Current:
Desired:
Figma link
No response
Engineering pre-requisites
The text was updated successfully, but these errors were encountered: