react-magma
react-magma copied to clipboard
Date Picker: Updates to Calendar
Purpose: Due to future updates for things like Date Range, we need to make some updates to the Calendar dropdown and the elements within.
IMPORTANT: Once dev work is complete, we need Perkins to test before releasing.
Prerequisites: #1120
For specific styles and measurements, see Figma: https://www.figma.com/file/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?type=design&node-id=1615%3A15367&mode=design&t=KvgDFSw6V1gnGdyr-1
Summary of changes:
- Addition of new "Today" link to the top of the dropdown. This link takes you back or forward to the current month and year.
- aria-label="Navigate to current month and year"
- Both arrows for navigating months move to the right side.
- Update aria-labels to "Navigate forward one month" and "Navigate back one month"
- You can now see dates from the previous month at the beginning of the calendar, and dates from the next month at the end.
- Change focus style
- Change selected date style
- Change Today's date style
When we do this, we need to update our DatePicker examples in the docs and unit tests. We use string for dates when they should be of type Date which makes it hard for our adopters to have off the shelf examples.