mi6
Refactor calendar in `ic-date-picker` into a standalone component [2nd attempt]
Summary of the changes
This PR introduces a new standalone ic-calendar component by extracting calendar functionality from the ic-date-picker component. The date picker now uses the calendar component internally, improving code maintainability and reusability for future date-time components.
Key changes:
Created new ic-calendar component with its own styles, stories, tests and documentation Refactored ic-date-picker to use ic-calendar as a child component Added calendar-specific CSS variables and z-index token Updated type definitions and helper functions to support the changes
Related issue
#3357
Checklist
General
- [x] Changes to docs package checked and committed.
- [x] All acceptance criteria reviewed and met.
Testing
- [ ] Relevant unit tests and visual regression tests added.
- [x] Visual testing against Figma component specification completed.
- [x] Playground stories in React Storybook up to date, with any prop changes and additions addressed.
- [x] Compare performance of modified components against develop using Performance addon in React Storybook.
Accessibility
- [x] Accessibility Insights FastPass performed.
- [x] A11y unit test added and yields no issues.
- [x] A11y plug-in on Storybook yields no issues.
- [x] Manual screen reader testing performed using NVDA and VoiceOver.
- [x] Manual keyboard testing for keyboard controls and logical focus order.
- [x] Correct roles used and ARIA attributes used correctly where required.
Resize/zoom behaviour
- [x] Page can be zoomed to 400% with no loss of content.
- [x] Screen magnifier used with no issues.
- [x] Text resized to 200% with no loss of content.
- [x] Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.
System modes
- [x] Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
- [x] Windows High Contrast mode tested with no loss of content.
- [x] System light and dark mode tested with no loss of content.
- [x] Browser support tested (Chrome, Safari, Firefox and Edge).
Testing content extremes
- [x] All prop combinations work without issue.
- [x] Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
- [x] Props/slots can be updated after initial render.
View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/calendar-second-attempt/web-components View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/calendar-second-attempt/react
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
View your canary branch deployment here: https://mi6.github.io/ic-ui-kit/branches/calendar-second-attempt/canary-web-components View your canary React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/calendar-second-attempt/canary-react
Cypress visual tests failed. View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/calendar-second-attempt/cypress-image-diff-screenshots/diff View the html report here: https://mi6.github.io/ic-ui-kit/branches/calendar-second-attempt/cypress-image-diff-html-report/cypress-image-diff-html-report.html
Spec tests are still needed but I wanted to get some reviews in, in the meantime
When selecting a date in the ic-date-picker, the picker closes but no item has the focus. previously it would return to the calendar button
I think this all looks amazing 🤩 especially considering how complex this change has been!
It all works well and the date picker still works as it did
I can see that a lot of the unit tests are commented out however - can't quite remember if this has been mentioned before, but anyway it doesn't matter as they don't run in the canary package. So I'm happy to approve :)
I will create a separate ticket for the unit tests