react-magma icon indicating copy to clipboard operation
react-magma copied to clipboard

Date Picker: Updates to Calendar

Open orion-cengage opened this issue 1 year ago • 1 comments

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"

image

  • Both arrows for navigating months move to the right side.
  • Update aria-labels to "Navigate forward one month" and "Navigate back one month"

image

  • You can now see dates from the previous month at the beginning of the calendar, and dates from the next month at the end.

image

  • Change focus style

image

  • Change selected date style

image

  • Change Today's date style

image

orion-cengage avatar Mar 08 '24 16:03 orion-cengage

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.

silvalaura avatar Mar 28 '24 15:03 silvalaura