Present boolean filters as checkboxes

I've asked @kunal.sachdev to take a look at this.

kunal.sachdev → made their first commit to this issue’s fork.

The checkboxes seems a bit misaligned as you can see in the SS:-

I think we can place them in centre.
Also i have an opinion,

can we use toggles instead of checkboxes?

Marking it NW just for a few css adjustment and opinions on the question.

Let's entirely change the layout of the search area, into three columns:

1. The categories
2. The three checkboxes, stacked one on top of the other
3. The sort options

That would fix alignment issues and probably make more sense for this different presentation. What do you think?

Reviewed the code that I think it looks great. This is so much better and simpler, and I suspect it will be greatly appreciated by @chrisfromredfin.

Once the layout is fixed, I'd be quite happy to RTBC this after a quick manual test.

I the SS can we make the Sort by label stacked over the dropdown just like the Filter by category to make it more uniform?

Also as i mentioned earlier in #8 regarding the use of toggles instead of plain checkboxes, I am attaching the SS of how it looks after using toggle.
SS:-

What do others think about this change?

I really like what we're doing here. It's so much clearer and it makes the tests much easier to grok.

I think the only sticking point, here, is how we group the filters. We need this to be more generic. I posted a suggestion on how we might go about that.

Also there are now some merge conflicts to be fixed since we removed clickWithWait() and pressWithWait() from the tests.

At @kunal.sachdev's request, I tried to figure out the grouping stuff here. It really turned into a rabbit hole.

As I see it, the problem is that "groups" has no real meaning to FilterBase, and its purpose is therefore ambiguous. The Svelte code doesn't use it for anything.

Therefore, I think the way forward here is to reduce the scope a bit. Let's not worry about grouping the filters. Let's not worry about stacking them on top of each other. Let's keep things in exactly the same layout they are now, except that the boolean filters become checkboxes. We'll also remove FilterBase::$group, since it's not used and we're not sure how to use it. We can always restore it later, if we need to, as an API addition.

I'll take care of reducing the scope here, and keeping Kunal's changes to BooleanFilter.svelte and the tests. I think we can keep the CSS basically as it is in 2.0.x.

After dialing back the scope and reverting the CSS changes, we have this:

I don't think this is too bad; in fact, I think it's enough to call this issue fixed, and we can rework the layout in a follow-up.

The only tweak I would suggest is that the checkbox label should not wrap around the checkbox itself; it should always be fully next to it. I'm not sure what the correct CSS for this would be.

The bigger problem is that, once I uncheck the checkbox, I...can't check it again! That's problematic, and most likely a bug in the JavaScript. Reassigning to @kunal.sachdev to figure that out.

Getting the layout right is proving surprisingly tricky. @kunal.sachdev and I paired on it, then I tried to hack on it myself, and neither of us was able to get anywhere.

What really needs to happen here is a stronger layout - the boolean filters should be grouped together, as a list, and to the right of the categories. But that's beyond the scope of this issue.

So we agreed to land this as-is, even with the layout being sub-optimal, since we both feel this is a better IA than a row of select lists. I will open a follow-up to implement a better layout for the filters, which can be a must-have issue for beta2.

Opened ✨ Improve the layout of the filters Active to improve the layout of the filters.

Release Notes: "BooleanFilter is now a boolean filter."

Automatically closed - issue fixed for 2 weeks with no activity.