feat(datepicker): add styling for out-of-month days #1648
Conversation
|
|
@prateekmtri is attempting to deploy a commit to the Bergside Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds detection and styling for out-of-month day cells in the Datepicker, a new theme token for "outside" day styling, updates the UI schema component enum to use source paths, and includes an additional Windows-style path in Tailwind content configuration. Changes
Sequence Diagram(s)(omitted — not applicable) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Fix all issues with AI Agents 🤖
In @apps/web/tailwind.config.cjs:
- Line 12: Remove the Windows-style glob entry
".flowbite-react\\class-list.json" and keep only the forward-slash variant
".flowbite-react/class-list.json" in the Tailwind content array; the backslash
escapes characters in fast-glob/node-glob patterns and breaks the glob, so
delete the backslash-escaped line (the literal
".flowbite-react\\class-list.json") and ensure only the forward-slash path
remains.
In @packages/ui/schema.json:
- Around line 12-114: The schema.json component enum currently lists
Windows-style paths (e.g., "src\\components\\Accordion\\Accordion") but the
generator (packages/ui/scripts/generate-metadata.ts) expects plain component
names from the componentToClassListMap keys; fix by regenerating the schema with
generate-metadata.ts (or update the enum entries) so values are simple
identifiers like "Accordion", "AccordionContent", etc., and ensure any path
handling in generate-metadata.ts uses normalized forward slashes before
extraction so the emitted enum matches the componentToClassListMap.
In @packages/ui/src/components/Datepicker/Views/Days.tsx:
- Around line 83-84: The condition that applies the out-of-month style currently
uses isOutOfMonth && !isSelected and therefore also fades disabled days; update
the condition where theme.items.item.outside is applied (in Days.tsx) to exclude
disabled days too (e.g., isOutOfMonth && !isSelected && !isDisabled) so that
disabled cells keep their standard disabled styling and are not double-faded.
🧹 Nitpick comments (1)
apps/storybook/tailwind.config.cjs (1)
6-10: Multi-line formatting improves readability.The expansion to a multi-line array format is a good readability improvement.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (5)
apps/storybook/tailwind.config.cjsapps/web/tailwind.config.cjspackages/ui/schema.jsonpackages/ui/src/components/Datepicker/Views/Days.tsxpackages/ui/src/components/Datepicker/theme.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-01T10:45:00.071Z
Learnt from: SutuSebastian
Repo: themesberg/flowbite-react PR: 1621
File: packages/ui/src/cli/commands/install.ts:46-48
Timestamp: 2025-09-01T10:45:00.071Z
Learning: In the flowbite-react CLI install command, the maintainer prefers a simple Windows support implementation that appends .cmd to all commands on win32, rather than a more defensive approach, because they know the command will only be package managers from the resolveCommand function.
Applied to files:
apps/web/tailwind.config.cjs
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: 🧰 Build
🔇 Additional comments (5)
apps/storybook/tailwind.config.cjs (1)
9-9: Verify necessity of Windows-style path duplication.As with
apps/web/tailwind.config.cjs, adding an explicit Windows-style path variant (.flowbite-react\\class-list.json) alongside the Unix-style path may be unnecessary. Modern Tailwind CSS handles forward slashes universally across platforms.This change also appears unrelated to the PR objectives about datepicker styling.
Based on learnings, the maintainer prefers simple Windows support, but that context was for CLI command execution (appending
.cmd), not path specifications in config files where forward slashes are typically universal.packages/ui/src/components/Datepicker/theme.ts (1)
53-53: LGTM! Theme token aligns with PR objectives.The new
outsideproperty with"text-gray-500 opacity-40"provides the muted styling for out-of-month days as specified in the requirements. The Tailwind v4 syntax is correct and will properly apply gray text color with 40% opacity.packages/ui/src/components/Datepicker/Views/Days.tsx (3)
28-28: LGTM! Theme interface correctly extended.The
outsideproperty addition toDatepickerViewsDaysThemeproperly supports the new styling feature and aligns with the theme definition intheme.ts.
70-71: LGTM! Month comparison correctly handles out-of-month detection.The logic correctly identifies days outside the current month by comparing
getMonth()values. This handles cross-year boundaries properly (e.g., December 2025 → January 2026, January 2025 → December 2024).
101-101: LGTM! DisplayName follows React conventions.The component's display name is properly set for debugging and React DevTools.
There was a problem hiding this comment.
undo Windows specific changes here.
|
Thanks for the review @SutuSebastian. I've noted the feedback regarding the Windows paths, schema reversion, and cleanup of comments. I will work on these fixes and update the PR shortly. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI Agents
In @apps/web/tailwind.config.cjs:
- Line 12: Replace the Windows-style escaped path string
".flowbite-react\\class-list.json" in the Tailwind content array with the
cross-platform forward-slash form ".flowbite-react/class-list.json" (undo the
previous Windows-specific change) so the Tailwind content glob matches correctly
across platforms.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/tailwind.config.cjspackages/ui/schema.jsonpackages/ui/src/components/Datepicker/Views/Days.tsxpackages/ui/src/components/Datepicker/theme.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/ui/src/components/Datepicker/Views/Days.tsx
- packages/ui/src/components/Datepicker/theme.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-01T10:45:00.071Z
Learnt from: SutuSebastian
Repo: themesberg/flowbite-react PR: 1621
File: packages/ui/src/cli/commands/install.ts:46-48
Timestamp: 2025-09-01T10:45:00.071Z
Learning: In the flowbite-react CLI install command, the maintainer prefers a simple Windows support implementation that appends .cmd to all commands on win32, rather than a more defensive approach, because they know the command will only be package managers from the resolveCommand function.
Applied to files:
apps/web/tailwind.config.cjs
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: 🧰 Build
🔇 Additional comments (1)
packages/ui/schema.json (1)
12-114: Revert the schema component enum changes as instructed by the maintainer.The maintainer explicitly requested to "undo changes" to this file, and you acknowledged you would revert the schema changes. These Windows-style path values are inconsistent with how the schema generation script works and should be reverted to simple component names.
Likely an incorrect or invalid review comment.
|
Fixed the formatting issues. All CI checks are passing now. Ready for re-review! 🚀 |
Not exactly, u resolved my comments in 4586d7a, but then reverted the windows If u need to format the files, just run |
|
Thanks for pointing that out @SutuSebastian — got it 👍 |
|
Reverted the changes in schema.json and removed the Windows-style path from tailwind.config.cjs. Also ran bun run format. Ready for re-review! |
There was a problem hiding this comment.
for the last time, undo
2 participants
Description
This PR addresses issue #1647.
I have implemented visual styling for "out-of-month" days in the Datepicker component. Days belonging to the previous or next month now appear faded (lower opacity and gray text) to distinguish them from the current month's days.
Changes
Days.tsxto detect and style out-of-month days.outsideproperty intheme.tsto support customization.Fixes
Fixes #1647
Summary by CodeRabbit
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.