Add selection state to tags in GridFilterTags

[andrewtavis]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow activist's Code of Conduct

Description

We have the component GridFilterTags that provides tags for filtering search and page results. We as of now don't have styling added for when one of the options is selected. Potentially look into refactoring this component with a Headless UI component like radio group would be good to achieve this, but we'd also need to make sure that we allow for selecting more than one option and also deselecting an option.

Contribution

Happy to support with this or get to it myself eventually! This is a great good first issue for someone wanting to contribute to activist for the first time, and is of course open for those already in the contributor base.

Let's first discuss the implementation and then we can go from there! 🚀

[keythroy]

I can try to help on this one

[andrewtavis]

Thanks @keythroy! Just assigned you :) Let's be sure to check whether radio group can allow for selecting more than one option and deselecting all of them before we get too deep into this.

Looking forward to this!

[andrewtavis]

Hey @keythroy 👋 Hope all's well! Let us know if there's anything we can do to support with this! 😊

[UnknownSean8]

Hi @andrewtavis, I can work on this, thanks! :P

[andrewtavis]

Thanks @UnknownSean8! Let me know if there's anything I can do to support :)

[UnknownSean8]

Hi @andrewtavis, sorry for the delay! I will push the changes by this Sunday at the latest. :P

[andrewtavis]

No stress, @UnknownSean8! Looking forward to them :)

[UnknownSean8]

Hi @andrewtavis, I was wondering if it's better to use the previous #276 CardTopicSelection component to implement this so we have a more consistent component. I saw the design in Figma it's rather similar, I can modify the current component to be more customisable.

Also, I can use the Switch component in HeadlessUI to implement the GridFilterTags, it follows the check box accessibility except the arrow keys navigation. But ofc, I can also implement the arrow keys navigation here.

Sorry for the confusing comment hahaha, I think what I want to say is:

1. Change the CardTopicSelection component to use the Switch component instead of the current implementation.
2. Make the CardTopicSelection component (or create a new component) to be more customisable to fit the GridFilterTags.

Current implementation using HeadlessUI switch component.

What do you think? Thanks!

[andrewtavis]

Hey @UnknownSean8! This is a great point :) Really happy you ended up working on this as the overall UI wasn't 100% thought through and you're the perfect person to help with this 😊 I think that this component resembling the topics one makes total sense, but I'm unsure on one point. Are users allowed to select multiple tags? Here's how I see it:

• They are allowed to select more than one: it's very similar to the topic selector
• They're not: there is no motion of the selected tag moving to the front, and this component would function as a radio group

My initial idea here was that a person would not be able to filter by more than one tag as we're getting into a territory where the quality of results would be a bit restricted. Think of this like tags on GitHub repos where I don't think we can search for more than one at a given time.

Let's check with @therealhoppi on this :) What were you thinking on tags being selected to filter search results?

[andrewtavis]

Talked with @therealhoppi about this, @UnknownSean8 :) He said that to him a multi select would be good and we can test from there. Basically what we're looking for then is a component that has the selection and accessibility of CardTopicSelection, but without the input filter or the rest of the card. Do you think it's possible to make a component that has just that and then put it inside CardTopicSelection? We could call it TopicTagSelector.vue or something like that?

[andrewtavis]

Closed via #785 🥳 Thanks @UnknownSean8!