[Date Picker] Date Range with Menu and Extension Point

[drakonux]

Due to LEXI-1127 we've split the request into two tickets:

1. The Date Range selection requested on #3986
2. And this one (from LEXI-1149)

What is your proposal?

• Create a side extension point
• Create a date picker variant with a menu within

Why would adopting this proposal be beneficial?

The extension point will allow scaling future variants (e.g. two-months-view calendar) The new variant allows quick range selections defined by the product team's needs.

What are the alternatives to this proposal?

The alternative to this proposal would be to split the interaction into two steps. Show a dropdown menu first and then if the option selected is Custom Range then the calendar is shown. This alternative is as AC currently does.

[pat270]

How does the extension point break down in mobile? Does it just scroll horizontally like it does now?

[drakonux]

Sincerely we didn't think about these new options for mobile.

It should work in the same way as it's currently doing but seeing the picture. The experience can be improved by far. Maybe we could design something Adhoc for mobile or define a different behavior. However, I'm afraid there is no requirement to support investing time on this.

What's your recommendation?

[pat270]

I'm not sure. My first thought is stack it below the calendar and throw it into a select. The other idea is to toss it into a select element that looks like an icon button next to the forward and back buttons.

[drakonux]

I like the second one. I think we could work on it. This is prior 1 for us, @hold-shift could you create a request ticket just for the mobile version of the date picker: date range and the variant with a menu? Add the ticket here to track the definition.

Sorry for the inconveniences @pat270 I always forget the mobile version.

[ghost]

hey @pat270. We have reopened the LEXI tickets to study which would be the best solution considering mobile as well, in case there is any possibility of not having 2 different solutions for the 2 breakpoints.

We will comment on this ticket again when we have advanced on the solution. Until then we will leave it on hold. Thanks!

[ghost]

Ok, we have studied two possibilities to solve the mobile break. Horizontal scrolling is not a possibility because it makes it difficult to interact with the component.

To give configuration options to the teams, we think it is necessary to enable the extension point at the top of the component. Thus, users do not have to go through the calendar to choose one of the predefined options, which are created to be the first option and directly affect the range selection of the component.

This image describes some of the configuration possibilities.

If it is ok on your part, we will add this last variant to the component guidelines.

[matuzalemsteles]

Hey @hold-shift it looks a lot better, something that popped into my mind now, when I see it, I feel like it's a tab but probably not, I think. When the user clicks "Last 7 days" what will happen? I guess, add the last 7 days with a range in input, keep the Date Picker open with selected the range, right?

[ghost]

Right, the idea here is to provide a solution being conservative by using a similar approach to the extension point at the bottom, so the teams have tools and can get to assemble a use case like this.

Regarding the "7 days" button, the button triggers the component making a preselection, the default behavior after preselection is made is for the panel to stay open, as you mentioned. We are still working on this, but we will reflect this behavior in the component document.

In any case, as discussed in #3990, we should also cover the possibility of closing the panel when the user makes a preselection. The final decision rests on the product team's shoulders depending on the best fit for the use case.