Date Picker

[Fercas123]

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 67cffd0f1f779d00a36d0887293b903d601708e5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@salt-ds/lab	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
saltdesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 17, 2024 0:58am

[github-actions[bot]]

Storybook Preview Link https://395b1df9.saltdesignsystem-storybook.pages.dev

[origami-z]

Some feedback after using the date picker in storybook

1. when typing a valid date in input, should calendar be moved to that month?
2. when using mouse to open the calendar from the icon, should input continue to show in focus ring (compare to combobox)
3. when using keyboard, focus using keyboard, "Enter", focus ring is lost?
4. when using keyboard, focus using keyboard, is there any other way to open the calendar, apart from focus to next icon?
5. is there way to custom default date parsing (e.g. "01 Apr" resolves to this year instead of 2001)
6. when using mouse to open calendar, press "Esc", focus is lost (e.g. pressing number is not entering input)

API question: What's the plan of passing props to Calendar? e.g., disable days, customize year dropdown, change first day of week

[ivan-calderon]

@Fercas123 & @joshwooding I have a question. When using the mouse and clicking the calendar button, shouldn't the focus ring be visible on the field on active state. Something like the image below?

Moreover, left-right chevron buttons are not working for me.

[ivan-calderon]

@Fercas123 a few comments below:

• There is a difference in the date format. For instance, the placeholder format is "dd mmm yyyy". When typing/selecting a date it returns this format "mmm dd, yyyy".
• Keyboard navigation has still some challenges tbd. So far, keyboard navigation is not aligned to this focus sequence. Let me know, if we need a quick call to chat about it.

[origami-z]

• [Single select] Default closed state, tab to calendar icon, enter, focus move back to input (not to calendar?)
  • With above, tab x2, focus first land in day (no longer left month arrow?)
• [Single select] When some day is selected in the month, should tab move the focus to selected day (currently default to 1st day)?
• [Single select] default placeholder is "dd mmm yyyy", when i select some day from calendar, it's filled with different format "Apr 09, 2024" ?
• [Single select] when calendar is open, change input to a valid date, e.g. Apr 09, 2024 -> Apr 08, 2024, selected/active day in the calendar is not updated?
• design question, should today indicator/underline change color when it's in the previous month (out of range)?
• Out of range, should them be balanced? e.g. Feb 2015, have 1 week from prev month & 1 week from next month?
• [Range picker] focus ring only appear when focused on the start date input, not end date input?
• [Range picker] Similar to single one, when open calendar via keyboard, tab x2, focus lands on 2nd calendar's 1st day? instead of left arrow?
• [Range picker] mouse, open calendar, click right arrow of the 2nd calendar a couple of times (e.g., until May 2025), select 20 May 2025 left month is moved to the same month (expected i guess), right arrow of left calendar is disabled with "Future dates are out of range". Not sure why only left one is disabled ?
  • at this point, both calendar showing 20 May 2025 as selected date, which is the same in start date input, but i can't select any end date anymore
• [Range picker] keyboard, when use keyboard to select a day from the calendar, focus is return to the input after selecting the first date, i'd assume the focus need to stay in calendar, so the end date can be selected using keyboard as well

[Fercas123]

@origami-z I'll tackle range in an upcoming PR, for the single select:

[fixed] Default closed state, tab to calendar icon, enter, focus move back to input (not to calendar?) [fixed] default placeholder is "dd mmm yyyy", when i select some day from calendar, it's filled with different format "Apr 09, 2024" ? [expected behaviour, change registered on blur/enter] when calendar is open, change input to a valid date, e.g. Apr 09, 2024 -> Apr 08, 2024, selected/active day in the calendar is not updated? [expected behaviour, bug below] With above, tab x2, focus first land in day (no longer left month arrow?) [#3340] When some day is selected in the month, should tab move the focus to selected day (currently default to 1st day)? [#3341] design question, should today indicator/underline change color when it's in the previous month (out of range)? [TBC] Out of range, should them be balanced? e.g. Feb 2015, have 1 week from prev month & 1 week from next month? [fixed] Blur/Enter should not delete the input when the date is incorrect

[joshwooding]

Accessibility Notes:

• We need an aria-label on the calendar popover (FF labelled by).
• We should change the aria-label on the calendar day to be a formatted date e.g. 12 May 2024 vs 12/05/2024.
• We should change the aria-label on the calendar to be the current month + year.
• We should change the next + previous button labels to be simplified to Next and Previous Month.
• We need to add event preventDefault to prevent scrolling when navigating in the calendar.

[origami-z]

Any QA stories needed?