Closed jameskoster closed 1 month ago
The simplest thing to try here would be horizontal scrolling with a slightly different button appearance / layout:
https://github.com/WordPress/gutenberg/assets/846565/39c933f2-ef09-4d3c-955a-2aebc18a614d
Some other things we might try to save space:
x
buttons There are usability trade-offs to this though, so perhaps worth looking at separately.
Another option would be to restrict display to X number of chips, and hide the others behind a + x more
link:
The horizontal scrolling is a common practice on mobile devices and scales well. If paired with the scrollbar mixin, it could work well and potentially be simple to implement, at least as a starting point.
Something else we tried early on is if on mobile or list view, condense filters down into dropdown. We'd have an indicator "1" on filter icon. Relates a little to previous discussions about hiding view filters by default.
Horizontal scrolling is also nice though and an improvement over what we have.
Containing all the filters in a single menu turned out to be a dead-end in terms of accessibility, but a similar approach might be to place filters in a dedicated panel, accessed by a toggle button.
We can be smart about when to show/hide the panel:
Instead of permanently displaying filter controls and selections, we can place them in a toggle-able panel. This will allow users to selectively tidy up the interface which will prove particularly useful on narrow viewports (mobile) and containers (list layout).
We can be smart about when to show/hide the panel:
Original issue
In https://github.com/WordPress/gutenberg/issues/59696 the display of individual chips can be finessed. But we still need to figure out the display of many filters in narrow containers / viewports. It's not a huge problem right now because the existing data views only have <=2 filters. However, things like Posts or Media (https://github.com/WordPress/gutenberg/issues/55238) can have many filter options, and this experience isn't ideal: