Skip to content

feat(deps) - upgrade react-day-picker from v8 to v9 with improved styling#903

Merged
gabrielseco merged 2 commits intomainfrom
feat/react-day-picker-v9-upgrade
Apr 13, 2026
Merged

feat(deps) - upgrade react-day-picker from v8 to v9 with improved styling#903
gabrielseco merged 2 commits intomainfrom
feat/react-day-picker-v9-upgrade

Conversation

@gabrielseco
Copy link
Copy Markdown
Collaborator

@gabrielseco gabrielseco commented Apr 12, 2026

Summary

  • Upgrade react-day-picker from v8 to v9
  • Update date-fns from 3.6.0 to 4.1.0
  • Improve calendar UI with better styling and UX

Changes

react-day-picker v9 Upgrade

  • Updated to latest react-day-picker v9 API
  • Removed deprecated v8 classNames and components
  • Simplified component structure with new v9 patterns

Calendar UI Improvements

  • Navigation buttons: Added bordered buttons with hover effects, positioned at far left and right
  • Centered title: Absolutely positioned month/year title for perfect centering
  • Smaller chevrons: Reduced icon size from 1rem to 0.75rem for cleaner look
  • Styled weekday headers: Added uppercase text, letter-spacing, and better typography
  • Improved spacing: Added proper padding and margins throughout

Dependencies

  • Updated date-fns from 3.6.0 to 4.1.0 (latest)

Visual Changes

The calendar now has:

  • Bordered navigation arrows on far left and right
  • Perfectly centered month/year title
  • Prettier weekday headers (Su, Mo, Tu, etc.) with uppercase styling
  • Better overall spacing and visual hierarchy

Test plan

  • Calendar renders correctly with new styling
  • Navigation buttons work (previous/next month)
  • Date selection works as expected
  • Hover states display correctly
  • Disabled dates are properly styled
  • Selected dates are highlighted correctly
  • Outside days (previous/next month) are dimmed
image

Note

Medium Risk
Moderate risk due to major react-day-picker upgrade (v8→v9) and date-fns v4 bump, which can subtly change calendar behavior, styling, and date handling.

Overview
Upgrades the calendar stack by bumping react-day-picker from v8 to v9 and date-fns to v4, updating the lockfile with new transitive deps.

Refactors the shared Calendar wrapper to the v9 API (new classNames keys and Chevron component) and moves most visual treatment to new global .rdp-* CSS rules for navigation, weekdays, hover/selected/disabled states, and layout.

Updates DatePickerFieldDefault to explicitly control popover open state and to close the popover immediately on day click (replacing the prior PopoverClose-wrapped day content).

Reviewed by Cursor Bugbot for commit bd49af9. Bugbot is set up for automated code reviews on this repo. Configure here.

Update react-day-picker to v9.14.0 with breaking changes:

- Update Calendar component classNames to v9 API (caption -> month_caption, nav_button -> button_previous/button_next, table -> month_grid, head_row -> weekdays, head_cell -> weekday, row -> week, cell -> day, day -> day_button, day_* modifiers updated)
- Replace IconLeft/IconRight with Chevron component
- Update DatePickerFieldDefault to use controlled Popover state instead of PopoverClose wrapper
- All tests passing, CI checks successful

Fixes issue reported by Cursor Bugbot regarding v8 to v9 classNames incompatibility

Made-with: Cursor
Calendar UI improvements:
- Add bordered navigation buttons with hover effects
- Position nav buttons at far left/right with centered title
- Reduce chevron icon size for cleaner look
- Style weekday headers with uppercase, better spacing, and letter-spacing
- Add proper spacing to calendar caption

Technical changes:
- Simplify calendar component by removing button variants
- Update date-fns from 3.6.0 to 4.1.0
- Clean up CSS selectors for react-day-picker v9 compatibility
- Use absolute positioning for proper button layout

Made-with: Cursor
@github-actions
Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

Metric Current Previous Change Status
Total (gzip) 207.32 kB 207.5 kB -179 B (-0.1%) 🟢
Total (raw) 556.13 kB 558.61 kB -2.48 kB (-0.4%) 🟢
CSS (gzip) 20.09 kB 19.95 kB +136 B (+0.7%) 🔴
CSS (raw) 103.08 kB 104.29 kB -1.21 kB (-1.2%) 🟢

Size Limits

  • ✅ Total gzipped: 207.32 kB / 250 kB (82.9%)
  • ✅ Total raw: 556.13 kB / 600 kB (92.7%)
  • ✅ CSS gzipped: 20.09 kB / 25 kB (80.3%)

Largest Files (Top 5)

  1. chunk-4X3SBT5S.js - 12.54 kB (0 B (0%))
  2. index.css - 10.04 kB (+69 B (+0.7%))
  3. styles.css - 10.04 kB (+67 B (+0.7%))
  4. index.js - 6.06 kB (0 B (0%))
  5. chunk-ZQNXWLQI.js - 5.93 kB (0 B (0%))
View All Files (311 total)
File Size (gzip) Change
chunk-4X3SBT5S.js 12.54 kB 0 B (0%)
index.css 10.04 kB +69 B (+0.7%)
styles.css 10.04 kB +67 B (+0.7%)
index.js 6.06 kB 0 B (0%)
chunk-ZQNXWLQI.js 5.93 kB 0 B (0%)
chunk-R47Q7R6C.js 5.82 kB 0 B (0%)
chunk-7PIFA5CU.js 4.4 kB 0 B (0%)
chunk-OJNJZKEG.js 4.24 kB 0 B (0%)
chunk-4NQMZJDT.js 4.06 kB 0 B (0%)
chunk-3IRHOJNZ.js 3.37 kB 0 B (0%)

✅ Bundle size check passed

@github-actions
Copy link
Copy Markdown
Contributor

Deploy preview for remote-flows-example-app ready!

✅ Preview
https://remote-flows-example-cnonfxgr2-remotecom.vercel.app

Built with commit bd49af9.
This pull request is being automatically deployed with vercel-action

@github-actions
Copy link
Copy Markdown
Contributor

Deploy preview for remote-flows ready!

✅ Preview
https://remote-flows-cf8qlwlqx-remotecom.vercel.app

Built with commit bd49af9.
This pull request is being automatically deployed with vercel-action

@gabrielseco gabrielseco changed the title feat: upgrade react-day-picker from v8 to v9 with improved styling feat(deps) - upgrade react-day-picker from v8 to v9 with improved styling Apr 12, 2026
@github-actions
Copy link
Copy Markdown
Contributor

📊 Coverage Report

✅ Coverage increased! 🎉

Metric Current Previous Change Status
Lines 89.76% 89.69% +0.06% 🟢
Statements 89.40% 89.34% +0.06% 🟢
Functions 87.15% 87.00% +0.16% 🟢
Branches 79.60% 79.55% +0.06% 🟢

Detailed Breakdown

Lines Coverage
  • Covered: 3557 / 3963
  • Coverage: 89.76%
  • Change: +0.06% (6 lines)
Statements Coverage
  • Covered: 3620 / 4049
  • Coverage: 89.40%
  • Change: +0.06% (6 statements)
Functions Coverage
  • Covered: 977 / 1121
  • Coverage: 87.15%
  • Change: +0.16% (0 functions)
Branches Coverage
  • Covered: 2205 / 2770
  • Coverage: 79.60%
  • Change: +0.06% (0 branches)

✅ Coverage check passed

Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit bd49af9. Configure here.

Comment thread src/styles/global.css
@gabrielseco gabrielseco merged commit bd58bd7 into main Apr 13, 2026
7 checks passed
@gabrielseco gabrielseco deleted the feat/react-day-picker-v9-upgrade branch April 13, 2026 07:43
@gabrielseco gabrielseco mentioned this pull request Apr 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants