Toggle groups(Exploratory): Rethink the responsive behaviour

[andrew-ronaldson]

Enhancement objective

The current toggle group can wrap items or add a horizontal scroll bar. Stacking the items results in a long block of buttons that can take up too much vertical space. Design should look at multiple solutions to improve the experience on smaller screens.

[heyethankim]

To give more context, the screenshot below is what I found when I resized it to the smallest. But what if we have more than 4 toggles? I asked a question if we have any wrap (responsive) version of the toggle group for the smallest browser. Originally I thought it would similarly behave like a dropdown without the help text (Select…).

Dallas Nicol suggested that we should consider "Flex." Here are the Slack discussion link: https://redhat-internal.slack.com/archives/C04JMHKSD9C/p1702912912104979

[andrew-ronaldson]

@kaylachumley is going to be looking into this. Thanks @heyethankim!
We have an issue in core as well but we can keep design work on here.

[kaylachumley]

Alternative to stacking: turn into menu toggle

[kaylachumley]

@mcoker @srambach Andrew and I discussed the toggle groups on desktop switching to a menu toggle on mobile to avoid awkward stacking after 4 or more toggles are present. What are your thoughts on this and would this be too heavy of a lift?

[mcoker]

@kaylachumley from core's perspective, I don't think it's a heavy lift. I think the tricky work would mostly be on the react side. From what I can tell, we would basically just swap the toggle group for a select that can support a single-select or multi-select.

Some ideas...

If it's a single-select toggle group, it seems like a default "select" menu may work well where the text in the menu toggle matches the currently selected menu toggle. And if it's a multi-select, you would pass a label of some sort to be used for the toggle text that indicates you need to select items in the menu. That label could also be used with a single-select toggle group, too, if you didn't want the toggle text to reflect the currently selected item. And an icon-only toggle group could accept a label per item/toggle, and the label is used as the text (along with the icon) in the menu as menu items. That label could work with (or come from) the aria-label prop we currently support on menu toggle items.

[andrew-ronaldson]

@tlabaj wanted to get your thoughts on this as well.