hpe-design-system
hpe-design-system copied to clipboard
grommet
DateInput - explore adding guardrail for range
Brought up by Greg during office hours 11/16
The user experience of the current DateInput is confusing for users when selecting a range of dates. It isn't always clear when clicking is going to select the date vs when it is going to clear an already selected date. https://design-system.hpe.design/components/dateinput?q=date#date-range
Should we add a guardrail so that after the first date is selected the only available dates to select are ones that are after the first date? Currently any date is available to be selected even after the first date is selected.
Another potential pattern to explore is having two inputs, one for the first date and another for the second date.
Ruth shared an example of a date selection experience: https://www.aerlingus.com/html/en-IE/home.html
Devs chatted on this during Grommet Checkpoint 1/11. Notes/thoughts from that meeting:
- How can we improve the experience and make it more clear to the user what they are selecting (start date vs end date) in a backwards compatible way?
- We could consider a theme property that controls the styling of the 'active' date. A similar 'active' styling pattern can be seen in google flight's date picker. Notice the 'blue' vs 'white' circle
-
We could consider adding an optional prop that would disable days that are previous to the selected start date. This pattern can be observed in the googlee flight date picker. Notice when I only have a start date selected (February 14th) dates before that are disabled.
-
We should determine what the possible scenarios are for interactions, and what our expectations would be in those scenarios "test driven design".