Creating dropdowns with list of checkboxes

[noahmanger]

This is a work in progress, but wanted to show what I'm working on for the UI at least.

Begin with a dropdown button:

When you click, a list of checkboxes appears:

The list is limited to a certain height, but you scroll within it. Click on the button again to hide the list.

One thing I'm not certain about is how to signify if there are filters selected. Do you change the text on the button to say which filters are selected? Change it to be generic like "2 filters selected", or just show a different color or something? Ideas? @jenniferthibault ?

Also, @jmcarp take a look at the code and let me know if that makes sense. I was thinking that it's probably best to wrap each thing in a <fieldset> with the name set to the appropriate filter.

[jenniferthibault]

@noahmanger what about something like this? Where the applied filters are listed below the dropdown as they're checked, and can be x'ed out of:

[noahmanger]

@jenniferthibault I really like the idea of showing the "filters applied" as removable tags like that. Two questions:

1. I think it still leaves the question of what the behavior is in the select dropdown. Is it still a list of checkboxes? Can you check multiple without the menu closing or only one?
2. What do you think about displaying the tags in the box above the table, maybe in place of the "hide filters" button (which could be relocated). I was noodling on this idea because it would make the filters visible even when closed, which would really help on smaller screens. But maybe having them visually separated from the actual filter controls would be confusing?

[noahmanger]

So I'm playing around with this pattern where the dropdown contains all additional options, but selecting one moves it above, that way you can easily see all applied filters:

It also allows us to choose to force certain common filters to always be visible, even when not checked (i'm thinking like the common party choices) while hiding the rest. Thoughts?

[noahmanger]

Totally rabbit-holed on this one, but I like how it's shaping up:

[LindsayYoung]

I like this. Will merge when tests pass.