Skip to content

Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers #60696

@jameskoster

Description

@jameskoster

Filter 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:

  • Hidden by default across all layouts when no filters are applied
  • Visible on load when the container is larger than X (Table / Grid layout), and filters are applied
  • Hidden on load when the container is smaller than X (List layout), even if filters are applied
Original issueIn https://github.com//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 (#55238) can have many filter options, and this experience isn't ideal:

Screenshot 2024-04-12 at 10 12 11

Let's explore how to better display many chips in the filter UI.

Metadata

Metadata

Labels

Needs DevReady for, and needs developer efforts[Feature] DataViewsWork surrounding upgrading and evolving views in the site editor and beyond[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions