Report - Filter Data by Date range -- Canned date range vs. Custom date range selection

[ishah-twilio]

Hello Team,

I like guidance on Date Range filter option to filter data by date range.

Requirements: Have a canned date range (Today, yesterday, this week, last week, this year, etc...) as well allow users to filter data by selected custom date range.

Working with Crit, team and few internal feedback this is the interaction design that we like team's feedback on.

[andioneto]

Hey @ishah-twilio 👋

Could you please clarify what the ask is here? Thank you!

[ishah-twilio]

Mainly,

• Is there a pattern for custom date range selection? If not, is there a guidance from DSys team?
• We have design proposal does DSys have any feedback on the proposal? We have used existing paste components for proposed design but was wondering if team have any improvements that they like to recommend?
• Are we meeting accessibility guidelines for proposed solution?
• Any other feedback.

[azhengtwilio]

Hey @andipants12,
Would DS be able to provide an answer to this question?
We're spiking our engineering work for the frontend which need this custom date range selection.

Thank you!

[kate-porter]

Hey @ishah-twilio @azhengtwilio - thanks for sharing this with us, and apologies for the delayed reply.

To answer your questions:

• Is there a pattern for custom date range selection? If not, is there a guidance from DSys team?
  There is no pattern for custom date range selection yet (though we always welcome contributions 😉), so no formal recommendation or guidance from us other than just connecting with fellow PDs to see if anyone has worked on a similar interaction.
• We have design proposal does DSys have any feedback on the proposal? We have used existing paste components for proposed design but was wondering if team have any improvements that they like to recommend?
  Looks good overall! Component usage is great, though you might try putting the calendar button into a suffix on the field rather than having it as a standalone button, so that the "date range" label is connected to the action to choose a custom range.
• Are we meeting accessibility guidelines for proposed solution?
  The proposal is totally accessible. Good component usage and overall accessible approach. The main recommendation we have would be to use the second option you've proposed for showing the selected custom date range (where you put the date range into the combobox itself), since that is the true value of that input.
• Any other feedback.
  Nothing major, but as always, it'd be great to get this interaction in front of users if you haven't already! My only concern would be that users might not quite understand that clicking the calendar button will give them access to a custom date range, so getting user feedback there would be ideal.

[ishah-twilio]

@katieporter / @azhengtwilio

Thank you for following up on this.

I looked at Filter pattern contribution Sarah shared). And I saw one of the option presented to use the popover for customer date range selection using datepicker.

I created sandbox sample with existing components, using popover and combining "custom" date range selection as a menu option with other canned reports.

https://codesandbox.io/s/date-range-hct20?file=/src/index.tsx

Can we do this instead of option that we presented earlier? Any thoughts? Concerns?

I will track the user feedback metrics.

[kate-porter]

Hey @ishah-twilio! Just wanted to circle back here after your office hours session last week. As discussed then, putting the calendar into either a standalone button or in the suffix on the Combobox works from the perspective of general component usage and accessibility, so whichever one works better for you is great.

Let us know if you have any additional questions or concerns on this one. And nice work putting together a custom date range picker giving the current constraints with the Date Picker component! This is looking really good.

[ishah-twilio]

@katieporter

I attended the DSys office hours. And I thought there was a concerns some unsolved interaction with proposed option 2.

What should be interaction when custom date range is selected? Should we show custom as the menu item? If yes, what should be the interaction?

[kate-porter]

Hey @ishah-twilio, sorry, I didn't realize there were still open questions following office hours! After chatting with the team a bit, I put together a very quick mock to outline a proposal.

Basically, there is a "custom" option in the Combobox from the start, and clicking it would open the Popover on the calendar button. Clicking the calendar button would of course also open the Popover. Applying a custom date in the Popover would close it and add the custom date range to the Combobox. Let me know if that suggestion makes sense. Also very open to your suggestions since you are much closer to the product and your specific needs!

[ishah-twilio]

@katieporter

Thank you for your reply. Any guidance on error usecase? If user selects Custom but does not pick the date range in the popover / close the popover -- where do we show the error?

[kelseycavitt]

@ishah-twilio Thanks for chatting IRL about this to give more context! Per our discussion, we're suggesting that you can include a default start and end date to forgo needing to show an error state. We also discussed not changing the data below until the submit button "apply" has been selected. Thanks for the collaboration on this!