spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
feat(date-time-picker): add date/time input + picker
trafficstars
Description
Adding the third component that will be part of the date/time selector: the date/time field itself. The time field, which had been created in this PR, will no longer be used, inside the popover we will only have the calendar, at least for now.
Related issue(s)
- https://github.com/adobe/spectrum-web-components/issues/2559
Motivation and context
Allow the user to set the date and time to publish a post on social media.
How has this been tested?
- [ ] Test case 1
- Go here
- Do this
- [ ] Test case 2
- Go here
- Do this
Screenshots (if appropriate)
Types of changes
- [x] 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.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.
- [ ] 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.
Branch preview
Visual regression test results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- High Contrast Mode | Medium | LTR
- Classic | Lightest | Medium | LTR
- Classic | Lightest | Medium | RTL
- Classic | Lightest | Large | LTR
- Classic | Lightest | Large | RTL
- Classic | Light | Medium | LTR
- Classic | Light | Medium | RTL
- Classic | Light | Large | LTR
- Classic | Light | Large | RTL
- Classic | Dark | Medium | LTR
- Classic | Dark | Medium | RTL
- Classic | Dark | Large | LTR
- Classic | Dark | Large | RTL
- Classic | Darkest | Medium | LTR
- Classic | Darkest | Medium | RTL
- Classic | Darkest | Large | LTR
- Classic | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Tachometer results
Chrome
accordion permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 417 kB | 72.86ms - 74.53ms | - | faster ✔ 6% - 10% 5.04ms - 7.78ms |
| branch | 404 kB | 79.02ms - 81.19ms | slower ❌ 7% - 11% 5.04ms - 7.78ms |
- |
action-bar permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 48.77ms - 50.85ms | - | faster ✔ 2% - 7% 1.05ms - 3.80ms |
| branch | 473 kB | 51.33ms - 53.13ms | slower ❌ 2% - 8% 1.05ms - 3.80ms |
- |
action-button permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 515 kB | 65.84ms - 67.49ms | - | faster ✔ 2% - 6% 1.59ms - 3.93ms |
| branch | 502 kB | 68.59ms - 70.25ms | slower ❌ 2% - 6% 1.59ms - 3.93ms |
- |
action-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 537 kB | 44.63ms - 45.75ms | - | faster ✔ 5% - 8% 2.39ms - 4.13ms |
| branch | 524 kB | 47.78ms - 49.12ms | slower ❌ 5% - 9% 2.39ms - 4.13ms |
- |
action-menu permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 647 kB | 128.05ms - 131.82ms | - | faster ✔ 7% - 10% 10.00ms - 14.97ms |
| branch | 638 kB | 140.80ms - 144.04ms | slower ❌ 8% - 12% 10.00ms - 14.97ms |
- |
test-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 605 kB | 59.20ms - 60.17ms | - | faster ✔ 12% - 14% 7.98ms - 9.83ms |
| branch | 595 kB | 67.80ms - 69.37ms | slower ❌ 13% - 17% 7.98ms - 9.83ms |
- |
test-lazy permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 604 kB | 57.73ms - 58.72ms | - | faster ✔ 12% - 14% 7.96ms - 9.70ms |
| branch | 595 kB | 66.34ms - 67.77ms | slower ❌ 14% - 17% 7.96ms - 9.70ms |
- |
test-open-close-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 791 kB | 1872.85ms - 1875.84ms | - | unsure 🔍 -0% - -0% -6.98ms - -2.91ms |
| branch | 781 kB | 1877.91ms - 1880.67ms | unsure 🔍 +0% - +0% +2.91ms - +6.98ms |
- |
test-open-close permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 789 kB | 1858.49ms - 1861.76ms | - | faster ✔ 1% - 1% 11.96ms - 16.34ms |
| branch | 779 kB | 1872.81ms - 1875.74ms | slower ❌ 1% - 1% 11.96ms - 16.34ms |
- |
alert-banner permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 425 kB | 11.52ms - 11.73ms | - | faster ✔ 1% - 4% 0.12ms - 0.45ms |
| branch | 412 kB | 11.79ms - 12.04ms | slower ❌ 1% - 4% 0.12ms - 0.45ms |
- |
alert-dialog permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 453 kB | 96.91ms - 98.08ms | - | faster ✔ 1% - 3% 1.48ms - 3.43ms |
| branch | 440 kB | 99.17ms - 100.73ms | slower ❌ 2% - 4% 1.48ms - 3.43ms |
- |
asset permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 360 kB | 8.58ms - 8.66ms | - | faster ✔ 0% - 2% 0.03ms - 0.16ms |
| branch | 349 kB | 8.67ms - 8.76ms | slower ❌ 0% - 2% 0.03ms - 0.16ms |
- |
avatar permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 398 kB | 17.60ms - 17.83ms | - | faster ✔ 1% - 2% 0.15ms - 0.43ms |
| branch | 385 kB | 17.92ms - 18.09ms | slower ❌ 1% - 2% 0.15ms - 0.43ms |
- |
badge permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 398 kB | 20.78ms - 21.17ms | - | faster ✔ 0% - 3% 0.10ms - 0.62ms |
| branch | 385 kB | 21.15ms - 21.51ms | slower ❌ 0% - 3% 0.10ms - 0.62ms |
- |
banner permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 360 kB | 10.16ms - 10.30ms | - | faster ✔ 1% - 3% 0.15ms - 0.34ms |
| branch | 348 kB | 10.41ms - 10.54ms | slower ❌ 1% - 3% 0.15ms - 0.34ms |
- |
button-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 444 kB | 40.13ms - 41.15ms | - | faster ✔ 4% - 7% 1.53ms - 2.97ms |
| branch | 431 kB | 42.39ms - 43.40ms | slower ❌ 4% - 7% 1.53ms - 2.97ms |
- |
button permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 450 kB | 44.40ms - 45.62ms | - | faster ✔ 2% - 5% 0.86ms - 2.46ms |
| branch | 437 kB | 46.15ms - 47.18ms | slower ❌ 2% - 5% 0.86ms - 2.46ms |
- |
Firefox
accordion permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 417 kB | 161.60ms - 168.28ms | - | faster ✔ 5% - 10% 8.96ms - 17.88ms |
| branch | 404 kB | 175.40ms - 181.32ms | slower ❌ 5% - 11% 8.96ms - 17.88ms |
- |
action-bar permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 112.27ms - 117.61ms | - | faster ✔ 2% - 8% 2.14ms - 9.98ms |
| branch | 473 kB | 118.13ms - 123.87ms | slower ❌ 2% - 9% 2.14ms - 9.98ms |
- |
action-button permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 515 kB | 146.19ms - 153.49ms | - | unsure 🔍 -6% - +1% -8.99ms - +1.31ms |
| branch | 502 kB | 150.04ms - 157.32ms | unsure 🔍 -1% - +6% -1.31ms - +8.99ms |
- |
action-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 537 kB | 115.35ms - 121.97ms | - | faster ✔ 0% - 8% 0.21ms - 10.19ms |
| branch | 524 kB | 120.12ms - 127.60ms | slower ❌ 0% - 9% 0.21ms - 10.19ms |
- |
action-menu permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 647 kB | 266.51ms - 269.81ms | - | faster ✔ 17% - 19% 56.55ms - 62.57ms |
| branch | 638 kB | 325.21ms - 330.23ms | slower ❌ 21% - 23% 56.55ms - 62.57ms |
- |
test-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 605 kB | 129.75ms - 134.09ms | - | unsure 🔍 -2% - +1% -2.93ms - +1.65ms |
| branch | 595 kB | 131.82ms - 133.30ms | unsure 🔍 -1% - +2% -1.65ms - +2.93ms |
- |
test-lazy permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 604 kB | 163.70ms - 167.38ms | - | slower ❌ 10% - 15% 14.73ms - 22.15ms |
| branch | 595 kB | 143.88ms - 150.32ms | faster ✔ 9% - 13% 14.73ms - 22.15ms |
- |
test-open-close-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 791 kB | 1900.23ms - 1913.13ms | - | slower ❌ 0% - 1% 1.66ms - 15.02ms |
| branch | 781 kB | 1896.62ms - 1900.06ms | faster ✔ 0% - 1% 1.66ms - 15.02ms |
- |
test-open-close permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 789 kB | 1882.53ms - 1887.83ms | - | faster ✔ 0% - 1% 7.47ms - 18.25ms |
| branch | 779 kB | 1893.35ms - 1902.73ms | slower ❌ 0% - 1% 7.47ms - 18.25ms |
- |
alert-banner permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 425 kB | 29.15ms - 31.49ms | - | unsure 🔍 -5% - +7% -1.40ms - +2.08ms |
| branch | 412 kB | 28.69ms - 31.27ms | unsure 🔍 -7% - +5% -2.08ms - +1.40ms |
- |
alert-dialog permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 453 kB | 199.68ms - 207.12ms | - | unsure 🔍 -4% - +1% -8.87ms - +2.27ms |
| branch | 440 kB | 202.55ms - 210.85ms | unsure 🔍 -1% - +4% -2.27ms - +8.87ms |
- |
asset permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 360 kB | 18.87ms - 20.89ms | - | unsure 🔍 -9% - +5% -1.78ms - +0.98ms |
| branch | 349 kB | 19.34ms - 21.22ms | unsure 🔍 -5% - +9% -0.98ms - +1.78ms |
- |
avatar permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 398 kB | 41.56ms - 44.56ms | - | unsure 🔍 -4% - +4% -1.63ms - +1.83ms |
| branch | 385 kB | 42.10ms - 43.82ms | unsure 🔍 -4% - +4% -1.83ms - +1.63ms |
- |
badge permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 398 kB | 48.53ms - 52.83ms | - | unsure 🔍 -8% - +3% -4.38ms - +1.74ms |
| branch | 385 kB | 49.83ms - 54.17ms | unsure 🔍 -4% - +9% -1.74ms - +4.38ms |
- |
banner permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 360 kB | 25.89ms - 29.03ms | - | unsure 🔍 -0% - +16% -0.02ms - +3.94ms |
| branch | 348 kB | 24.30ms - 26.70ms | unsure 🔍 -14% - -0% -3.94ms - +0.02ms |
- |
button-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 444 kB | 92.48ms - 98.96ms | - | faster ✔ 2% - 11% 1.88ms - 11.52ms |
| branch | 431 kB | 98.86ms - 105.98ms | slower ❌ 2% - 12% 1.88ms - 11.52ms |
- |
button permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 450 kB | 97.70ms - 104.14ms | - | faster ✔ 3% - 12% 2.68ms - 12.72ms |
| branch | 437 kB | 104.77ms - 112.47ms | slower ❌ 2% - 13% 2.68ms - 12.72ms |
- |
Really great work so far here @mirekszot! Lots of notes and small changes, let me know if any need further explanation.
Thanks @Westbrook for reviewing. All kudos should go to @paulodetarsofm, he's the author of this PR 👏 👏. I will try to implement your comments ASAP!
@paulodetarsofm Can you please let me know how can we help to get the below To-do's addressed? calendar to dos input segment to dos date time picker to dos
Lighthouse scores
| Category | Latest (report) | Main (report) | Branch (report) |
|---|---|---|---|
| Performance | 0.99 | 0.99 | 0.97 |
| 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 | 224.405 kB | 212.129 kB 🏆 | 228.74 kB |
| Scripts | 56.541 kB | 49.703 kB 🏆 | 54.422 kB |
| Stylesheet | 34.951 kB | 30.436 kB 🏆 | 42.391 kB |
| Document | 6.06 kB | 5.336 kB | 5.215 kB 🏆 |
| Third Party | 0.00 B | 0.00 B | 126.712 kB |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 48 | 48 | 43 🏆 |
| Scripts | 40 | 40 | 35 🏆 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Third Party | 0 | 0 | 2 |
Good to go into a feature branch! Please make the above suggested changes in your feature branch and we can take this forward. Thanks for doing this!