carbon
carbon copied to clipboard
feat(date-picker): React|WC parity
Closes #19477
Matches date-picker functionality with React version.
- [x] Missing "Default" story
- [x] AI Label gradient is missing
- [x] Move focus to calendar by pressing Tab. See https://github.com/carbon-design-system/carbon/pull/19504
- [x] Esc key should close calendar from input field
- [x] Layer styling is missing in Range With Calendar With Layer
- [x] See parent issue for more.
Changelog
New
- "Default" story
- AI label gradient
Escapekey closes calendar from input field- Keyboard navigation matches React (press
Tabto focus on calendar dropdown) - Layer styling for Range with Calendar with Layer story
hideLabelandrangeproperties incds-date-picker-skeletonmatching React version- Added controls to WC storybook
Changed
- Order and titles of stories matches React
- Calendar dropdown removed from "simple" mode
- Layer names in storybook match React
Removed
- "Playground" story
Testing / Reviewing
- UX and visual review from the design team to ensure consistency
- CI tests should pass
- Ensure functionality matches React version (keyboard nav, simple/single/range modes)
PR Checklist
As the author of this PR, before marking ready for review, confirm you:
- [x] Reviewed every line of the diff
- [x] Updated documentation and storybook examples
- [ ] ~Wrote passing tests that cover this change~
- [x] Addressed any impact on accessibility (a11y)
- [x] Tested for cross-browser consistency
- [x] Validated that this code is ready for review and status checks should pass
More details can be found in the pull request guide
Deploy Preview for v11-carbon-web-components ready!
| Name | Link |
|---|---|
| Latest commit | de194401c293fcf1becf2cf149761779082a4782 |
| Latest deploy log | https://app.netlify.com/projects/v11-carbon-web-components/deploys/68629c36916f37000894fd95 |
| Deploy Preview | https://deploy-preview-19668--v11-carbon-web-components.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
Deploy Preview for v11-carbon-react ready!
Built without sensitive environment variables
| Name | Link |
|---|---|
| Latest commit | de194401c293fcf1becf2cf149761779082a4782 |
| Latest deploy log | https://app.netlify.com/projects/v11-carbon-react/deploys/68629c36d5623a00081a86c9 |
| Deploy Preview | https://deploy-preview-19668--v11-carbon-react.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 84.80%. Comparing base (
33dde11) to head (de19440). Report is 22 commits behind head on main.
Additional details and impacted files
@@ Coverage Diff @@
## main #19668 +/- ##
=======================================
Coverage 84.80% 84.80%
=======================================
Files 369 369
Lines 14711 14711
Branches 4854 4821 -33
=======================================
Hits 12475 12475
Misses 2087 2087
Partials 149 149
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.