Filter group question

[darcimm]

Hi Paste team,
We are using the filter group pattern to filter a list of users who move through an Engage Journey email, sms or whatsapp step to help marketers understand whether the message was actually sent, and if not, why:

Due to technical limitations, we want to download a CSV based ONLY on the date picker, not the Status filter or Search. Do you have a recommendation for how to approach this? How flexible is the filter group pattern?

We thought of a couple options:

1. Use the tooltip on the Export button pattern to explain what exactly will be downloaded
2. Rearrange the filters so that the date picker and download button are above the horizontal rule, and the search and filter are below... with a hierarchy that indicates the download is only at the date picker level.

TIA for your response!
Darci

[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.

---

Hello Darci,

The filter group pattern is designed to be flexible and should be adapted to fit the unique requirements of your product or use case. It's important to be judicious in which filters you make available to represent the most common methods users would be using to reduce the entire data set. Filters included in the filter group should almost always represent data being displayed in the page data set.

Given your technical limitations and the need to download a CSV based only on the date picker, here are some recommendations:

1. Use a Tooltip on the Export Button: This is a good approach. You can use a Tooltip to communicate any limitations to the data that can be exported. This aligns with the guidance provided in the Data export pattern, which suggests using a Tooltip to inform the customer of any limitations.

   Here's an example of how you might implement the Tooltip with the Export Button:

   import {Button} from '@twilio-paste/core/button';
   import {Tooltip} from '@twilio-paste/core/tooltip';
   import {ExportIcon} from '@twilio-paste/icons/esm/ExportIcon';
   
   <Tooltip text="Exports data based on the selected date range only. Status filter and search are not applied.">
     <Button variant="primary" onClick={handleExport}>
       <ExportIcon decorative={false} title="Export" />
       Export CSV
     </Button>
   </Tooltip>

   For more information on how to use the Tooltip component, you can visit the documentation: https://paste.twilio.design/components/tooltip

2. Rearrange the Filters: This is another viable option. By visually grouping the date picker with the download button and separating them from the other filters, you can create a clear hierarchy that indicates the download functionality is associated only with the date picker. This can help set the right expectations for the user.

   Here's an example of how you might structure the components:

   import {Stack} from '@twilio-paste/core/stack';
   import {Separator} from '@twilio-paste/core/separator';
   // ... other imports
   
   <Stack orientation="vertical" spacing="space60">
     <Stack orientation="horizontal" spacing="space40">
       {/* Date Picker and Export Button */}
     </Stack>
     <Separator orientation="horizontal" verticalSpacing="space50" />
     <Stack orientation="horizontal" spacing="space40">
       {/* Status Filter and Search */}
     </Stack>
   </Stack>

   For more information on how to use the Stack and Separator components, you can visit the documentation: https://paste.twilio.design/layout/stack and https://paste.twilio.design/utilities/separator

Remember that the filter group pattern relies on the accessibility features built into the components included in the group, so ensure that users can easily identify and understand labels for each control and are notified of state changes.

For more information about the filter group pattern, you can visit the documentation: https://paste.twilio.design/patterns/filter-group

If you have further questions or need more assistance, feel free to reach out to the Paste design system team during the weekly Design System Office Hours or post in the Github Discussions.

Best regards,
PasteBot

I also did a search, 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:

• More guidance on bulk selecting in Tables / Data Grid, and how that interacts with filters and pagination. - Answer (updated: 10/27/2022, similarity score: 88%)
• Filter design pattern - Answer (updated: 10/31/2022, similarity score: 87%)
• Table filters, etc. - Answer (updated: 08/02/2023, similarity score: 87%)

[dosubot[bot]]

🤖

Given your technical limitations and the need to download a CSV based only on the date picker, here are some recommendations:

1. Use a Tooltip on the Export Button: This is a good approach. You can use a Tooltip to communicate any limitations to the data that can be exported. This aligns with the guidance provided in the Data export pattern, which suggests using a Tooltip to inform the customer of any limitations.

   Here's an example of how you might implement the Tooltip with the Export Button:

   import {Button} from '@twilio-paste/core/button';
   import {Tooltip} from '@twilio-paste/core/tooltip';
   import {ExportIcon} from '@twilio-paste/icons/esm/ExportIcon';
   
   <Tooltip text="Exports data based on the selected date range only. Status filter and search are not applied.">
     <Button variant="primary" onClick={handleExport}>
       <ExportIcon decorative={false} title="Export" />
       Export CSV
     </Button>
   </Tooltip>

   For more information on how to use the Tooltip component, you can visit the documentation: https://paste.twilio.design/components/tooltip

2. Rearrange the Filters: This is another viable option. By visually grouping the date picker with the download button and separating them from the other filters, you can create a clear hierarchy that indicates the download functionality is associated only with the date picker. This can help set the right expectations for the user.

   Here's an example of how you might structure the components:

   import {Stack} from '@twilio-paste/core/stack';
   import {Separator} from '@twilio-paste/core/separator';
   // ... other imports
   
   <Stack orientation="vertical" spacing="space60">
     <Stack orientation="horizontal" spacing="space40">
       {/* Date Picker and Export Button */}
     </Stack>
     <Separator orientation="horizontal" verticalSpacing="space50" />
     <Stack orientation="horizontal" spacing="space40">
       {/* Status Filter and Search */}
     </Stack>
   </Stack>

   For more information on how to use the Stack and Separator components, you can visit the documentation: https://paste.twilio.design/layout/stack and https://paste.twilio.design/utilities/separator

Remember that the filter group pattern relies on the accessibility features built into the components included in the group, so ensure that users can easily identify and understand labels for each control and are notified of state changes.

For more information about the filter group pattern, you can visit the documentation: https://paste.twilio.design/patterns/filter-group

If you have further questions or need more assistance, feel free to reach out to the Paste design system team during the weekly Design System Office Hours or post in the Github Discussions.

Best regards,
Dosu

Sources

• packages/paste-website/src/component-examples/filter-group/components/CustomDateFilterGroup.tsx
• packages/paste-website/stories/FilterGroup.stories.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[serifluous]

Hey @darcimm !

1. The bots are correct here—Paste guidance is to communicate any limitations on the tooltip, so option 1 definitely works. Another suggestion is to include text in the CSV export itself (something like "Filtered by Oct 23 - Nov 23, 2023 recipients"), so the limitation messaging is reinforced even more.
2. Rearranging the filters could work—but it makes the whole layout less scalable, especially if you need to add more Table actions or form fields in the future.

Overall though, our current pattern is kind of wonky and hasn't been touched in a few years. We have a roadmap item to iterate on it "Complex filters pattern" this year. Work with the current one as best you can right now, and if you get some customer signal that either of your options is better, definitely let us know.