[WEB-3237, 3238] dev: date picker enhancements #6466
Conversation
…m/vineetk13/plane into vineetk13-feat-day-picker-caption-dropdowns
WalkthroughThe pull request introduces significant updates to the date picker components across multiple files in the web project. The primary changes involve upgrading the Changes
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
web/core/components/core/filters/date-filter-modal.tsx (1)
Line range hint
51-52: Fix incorrect date2 variable assignment.There's a bug in the date2 variable assignment. It's currently using
watch("date1")instead ofwatch("date2"), which could cause incorrect date range filtering.Apply this fix:
const date1 = getDate(watch("date1")); - const date2 = getDate(watch("date1")); + const date2 = getDate(watch("date2"));
🧹 Nitpick comments (2)
web/styles/react-day-picker.css (2)
33-44: Enhance button accessibility with ARIA attributes.While the button styles are well-structured, consider adding ARIA attributes for better accessibility.
.rdp-day_button { display: flex; overflow: hidden; align-items: center; justify-content: center; box-sizing: border-box; width: var(--rdp-cell-size); max-width: var(--rdp-cell-size); height: var(--rdp-cell-size); margin: 0; border: 2px solid transparent; border-radius: 50%; + /* Add these styles */ + -webkit-tap-highlight-color: transparent; + touch-action: manipulation; }
Line range hint
178-207: Enhance dropdown styles for better month/year selection.The dropdown styles support the new month/year selection feature from the PR objectives. However, consider adding transition effects for smoother interactions.
.rdp-dropdowns { position: relative; display: inline-flex; align-items: center; + transition: background-color 0.2s ease; } .rdp-dropdown { appearance: none; --webkit-appearance: none; --moz-appearance: none; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 100%; margin: 0; padding: 0; opacity: 0; border: none; font-family: inherit; font-size: 1rem; line-height: inherit; cursor: pointer; background: transparent; + transition: background-color 0.2s ease; &:hover { background-color: rgba(var(--color-background-80)) !important; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
web/core/components/core/filters/date-filter-modal.tsx(4 hunks)web/core/components/dropdowns/date-range.tsx(4 hunks)web/core/components/dropdowns/date.tsx(3 hunks)web/core/components/inbox/modals/snooze-issue-modal.tsx(3 hunks)web/package.json(1 hunks)web/styles/react-day-picker.css(3 hunks)
🧰 Additional context used
📓 Learnings (1)
web/styles/react-day-picker.css (1)
Learnt from: vineetk13
PR: makeplane/plane#6391
File: web/styles/react-day-picker.css:249-282
Timestamp: 2025-01-17T05:17:51.953Z
Learning: In the date range picker's CSS, left/right positioning for cell background effects (like in `.rdp-range_start::before`, `.rdp-range_middle::before`, `.rdp-range_end::before`) should use physical properties instead of logical properties, as these create visual effects that should remain consistent regardless of text direction.
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (7)
web/core/components/inbox/modals/snooze-issue-modal.tsx (1)
4-4: LGTM! The date picker enhancements look good.The changes properly implement the new react-day-picker v9.5.0 features:
- Added month/year selection via
captionLayout="dropdown"- Migrated to the new classNames API using
getDefaultClassNamesAlso applies to: 21-22, 51-52
web/core/components/dropdowns/date.tsx (1)
2-2: Great improvements to prevent date picker flickering!The changes effectively address the height flickering issue:
- Added
fixedWeeksprop to maintain consistent height- Updated to use
autoFocusinstead of deprecatedinitialFocus- Enhanced dropdown functionality with
captionLayout="dropdown"Also applies to: 36-37, 179-180, 187-187, 190-190
web/core/components/dropdowns/date-range.tsx (2)
5-5: LGTM! Consistent implementation of date picker enhancements.The changes properly align with other components:
- Added month/year selection
- Fixed height flickering
- Updated to new styling API
Also applies to: 55-56, 209-210, 223-224
4-4: Verify react-day-picker version in package.json.Let's ensure the package.json has been updated to use react-day-picker v9.5.0.
Also applies to: 5-5
✅ Verification successful
Package version verified: react-day-picker ^9.5.0
The package.json has been correctly updated to use react-day-picker version 9.5.0, which is consistent with the import changes.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check react-day-picker version in package.json rg '"react-day-picker"' -A 1 package.jsonLength of output: 43
Script:
#!/bin/bash # Find all package.json files fd package.json # Search with a more flexible pattern in all package.json files fd package.json --exec rg -i "day.?picker" -A 2 {}Length of output: 711
web/package.json (1)
58-58: Verify breaking changes from react-day-picker v9 upgrade.Major version upgrade from v8 to v9 may include breaking changes that need careful review.
Let's check the migration guide and verify dependency compatibility:
✅ Verification successful
The react-day-picker v9 upgrade appears safe to proceed
The codebase uses a compatible implementation pattern that should work with v9:
- Uses
getDefaultClassNames()for styling which handles CSS class changes- No usage of removed features (useInput hook, deprecated event handlers)
- Simple component usage with standard props that remain stable in v9
Note: After upgrading, verify that:
- ARIA labels in unit tests haven't changed
- Custom CSS classes through
classNamesprop still apply correctly🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check react-day-picker v9 migration guide and verify peer dependencies # Check migration guide from GitHub echo "Fetching migration guide..." curl -s "https://raw.githubusercontent.com/gpbl/react-day-picker/main/MIGRATE-v9.md" # Check peer dependencies echo -e "\nChecking peer dependencies..." npm info [email protected] peerDependenciesLength of output: 311
Script:
#!/bin/bash # Try alternative locations for migration guide and changelog echo "Checking alternative locations for migration guide..." curl -s "https://raw.githubusercontent.com/gpbl/react-day-picker/v9.5.0/MIGRATE-v9.md" echo -e "\nChecking changelog..." curl -s "https://raw.githubusercontent.com/gpbl/react-day-picker/v9.5.0/CHANGELOG.md" # Let's also check our codebase usage echo -e "\nChecking react-day-picker usage in codebase..." rg "react-day-picker" -B 2 -A 2Length of output: 57476
Script:
#!/bin/bash # Check component implementations for breaking changes echo "Checking component implementations..." # Check for useInput hook usage (removed in v9) echo -e "\nChecking for useInput hook usage..." rg "useInput.*react-day-picker" -B 2 -A 2 # Check for removed event handlers echo -e "\nChecking for removed event handlers..." rg "onDayTouchStart|onDayTouchEnd|onDayDoubleClick|onWeekNumberClick" -B 2 -A 2 # Check custom components and styles echo -e "\nChecking for custom components and styles..." rg "components=|component=|className=.*DayPicker" -B 2 -A 2 # Check CSS imports and custom styles echo -e "\nChecking CSS related code..." rg "DayPicker.*\.css|styles.*DayPicker" -B 2 -A 2Length of output: 2927
Script:
#!/bin/bash # Check DayPicker usage in specific components echo "Examining DayPicker usage in components..." echo -e "\nChecking snooze-issue-modal.tsx..." cat web/core/components/inbox/modals/snooze-issue-modal.tsx echo -e "\nChecking date.tsx..." cat web/core/components/dropdowns/date.tsx echo -e "\nChecking date-range.tsx..." cat web/core/components/dropdowns/date-range.tsx echo -e "\nChecking date-filter-modal.tsx..." cat web/core/components/core/filters/date-filter-modal.tsxLength of output: 24413
web/styles/react-day-picker.css (2)
Line range hint
1-27: LGTM: Root styles and variables are well-structured.The root styles and CSS variables are properly defined with clear comments. The reduced caption font size (1rem) will help prevent height flickering.
271-281: Maintain consistent range selection behavior.Based on the retrieved learning from PR #6391, ensure physical properties are used for range selection positioning.
The implementation correctly uses physical properties (
left/right) instead of logical properties for range selection positioning, which maintains consistent visual effects regardless of text direction.
aaryan610
changed the title
Description
This PR includes-
react-day-pickerpackage to the latest version,v.9.5.0.Type of Change
Screenshots and Media (if applicable)
Screen.Recording.2025-01-27.at.18.00.18.mov
issues resolved
#6153, #6389
Summary by CodeRabbit
New Features
react-day-pickerlibrary to version 9.5.0Bug Fixes
Style