Pull Request

📖 Description

This adds a date-picker component.

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

• [x] I have included a change request file using $ yarn change
• [x] I have added tests for my changes.
• [x] I have tested my changes.
• [ ] I have updated the project documentation to reflect my changes.
• [ ] I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• [x] I have added a new component
• [ ] I have modified an existing component
• [ ] I have updated the definition file
• [ ] I have updated the configuration file

⏭ Next Steps

Just wanted to check in for a status update on this since we're getting a lot of requests for it in the last few weeks especially.

Just wanted to check in for a status update on this since we're getting a lot of requests for it in the last few weeks especially.

I'm working on Brian's comments today. I've addressed most of them. Currently I'm working on adding support for start and end slots which will be pushed into the text-field component.

Should the flyout close when focus moves out of it? If I tab out it remains open. Also, focus gets lost when I invoke some of the controls via keyboard, like changing the year display (ie. the up/down arrows.)

Should the flyout close when focus moves out of it? If I tab out it remains open. Also, focus gets lost when I invoke some of the controls via keyboard, like changing the year display (ie. the up/down arrows.)

I've set it up so that it will close the menu when tabbing past the last item in the flyout.

I had to rework the template as using the picker change controls, was causing the template engine to redraw them which they would no longer have focus. I broke the template up into it's 3 primary components so that the changing title and grid items wouldn't re-render the change controls.

With the latest when I tab into the flyout I can only use the arrows to change the months, and can't tab to the next thing.

Keyboarding seems to work as expected now. But I don't think we have enough narrator support in the flyouts, for example the buttons to switch months don't identify what they do and it's not clear to me how a developer would insert the needed aria attributes there. I encountered similar issues with the rich text editor flyout I prototyped and came up with a rough "pass a config object" solution but that just my first thought. I think we need to come up with a standard approach for passing loc/accessibility strings into these more complex components (vs. the simple ones where how to add an aria label is clear).

As this PR hasn't gone in yet, I wanted to take the opportunity to see if the current state of it would support our use-case. We are building our component suite on top of fast-foundation, trying to get lift from the templates as much as possible (we've done very little template definition so far), and we would hope the DateTimePicker would be no different. However, it's understood that the DateTimePicker is a more complex component, and by its nature allowing for a much wider set of possible "styling" (I'm including the actual DOM composure as a possible meaning to "styling" here).

Our design of the DateTimePicker looks like the following:

Do you imagine we will be able to leverage the DateTimePicker that is in this PR to achieve this look? Ideally, we could do everything we want simply by changing the literal styling of the component, and not bothering with the template at all (thus allowing us to get all the necessary accessibility lift you guys provide). Any advice/direction would be appreciated!

This PR should probably be split into parts to be merged into the master and archives/fast-components branches.

Is this PR dead or waiting for further input. It's not clear?

@monobyte It's not dead but we do need community help to complete it.

@monobyte It's not dead but we do need community help to complete it.

In what parts? Is there a specification this follows or discussed besides this PR?

@chrisdholt Are you able to provide some more information here so that interested community members can help get this over the finish line?

Hello, we are creating a design system with Fast and we are in need of a datepicker component. I was checking on the history and I can't find what exactly remains to change or complete. Can someone give more details about what is next for this component? I am open to contribute back if possible.