patternfly-design
patternfly-design copied to clipboard
patternfly
Toggle groups(Exploratory): Rethink the responsive behaviour
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.
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
@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.
@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?
@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.
