Side Filters layout help

[Porlin]

Hello,

I have some questions regarding the side panel filter pattern we have in Flex on the Teams page. Please reference this previous thread for context on the Teams hierarchy - Github thread

1. Flex Teams_Side modal button location - example image
   Currently in Flex we have the Apply button anchored to the RHS and the number of agents to the LHS.
   The location sits on the bottom and stays persistent if a scroll is applied.

In the example you have provided the ‘Apply’ and ‘Clear all’ buttons are anchored to the LHS.

Is this the recommended pattern? And should the buttons stay anchored at the bottom of the page OR in line with the content?

2. Apply button functionality - example image
   We have two tabs illustrated here being “Activities’ and ‘Teams’ inside the filter side panel. Is the ‘Apply button’ commonplace across all the tabs or does it function individually per tab?

3. Clear all or Reset button functionality - example image
   We have two tabs illustrated here being “Activities’ and ‘Teams’ inside the filter side panel.

Can we replace the ‘Clear all’ with a ‘Reset’ button?

Is the ‘Clear all’ or ‘Reset’ button commonplace across all the tabs or does it and can it function individually per tab?
I have a new Figma link here

Happy to jump on a call if preferred.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Search Field (updated: 07/22/2022, similarity score: 86%)
• Table filters, etc. - Answer (updated: 08/02/2023, similarity score: 86%)
• Search/filter - Answer (updated: 06/22/2022, similarity score: 85%)

[dosubot[bot]]

Hey there, @Porlin! 👋 I'm here to help you with any bugs, questions, or contributions. Let's dive in!

1. Button Location and Anchoring:
   The 'Apply' and 'Clear all' buttons should be anchored in the footer of the side panel, ensuring they are consistently accessible regardless of the tab content. This means they should stay anchored at the bottom of the page, not in line with the content. This approach provides a consistent user experience and ensures that the action buttons are always visible ^[1].

2. Apply Button Functionality:
   The 'Apply' button should function consistently across all tabs. This means that applying filters should affect the entire filter set, not just individual tabs. This ensures a unified filtering experience for the user ^[1].

3. Clear All or Reset Button Functionality:
   You can replace the 'Clear all' button with a 'Reset' button if that better suits your design needs. However, the functionality should remain consistent across all tabs, meaning that clearing or resetting filters should affect the entire filter set, not just individual tabs ^[1].

For accessibility considerations, ensure that users can easily identify and understand labels, are notified of state changes, and can complete all actions with the keyboard ^[2].

To continue talking to Dosu, mention @dosu.

[roxanagomez]

Hi @Porlin thanks for sharing.

1. Agreed with Dosu's response, the 'Apply' and 'Clear all' should be anchored in the footer of the Side modal.
2. and 3. How do the filters interact with each other? Are they meant to function as separate filtering criteria, or should they work together? Also, why are they split into two tabs? Would it be possible to combine them into one view, perhaps using headers to clarify the hierarchy?

[serifluous]

Also, for your question about "Clear" vs. "Reset", the Content team recommends using "Clear" for these use cases: https://paste.twilio.design/foundations/content/word-list

But definitely rely on Aren's guidance here if it feels like a unique case.

[Porlin]

@roxanagomez
3. How do the filters interact with each other? Are they meant to function as separate filtering criteria, or should they work together? The 'Apply' button interacts with each other and applies across the tabs. The 'Reset' we wondered if that could work separately for each tab due to customers having custom filters set. However, we will keep the functionality to remain consistent across all tabs.

Also, why are they split into two tabs? Would it be possible to combine them into one view, perhaps using headers to clarify the hierarchy? The Activities tab can have other customized filters as well that customers have built using UI programmability. Reset will help clear the selected filters. It is an existing functionality which we don’t want to break. Some customers already have built custom filters for Teams and Departments.

@serifluous Thank you! I have a sync with Aren this week to go over some topics.

Also a general question on the 'Apply' and 'Clear all/Reset' button for our use case - Do we need an ‘Apply’ btn overall? Can the checkboxes alone be enough to do the selection? and do we need a 'Clear all/Reset' button?

[roxanagomez]

Thank you for the context @Porlin

The 'Reset' we wondered if that could work separately for each tab due to customers having custom filters set. However, we will keep the functionality to remain consistent across all tabs.

Yes, I would definitely recommend to keep the global actions to have the same behavior across both tabs. If you were needing individual resetting options, you can add it to each one of the filters categories, this way your users can reset by category, without having to reset all the filters.

The Activities tab can have other customized filters as well that customers have built using UI programmability. Reset will help clear the selected filters.

Makes sense, we currently don't have a pattern for using Tabs inside a Filter Side Panel. We do have a pattern to Add custom filters to an interface, maybe in the future you could explore if this pattern could work for your use case.

A small note: you're using a deprecated component for tabs (maybe because of Flex constraints) but just wanted to point it out. You can find the most recent Tabs here.

Do we need an ‘Apply’ btn overall?

We have both options Batch filtering (requires 'Apply') and Dynamic filtering (doesn't require 'Apply'). However, this choice is something that highly depends on your data base constraints and use case.

Let me know if this helps!