WIP Pajamas component: Date range picker
Component overview
Problem
1. Technical considerations
- Often, because of large amounts of data, date ranges need to be limited for some features due to technical constraints.
- We currently only have a simple date picker component which has led to a number of potentially confusing workarounds example issue.
- This pattern and potential confusion will occur regularly in upcoming Manage:Analytics features.
2. User considerations
The core user need for this component is filtering a data set between two points in time...
Situation | Motivation | Outcomes |
---|---|---|
When I am exploring a large data set | I want to filter the data between a start and end date (and potentially times) | so that I can focus on a narrower subset of data |
Solution
Having a more sophisticated date-range picker component will help to...
- Reduce unintentional user error when data range limits need to be applied
- Reduce UI complexity by reducing the components used for this (very common) interaction
- Make selecting date ranges a more elegant experience
Design considerations:
- Understanding and communicating to users when these data ranges (and limits) are applied automatically vs manually.
- Is this different for tables, lists, cards, etc.?
- Do we need to consider mostly pre-defined date ranges, or should we have some level of customisation for users?
- When to use errors, disabled states & tooltips for dates and times
- Potential for some sexy animations
Example(s)
Date & time range with presets | Scrolling variation | Google flights |
---|---|---|
Component details
Usage
Dos and dont's
|
|
---|---|
Related patterns
Links / references
Checklist
Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the Sketch UI Kit documentation which has information on updating files, structure, fonts, and symbols.
-
Author: Create a Sketch file in your progress folder with the changes required for this issue. Try to use existing symbols, layer styles, and text styles. -
Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person. -
Reviewer: Review and approve author's changes in their personal Sketch file, according to the workflow. -
Author: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process. -
Author: Ask the reviewer to review your changes to the Sketch UI Kit files. -
Reviewer: Review and approve author's changes to the Sketch UI Kit files, according to the workflow. -
Author: Create an issue in the Design System to update the design specs and documentation. Mark it as related to this issue. -
Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of these changes, linking to this issue.