- Replace single datetime-local field with 4 separate fields:
- Add helper functions:
* splitDateTime(): Split datetime string into date and time parts
* combineDateTime(): Combine date and time into datetime string
- Implement internal state management:
* startDate, startTime, endDate, endTime internal states
* Sync effects to update internal states from start/end props
* Change handlers for each field that combine values and call parent handlers
- Fix test cases:
* Update EventModal.test.tsx, EventUpdateModal.test.tsx to use new field labels
* Change from 'Start'/'End' to 'Start Date'/'Start Time'/'End Time'/'End Date'
- Refactor ~47 test cases across 7 test files to use getByRole
- Improve accessibility testing coverage following Testing Library best practices
- Make tests more robust against text changes (i18n, copy updates)
- Test elements as users (especially screen readers) interact with them
- Add expand and close icons to ResponsiveDialog header in normal mode
- Change 'Show More' button to 'More options' with Add icon
- Hide Cancel button in normal mode, show only in extended mode
- Add showHeaderActions prop to ResponsiveDialog for UI control
- Preserve EventDisplayPreview modal with old UI (no header icons)
- Update all affected test cases to match new UI behavior
- Update RepeatEvent.test.tsx to use correct selectors and text matching
- Update EventDisplay.test.tsx to use 'Notification' instead of 'Alarm'
- Update EventModal.test.tsx to use new label names and fix description input tests
- Update Calendar.test.tsx to use new placeholder text 'Start typing a name or email'
- Fix EventDisplay.tsx to use 'Notification' label consistently
Implemented a new ResponsiveDialog component and redesigned EventModal
with better UX for both normal and extended modes.
New Features:
- Created reusable ResponsiveDialog component (src/components/Dialog/)
* Normal mode: 685px centered popup
* Extended mode: fullscreen with 90px header preservation
* Auto spacing via MUI Stack (16px normal, 24px extended)
* Back arrow navigation in extended mode
* No backdrop/shadow in extended mode for seamless integration
* Configurable props for all dimensions and behaviors
EventModal Improvements:
- Replaced native checkbox with MUI Checkbox component
- Migrated from Popover to ResponsiveDialog
- Reorganized field layout
=> Comprehensive documentation in Dialog/README.md
Note: RepeatEvent integration tests need additional refactoring (tracked separately)
lenhanphung