feat: Calendar and DateTimePicker components
Description
Calendar and DateTimePicker components with functionality for the initial release. More about each component can be seen in their documentation and storybook.
[!IMPORTANT]
Since this is a fairly large PR, I strongly encourage checking out the internal RFC as well as the previous PR merged into the feature branch (see PR commits) before raising any concerns in the comments here, as not to bloat the PR. Thank you! 🙏
Related issue(s)
- https://github.com/adobe/spectrum-web-components/issues/2559
- https://github.com/adobe/spectrum-web-components/issues/2560
Motivation and context
How has this been tested?
- Functionality is covered by unit tests
- Layout can be compared with Spectrum CSS(Calendar and DateTimePicker). Multiple PRs along the way allowed VRTs to check the progress/changes
Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
- [ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)
Checklist
- [x] I have signed the Adobe Open Source CLA.
- [x] My code follows the code style of this project.
- [x] If my change required a change to the documentation, I have updated the documentation in this pull request.
- [x] I have read the CONTRIBUTING document.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.
- [x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.
⚠️ No Changeset found
Latest commit: 378d49fdb06cd670cbefb5e74d081c2487dc006e
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
Branch preview
Review the following VRT differences
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- Spectrum | Light | Medium | LTR
- Spectrum | Dark | Large | RTL
- Express | Light | Medium | LTR
- Express | Dark | Large | RTL
- Spectrum-two | Light | Medium | LTR
- Spectrum-two | Dark | Large | RTL
- High Contrast Mode | Medium | LTR
If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
Pull Request Test Coverage Report for Build 12693741474
Warning: This coverage report may be inaccurate.
This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.
- For more information on this, see Tracking coverage changes with pull request builds.
- To avoid this issue with future PRs, see these Recommended CI Configurations.
- For a quick fix, rebase this PR at GitHub. Your next report should be accurate.
Details
- 2878 of 2891 (99.55%) changed or added relevant lines in 26 files are covered.
- No unchanged relevant lines lost coverage.
- Overall coverage increased (+0.05%) to 98.259%
| Changes Missing Coverage | Covered Lines | Changed/Added Lines | % |
|---|---|---|---|
| packages/date-time-picker/src/segments/SegmentsFactory.ts | 147 | 148 | 99.32% |
| packages/date-time-picker/src/segments/time/DayPeriodSegment.ts | 83 | 84 | 98.81% |
| packages/calendar/src/Calendar.ts | 753 | 756 | 99.6% |
| packages/date-time-picker/src/segments/modifiers/SegmentsModifier.ts | 64 | 72 | 88.89% |
| <!-- | Total: | 2878 | 2891 |
| Totals | |
|---|---|
| Change from base Build 12278981558: | 0.05% |
| Covered Lines: | 35918 |
| Relevant Lines: | 36355 |
💛 - Coveralls
Lighthouse scores
| Category | Latest (report) | Main (report) | Branch (report) |
|---|---|---|---|
| Performance | 0.99 | 0.99 | 0.99 |
| Accessibility | 1 | 1 | 1 |
| Best Practices | 1 | 1 | 1 |
| SEO | 1 | 0.92 | 0.92 |
| PWA | 1 | 1 | 1 |
What is this?
Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.
Transfer Size
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 250.676 kB | 236.38 kB 🏆 | 236.906 kB |
| Scripts | 60.388 kB | 53.974 kB 🏆 | 54.286 kB |
| Stylesheet | 54.095 kB | 47.97 kB 🏆 | 48.074 kB |
| Document | 6.245 kB | 5.47 kB 🏆 | 5.581 kB |
| Font | 126.991 kB | 126.615 kB | 126.614 kB 🏆 |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 52 | 52 | 52 |
| Scripts | 41 | 41 | 41 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Font | 2 | 2 | 2 |
Hi @mizgaionutalexandru is this design approved with a separate clear button?
Hi @mizgaionutalexandru is this design approved with a separate clear button?
Hi, @Rajdeepc! No, I just wanted to showcase a use-case extension that consumers can apply.
Tachometer results
Currently, no packages are changed by this PR...