Functional Filters!

[charmingduchess]

NB: to see the filters in action, head to the vercel preview and click on the advanced search button. clicking apply will show you the query that would be added to the url.

Basic overview:

• Filters open and close.
  • I did not use the Accordion component because there is a ton of styling overrides required. Also much of the open/closed logic would still need to be ported from this solution, such as only having one filter open at a time, and closing on blur and escape key.
• options selected in a checkbox group are not persisted when that filter closes unless the filter has been applied
• applied filters are the filters that generate the url (and are in turn generated by the url)

honestly more than anything i would appreciate just folks clicking around and trying to break things! the expected behavior is a little kooky but I'm confident this work does what DFE does, for better or for worse.

I closed 3664 because i was getting very tangled going back and forth between the two branches. i incorporated the rest of yall's requests into this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
research-catalog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 9, 2023 3:43pm

[charmingduchess]

Added styling!

[EdwinGuzman]

This is really well done! Really liking the functional style for the data model and logic.

Nothing big to update/flag in the code and some things are "temp". There is this issue with the dropdown not layered correctly:

I think one accessibility issue Clare might bring up is keeping focus within the filter button and the elements inside its dropdown. Right now, when you tab through the filters, you just continue to the next element on the page (this is how I landed on the above visual bug).

[apoorvakhanolkar]

My only comment is to set the dropdowns to a fixed width of 200px with a spacing of 32px between them, so that they have some breathing room.

[charmingduchess]

@apoorvakhanolkar would you be okay 230px for the filter width and 16px margin? At 200px the longer labels wrap in a way that I find hard to read

[apoorvakhanolkar]

@apoorvakhanolkar would you be okay 230px for the filter width and 16px margin? At 200px the longer labels wrap in a way that I find hard to read

Yes that's OK

[charmingduchess]

We decided to not worry about the tabbing/z index/focus issue until we get feedback from Clare about accessibility