-
Notifications
You must be signed in to change notification settings - Fork 6
Description
Provide a general summary of the issue here
Link to research
https://www.figma.com/design/PGb66fVN325tu0IngRka66/SL-Component-Research?node-id=1925-37932&t=wfJPuQUCukAdnJVX-0
Design
Singe Date Component: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7135-30617&t=xUxXVhXswVRdqEix-4
Range Component: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7361-120220&t=xUxXVhXswVRdqEix-11
Layout Diagrams: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7180-42628&t=xUxXVhXswVRdqEix-11
Button Day Diagram: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7147-234131&t=xUxXVhXswVRdqEix-11
Default view & modes
- Opens to today in month view (one month displayed)
- Supports day ⇄ month ⇄ year views (header click cycles)
Navigation
- Arrow keys move focus between days;
-
Esc closes the dropdown. - Using < / > keys on the edges of the month moves to the next/previous month.
Selection & limits
-
Selecting a day writes the value and closes the picker - Honour min/max props to disable out-of-range dates
- Highlight styles for today, selected(s), and range start / end
- Optional week-number column
- It is possible to select a date from the previous/next month in the month view. The calendar will remain in the current month, even when clicking on a date outside it.
Quick actions & extras
-
Optional footer with “Today”, “Clear”, etc. (visible if slot provided)
Jeroen's points
- Add ability to use arrow keys to navigate to other months/years in
<sl-select-month>
and<sl-select-year>
, similar to what is in<sl-select-day>
- Announce (where necessary) when the day, month, or year changes indirectly
- Implement workaround for lack of
scrollsnapchange
andscrollsnapchanging
events in Safari & FF - Calendar doesn't respond when you click the previous month/next month buttons quickly
- Investigate sizing: how responsive is the calendar component? Does it work when it should fill more space than it needs?
-
Add ability to show/hide weekends??? - Add ability to disable certain dates
- Write unit tests
👤 Your name
Jeroen
🧢 Your Product/Team
SLDS
Metadata
Metadata
Labels
Type
Projects
Status
⚒️ In progress