Skip to content

feat(datepicker): add outside days styling support#1674

Open
Fejjal94 wants to merge 1 commit intothemesberg:mainfrom
Fejjal94:fix/datepicker-outside-days-style
Open

feat(datepicker): add outside days styling support#1674
Fejjal94 wants to merge 1 commit intothemesberg:mainfrom
Fejjal94:fix/datepicker-outside-days-style

Conversation

@Fejjal94
Copy link
Copy Markdown

@Fejjal94 Fejjal94 commented May 3, 2026

Problem

Out-of-month days in the Datepicker render with the same
visual emphasis as in-month days, making the calendar
harder to scan.

Solution

  • Added outside style key to DatepickerViewsDaysTheme
  • Detect out-of-month days with isOutside variable
  • Apply opacity-40 text-gray-400 to out-of-month days
  • Selected days override the outside styling

Related Issue

Fixes #1647

Summary by CodeRabbit

  • New Features
    • Datepicker now visually distinguishes dates falling outside the current month view with reduced opacity and gray styling for better clarity.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 3, 2026

⚠️ No Changeset found

Latest commit: e6a86e3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link
Copy Markdown

vercel Bot commented May 3, 2026

Someone is attempting to deploy a commit to the Bergside Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 3, 2026

📝 Walkthrough

Walkthrough

The Datepicker component now supports visual de-emphasis of out-of-month days. The theme interface gains an outside property, default styling (opacity-40 text-gray-400) is applied, and the Days component conditionally applies this class to dates falling outside the currently viewed month.

Changes

Out-of-Month Day Styling

Layer / File(s) Summary
Data Shape / Theme Interface
packages/ui/src/components/Datepicker/Views/Days.tsx
DatepickerViewsDaysTheme.items.item adds outside: string property to support out-of-month day styling.
Theme Default Styling
packages/ui/src/components/Datepicker/theme.ts
outside CSS classes (opacity-40 text-gray-400) are defined for day items to visually de-emphasize dates outside the current month.
Core Implementation
packages/ui/src/components/Datepicker/Views/Days.tsx
isOutside logic detects when a day's month differs from the viewed month; theme.items.item.outside is conditionally applied when the day is outside and not selected.
Component Metadata
packages/ui/src/components/Datepicker/Views/Days.tsx
DatepickerViewsDays.displayName is set for debugging and dev tools.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • SutuSebastian

Poem

🐰 The days outside the month now fade with grace,
No longer bold, they gently dim their face.
With opacity-40, soft gray tones align,
The calendar now sparkles, clarity divine!
outside theme blooms—a hop, a skip, a win! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: adding styling support for out-of-month days in the Datepicker component.
Linked Issues check ✅ Passed The PR implementation fully addresses issue #1647 requirements: adds an 'outside' theme token, detects out-of-month days, applies opacity-40 text-gray-400 styling, and ensures selected styling overrides.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing out-of-month day styling in the Datepicker component as specified in the linked issue #1647.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

❤️ Share
Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Datepicker/Views/Days.tsx (1)

16-29: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Keep the new theme key backward-compatible.

Making outside required on the exported DatepickerViewsDaysTheme is a breaking type change for any consumer that provides a fully typed custom datepicker theme. Make it optional, or keep a default fallback so existing overrides continue to compile.

♻️ Suggested fix
 export interface DatepickerViewsDaysTheme {
   header: {
     base: string;
     title: string;
   };
   items: {
     base: string;
     item: {
       base: string;
       selected: string;
       disabled: string;
       today: string;
-      outside: string;
+      outside?: string;
     };
   };
 }
🤖 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` around lines 16 - 29,
The new required "outside" key on the exported DatepickerViewsDaysTheme is a
breaking change; make the property optional on DatepickerViewsDaysTheme
(outside?: string) and ensure the Days view uses a fallback when reading
theme.items.item.outside (e.g., default to the existing base/today/disabled
class) so existing custom themes that don't include outside continue to compile
and behave predictably; update any code that destructures or accesses
theme.items.item.outside in the Days component to use the fallback.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/ui/src/components/Datepicker/Views/Days.tsx`:
- Around line 16-29: The new required "outside" key on the exported
DatepickerViewsDaysTheme is a breaking change; make the property optional on
DatepickerViewsDaysTheme (outside?: string) and ensure the Days view uses a
fallback when reading theme.items.item.outside (e.g., default to the existing
base/today/disabled class) so existing custom themes that don't include outside
continue to compile and behave predictably; update any code that destructures or
accesses theme.items.item.outside in the Days component to use the fallback.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fc17130f-4982-4805-9000-2d41b94e07d1

📥 Commits

Reviewing files that changed from the base of the PR and between 0f526aa and e6a86e3.

📒 Files selected for processing (2)
  • packages/ui/src/components/Datepicker/Views/Days.tsx
  • packages/ui/src/components/Datepicker/theme.ts

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.

Support out-of-month days style

1 participant