Update Tailwind CSS configuration and enhance Datepicker component#1663
Update Tailwind CSS configuration and enhance Datepicker component#1663aun-afzaal wants to merge 2 commits intothemesberg:mainfrom
Conversation
- Added support for additional class list paths in Tailwind CSS configuration for both Storybook and web applications. - Updated the Datepicker component to include a new 'outside' state for days that are not part of the current month, improving visual feedback for users. - Refactored the Datepicker's Days view to incorporate the new 'outside' state in the button class logic.
|
@aun-afzaal is attempting to deploy a commit to the Bergside Team on Vercel. A member of the Team first needs to authorize it. |
|
📝 WalkthroughWalkthroughThe datepicker component's Days view was enhanced to visually distinguish out-of-month days. The Days component now uses Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/components/Datepicker/Views/Days.tsx`:
- Line 69: The isOutOfMonth calculation uses isMonthEqual which only compares
month numbers and therefore misclassifies dates in the same month number but
different years; update the logic where isOutOfMonth is computed (variable
isOutOfMonth in Days.tsx that compares currentDate and viewDate) to compare both
month and year (e.g., replace isMonthEqual with a helper that checks getMonth()
and getFullYear(), or add a new isSameMonthAndYear helper in
packages/ui/src/components/Datepicker/helpers.ts and use it here) so dates from
the same month number but different years are correctly flagged as out-of-month.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: dcc12ae4-ddd7-4a79-b8a9-1de6c6dd7cf3
📒 Files selected for processing (2)
packages/ui/src/components/Datepicker/Views/Days.tsxpackages/ui/src/components/Datepicker/theme.ts
| const isDisabled = | ||
| !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days)); | ||
| const isToday = isDateToday(currentDate); | ||
| const isOutOfMonth = !isMonthEqual(currentDate, viewDate) |
There was a problem hiding this comment.
Make isOutOfMonth year-aware.
Line 69 currently relies on isMonthEqual, which (per packages/ui/src/components/Datepicker/helpers.ts) checks only getMonth(). That can produce incorrect “outside” classification when month numbers match across different years. Also, this line is likely the Prettier warning source.
Proposed fix
- const isOutOfMonth = !isMonthEqual(currentDate, viewDate)
+ const isOutOfMonth =
+ currentDate.getMonth() !== viewDate.getMonth() ||
+ currentDate.getFullYear() !== viewDate.getFullYear();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const isOutOfMonth = !isMonthEqual(currentDate, viewDate) | |
| const isOutOfMonth = | |
| currentDate.getMonth() !== viewDate.getMonth() || | |
| currentDate.getFullYear() !== viewDate.getFullYear(); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/components/Datepicker/Views/Days.tsx` at line 69, The
isOutOfMonth calculation uses isMonthEqual which only compares month numbers and
therefore misclassifies dates in the same month number but different years;
update the logic where isOutOfMonth is computed (variable isOutOfMonth in
Days.tsx that compares currentDate and viewDate) to compare both month and year
(e.g., replace isMonthEqual with a helper that checks getMonth() and
getFullYear(), or add a new isSameMonthAndYear helper in
packages/ui/src/components/Datepicker/helpers.ts and use it here) so dates from
the same month number but different years are correctly flagged as out-of-month.
1 participant
Added support for additional class list paths in Tailwind CSS configuration for both Storybook and web applications.
Updated the Datepicker component to include a new 'outside' state for days that are not part of the current month, improving visual feedback for users.
Refactored the Datepicker's Days view to incorporate the new 'outside' state in the button class logic.
I have followed the Your First Code Contribution section of the Contributing guide
Summarize the changes made and the motivation behind them.
Reference related issues using
#followed by the issue number.If there are breaking API changes - like adding or removing props, or changing the structure of the theme - describe them, and provide steps to update existing code.
Summary by CodeRabbit