Skip to content
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

[new-pattern] - Horizontal (chip + popover) Filters #5

Open
dshank opened this issue Mar 18, 2024 · 1 comment
Open

[new-pattern] - Horizontal (chip + popover) Filters #5

dshank opened this issue Mar 18, 2024 · 1 comment

Comments

@dshank
Copy link

dshank commented Mar 18, 2024

We have in a few places patterns for showing filters across the top of a page in a "Quick filter" way. This leverages a combination of chips, popovers, and various type controls. Here's a few different patterns from our apps, I'm sure there are others in other divisions. Very similar to our multiselect fields but with a more configurable experience for when the control is open beyond a simple list

Some Notes

  • Need to show a summary of chosen options in the chip when closed
  • popover will have some custom content depending on the control, mostly it will be a richer experience than a multiselect as it will have some advanced filtering settings such as "contains" or "equals"
  • ability to add additional filters optionally. Some areas may configure some to show by default in an empty state.
image image image image
@dshank dshank changed the title Horizontal Filter Pattern [new-pattern] - Horizontal (chip + popover) Filters Mar 18, 2024
@tylermcgowan
Copy link

tylermcgowan commented Apr 5, 2024

I've been playing with a similar filter pattern recently as well. Not unique by any means, but follows similar patterns to popular apps out there (Notion, Linear, etc.)

CleanShot 2024-04-05 at 11 46 44@2x

CleanShot 2024-04-05 at 11 48 28@2x

CleanShot 2024-04-05 at 11 48 43@2x

CleanShot 2024-04-05 at 11 49 00@2x

Full screens for better context
image

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants