[pickers] "Next-gen" range pickers

[LukasTy]

This is an issue to house all discussions related to the evolution of Date Range Picker.

We want to improve on the foundation of existing Date Range Picker by extending it's functionality and adding additional variations (time range picking).

The main issues that will continue the development of range pickers are:

• [pickers] New component: DateTimeRangePicker #4547
• [pickers] New component: TimeRangePicker #4460
• [pickers] Allow to pick a range of Months with Date Range picker #4995

While working on those, we should not forget the other points that need attention and might affect the decisions made on the above issues:

• [pickers] Replace clock on desktop from TimePicker #4483 <- this one might be especially important if we want to provide desktop picker experience in Time Range Picker
• [pickers] New DateTimePicker desktop behavior #8819
• [DateRangePicker] Support month and year edition on the range pickers #4546
• [DateTimePickers] Remove the calendar/clock tabs #7121 <- this one is relevant depending on the layout we go for in date time picker

The questions we need to find answers to before we can proceed with the main #4460 and #4547 issues:

• UX of how date time range pickers would behave (date & time sections selecting order)
  We decided to use Start date -> Start time -> End date -> End time views/sections selection flow.
• Design for time range picker (at least mobile if we would be fine releasing only keyboard experience on desktop initially)

Benchmarks

• https://ant.design/components/date-picker
• https://ant.design/components/time-picker#components-time-picker-demo-12hours
• https://react-spectrum.adobe.com/react-spectrum/DateRangePicker.html#time-zones
• https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/ for desktop time picker design
• https://reactdatepicker.com/#example-range-month-picker month range picker
• https://demo.mobiscroll.com/jquery/range/date-range alternative inspiration
• https://atlassian.design/components/datetime-picker/time-picker/examples alternative desktop time picker variant (select with pre-defined times)
• https://flatpickr.js.org/examples/#datetime
• https://retool.com/components/date-time
• https://vercel.com/design/calendar

Design

• Figma Process
• Latest Prototype

The planned delivery order

• [pickers] Replace clock on desktop from TimePicker #4483
• [pickers] New DateTimePicker desktop behavior #8819
• [pickers] New component: DateTimeRangePicker #4547
• [pickers] New component: TimeRangePicker #4460
• [pickers] Allow to pick a range of Months with Date Range picker #4995

[gerdadesign]

@LukasTy @joserodolfofreitas I added the Figma process links and Figma prototype link to the top description. The prototype has an intro with what you can expect and how to use it, 3 options, and an ending slide with additional considerations as well as how to leave feedback. Especially since this is the first time trying it this way, let me know if anything is unclear!

[LukasTy]

Thank you for the investigation @gerdadesign
I've left comments to express my opinion and some clarifications.
Maybe @flaviendelangle @alexfauquette or someone else would have anything to add to it?

[gerdadesign]

Thanks for the comments! Based on the conversations the team had with @joserodolfofreitas and our own discussions, I have created a new, detailed prototype for the TimePicker. This is updated in the above description as the Latest Prototype.

• it addresses the feedback received in this first round
• I also added a couple more notes about some additional features, but we can always investigate these more later.
• If you'd like to give more feedback within Figma, please go directly to this frame.