[WEB-3237, 3238] dev: date picker enhancements#6470
[WEB-3237, 3238] dev: date picker enhancements#6470sriramveeraghanta merged 3 commits intopreviewfrom
Conversation
…6391) * feat: react-day-picker upgrade and caption dropdowns * style fixes
WalkthroughThis pull request introduces updates to multiple components using 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: 1
🔭 Outside diff range comments (1)
web/styles/react-day-picker.css (1)
Line range hint
178-207: Enhance dropdown styles for better accessibility.The dropdowns implementation could benefit from improved accessibility:
.rdp-dropdown { appearance: none; position: absolute; z-index: 2; + /* Add ARIA attributes support */ + &[aria-expanded="true"] { + background-color: rgba(var(--color-background-80)); + } + /* Add keyboard navigation support */ + &:focus-visible { + outline: var(--rdp-outline); + outline-offset: 2px; + } }
🧹 Nitpick comments (2)
web/styles/react-day-picker.css (2)
33-44: Fix potential height flickering issue.The fixed height and width on
.rdp-day_buttonshould help resolve the flickering issue mentioned in the PR objectives. However, consider addingmin-heightto prevent potential collapse:.rdp-day_button { width: var(--rdp-cell-size); max-width: var(--rdp-cell-size); height: var(--rdp-cell-size); + min-height: var(--rdp-cell-size); }
307-310: Consider adding transition for smoother hover effects.The hover and focus states could benefit from smooth transitions:
.rdp-day.rdp-range_middle .rdp-day_button:hover, .rdp-day.rdp-range_middle .rdp-day_button:focus-visible { background-color: var(--rdp-background-color); color: inherit; + transition: background-color 0.2s ease-in-out; }
📜 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 (3)
- GitHub Check: lint-web
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (8)
web/core/components/inbox/modals/snooze-issue-modal.tsx (2)
4-4: LGTM! Import and initialization of defaultClassNames.The addition of
getDefaultClassNamesand its initialization aligns with the react-day-picker v9.5.0 upgrade.Also applies to: 21-22
51-52: LGTM! Enhanced date picker with month/year selection.The addition of
captionLayout="dropdown"enables month and year selection in the date picker, improving user experience.web/core/components/dropdowns/date.tsx (1)
179-180: LGTM! Comprehensive date picker enhancements.The changes include:
- Month/year selection via
captionLayout="dropdown"- Auto-focus behavior for better UX
- Fixed weeks to prevent height flickering between months
Also applies to: 187-187, 190-190
web/core/components/core/filters/date-filter-modal.tsx (2)
102-105: LGTM! Consistent styling and enhanced functionality for the first date picker.The changes align with the new react-day-picker version while maintaining consistent styling through
defaultClassNames.
127-130: LGTM! Consistent styling and enhanced functionality for the second date picker.The changes mirror the first date picker, ensuring a consistent user experience across both pickers.
web/core/components/dropdowns/date-range.tsx (1)
209-210: LGTM! Enhanced date range picker with consistent behavior.The changes include:
- Month/year selection support
- Fixed weeks to prevent height flickering
- Improved focus management
Also applies to: 223-224
web/package.json (1)
58-58: Verify breaking changes from react-day-picker v8 to v9.This major version upgrade might include breaking changes that need to be addressed across all date picker implementations.
Run this script to:
- Check the migration guide
- Verify all date picker implementations in the codebase
- List potential breaking changes
✅ Verification successful
The codebase is already compatible with react-day-picker v9
The implementation in all four components and the CSS customizations are already following v9 patterns. No breaking changes need to be addressed.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Analyze impact of react-day-picker upgrade # Check for DayPicker component usage patterns that might be affected echo "Checking DayPicker usage patterns..." rg -A 5 "DayPicker" --type tsx # Look for potential breaking changes in imports echo "Checking import statements..." rg "from 'react-day-picker'" --type tsx # Search for custom styles that might need updates echo "Checking custom style overrides..." rg "rdp-" --type css --type scssLength of output: 427
Script:
#!/bin/bash # Search for DayPicker usage with correct file extensions echo "=== Checking DayPicker usage patterns ===" rg -t js -t jsx -t ts -t tsx "DayPicker" -A 5 echo -e "\n=== Checking import statements ===" rg -t js -t jsx -t ts -t tsx "from ['|\"]react-day-picker" echo -e "\n=== Checking custom style overrides ===" rg "rdp-" -t css echo -e "\n=== Fetching package information ===" curl -s https://registry.npmjs.org/react-day-picker | jq -r '.versions["9.5.0"].dist.tarball' | xargs curl -s | tar -xzf - -O package/README.mdLength of output: 8828
Script:
#!/bin/bash # Search for DayPicker usage without file type restrictions echo "=== Checking DayPicker component usage ===" rg "import.*DayPicker.*from ['|\"]react-day-picker" -A 3 echo -e "\n=== Checking DayPicker implementations ===" rg "<DayPicker" -A 5Length of output: 4955
web/styles/react-day-picker.css (1)
Line range hint
1-27: LGTM! Root styles are well-structured.The root styles provide a good foundation with:
- Consistent sizing variables
- Clear documentation comments
- Proper background handling
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (2)
web/core/components/inbox/modals/snooze-issue-modal.tsx (1)
Line range hint
71-74: Fix undefined close() function call.The code attempts to call
close()which is undefined. This will cause a runtime error.- close(); + handleClose();web/styles/react-day-picker.css (1)
Line range hint
178-207: Fix dropdown styles for better accessibility.The dropdown styles have a few accessibility concerns:
- The opacity:0 approach might affect screen readers
- The hover styles should also apply to keyboard focus
.rdp-dropdown { - appearance: none; - --webkit-appearance: none; - --moz-appearance: none; + 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; + color: transparent; border: none; font-family: inherit; font-size: 1rem; line-height: inherit; cursor: pointer; background: transparent; - &:hover { + &:hover, + &:focus-visible { background-color: rgba(var(--color-background-80)) !important; } }
🧹 Nitpick comments (2)
web/styles/react-day-picker.css (2)
33-44: Consider adding transition for smooth hover effects.The day button styles look good, but adding a transition property would make hover and selection effects smoother.
.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%; + transition: background-color 0.2s ease-in-out; }
95-104: Enhance today's indicator for better visibility.The current today's indicator might be hard to see on some backgrounds. Consider making it more prominent.
.rdp-today:not(.rdp-outside)::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0.5em; height: 0.5em; - background-color: var(--rdp-background-color); + background-color: var(--rdp-accent-color); + opacity: 0.5; border-radius: 100%; transform: translate(-50%, 0); }
📜 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.
🔇 Additional comments (6)
web/core/components/inbox/modals/snooze-issue-modal.tsx (1)
51-52: LGTM! Date picker enhancements properly implemented.The changes correctly implement the month/year selection dropdown and maintain consistent styling with other date pickers.
web/core/components/dropdowns/date.tsx (1)
179-190: LGTM! Excellent improvements to the date picker.The changes effectively:
- Add month/year selection via dropdown
- Fix height flickering with
fixedWeeks- Maintain consistent styling
web/core/components/core/filters/date-filter-modal.tsx (1)
102-105: LGTM! Consistent implementation across both date pickers.The changes maintain consistency in styling and functionality between both date picker instances while adding month/year selection capability.
Also applies to: 127-130
web/core/components/dropdowns/date-range.tsx (1)
Line range hint
209-224: LGTM! Comprehensive improvements to the date range picker.The changes successfully:
- Add month/year selection via dropdown
- Fix height flickering with
fixedWeeks- Maintain consistent styling while preserving the date range validation logic
web/package.json (1)
58-58: Verify breaking changes from react-day-picker v8 to v9.This is a major version upgrade that may include breaking changes. Please ensure all components using react-day-picker have been updated according to the v9 migration guide.
Run this script to find all files using react-day-picker that might need updates:
✅ Verification successful
The codebase appears compatible with react-day-picker v9
The four components using react-day-picker are already using v9-compatible APIs:
- web/core/components/core/filters/date-filter-modal.tsx
- web/core/components/inbox/modals/snooze-issue-modal.tsx
- web/core/components/dropdowns/date.tsx
- web/core/components/dropdowns/date-range.tsx
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Find all files importing react-day-picker echo "Files importing react-day-picker:" rg -l "from ['|\"]react-day-picker['\"]" --type tsx --type ts # Find specific v8 API usage that might need updates echo -e "\nPotential v8 API usage to update:" rg "className[^s].*DayPicker" --type tsx --type ts rg "modifiers.*DayPicker" --type tsx --type tsLength of output: 413
Script:
#!/bin/bash # Configure TypeScript file types for ripgrep export RIPGREP_CONFIG_PATH=$(mktemp) echo '--type-add=ts:*.{ts,tsx}' > "$RIPGREP_CONFIG_PATH" # Find all files importing or re-exporting react-day-picker echo "Files using react-day-picker:" rg -t ts -t js "from ['\"]react-day-picker['\"]|require\(['\"]react-day-picker['\"]" # Search for common v8 patterns that need updates echo -e "\nPotential v8 API patterns:" rg -t ts -t js "import.*DayPicker.*from ['\"]react-day-picker['\"]" -A 2 rg -t ts -t js "(className|modifiers|selected|onDayClick|mode).*DayPicker" # Clean up rm "$RIPGREP_CONFIG_PATH"Length of output: 2256
web/styles/react-day-picker.css (1)
Line range hint
1-28: LGTM! Base styles are well-structured.The root styles are well-organized with clear CSS variables for customization. The background is properly set to transparent to allow flexible theming.
3 participants
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
Release Notes
Dependencies
react-day-pickerlibrary to version 9.5.0New Features
Styling Updates