Updated calender-beta with better internal date management #960
Conversation
|
Demo will be published at https://apps.inindca.com/common-ui-docs/genesys-webcomponents/feature/calendar-refactor |
Fix day click targets, focus behavior, and font styles
This updates calendar-beta and related components to use a polyfill for the proposed JS Temporal API, which allows us to use a representation of calendar dates that removes many of the corner cases that arise with the existing `Date` type.
small changes to pass tests
daragh-king-genesys
force-pushed
the
feature/calendar-refactor
branch
from
6ec8ad4 to
cddfbdb
Compare
packages/genesys-spark-components/src/components/beta/gux-day/gux-day.tsx
Outdated
Show resolved
Hide resolved
packages/genesys-spark-components/src/components/beta/gux-day/gux-day.tsx
Show resolved
Hide resolved
| /** | ||
| * The gux-day component is how we render a day within an calendar. It should | ||
| * not be used stand-alone. | ||
| */ |
There was a problem hiding this comment.
Typically we have nested child components in a components folder in the parent component.
packages/genesys-spark-components/src/components/beta/gux-calendar-beta/gux-calendar.tsx
Show resolved
Hide resolved
| // Set max value from the "max" input prop | ||
| if (this.slottedInput.max) { | ||
| this.maxValue = Temporal.PlainDate.from(this.slottedInput.max); | ||
| } |
There was a problem hiding this comment.
This might need to use a MutationObserver like disabled and required do on form fields.
There was a problem hiding this comment.
This is done - I took a bit of a different approach from the form fields that I think will be slightly more efficient. Let me know what you think.
packages/genesys-spark-components/src/components/beta/gux-calendar-beta/gux-calendar.tsx
Outdated
Show resolved
Hide resolved
| break; | ||
| case 'ArrowRight': | ||
| event.preventDefault(); | ||
| this.shiftFocusDate({ days: 1 }); |
There was a problem hiding this comment.
Maybe this should be linked to the step attribute on the input field.
There was a problem hiding this comment.
How would that interact with the up and down arrows?
Edit: It looks like the native inputs disable anything that's not aligned with the step. That would require a pretty decent re-work of the date logic. I'm inclined to add a separate story to add step support rather than holding up this PR.
MattCheely
force-pushed
the
feature/calendar-refactor
branch
from
549147b to
7132c71
Compare
MattCheely
force-pushed
the
feature/calendar-refactor
branch
from
62a3133 to
437f8d9
Compare
|
This is minor but if I click on the last date of the previous month, the calendar will show the previous month with the last date selected but the focus ring is on the last date of the month before. This is not present in current version. Screen.Recording.2025-03-06.at.12.19.43.movSame thing happens if I go forward |
Tabbing into the day area:Also small thing and may be intentional. When tabbing in to the days, the first in the tab order is 6th on an empty date selection and always the number of the selected date when there's a selection. On the previous version, it was the first of the month. Screen.Recording.2025-03-06.at.12.29.50.movMin Max Date:Clicking on the dates outside the min and max shows a focus ring. Screen.Recording.2025-03-06.at.12.57.43.mov |
|
@321gillian The rogue focus rings should be gone now. The focused day behavior when tabbing is the result of two implementation details:
|
|
All focus ring stuff seems good to me now |
This improves the calendar-beta component by migrating to a polyfill for the
Temporalapi.Temporal.PlainDateis much more suitable for working with calendar data thanDate, removing quite a few corner cases.This also includes API changes and other minor improvements.
It currently contains all of the original commits for the attempt at customizable dates, which I will rebase out after PR review.