Skip to content

Components: Add styles for outside days in Calendar components#76199

Merged
ciampo merged 3 commits into
WordPress:trunkfrom
yuliyan:update/date-calendar-outside-days-styles
Mar 6, 2026
Merged

Components: Add styles for outside days in Calendar components#76199
ciampo merged 3 commits into
WordPress:trunkfrom
yuliyan:update/date-calendar-outside-days-styles

Conversation

@yuliyan
Copy link
Copy Markdown
Contributor

@yuliyan yuliyan commented Mar 5, 2026

What?

Fixes #76150

Expose showOutsideDays and fixedWeeks on DateCalendar and DateRangeCalendar, add styling for outside-month days (lighter text), and add a Storybook story for the outside days case.

Why?

Consumers need to optionally show days from adjacent months in the grid and keep a fixed number of weeks so layout doesn't jump between months. These map to react-day-picker's showOutsideDays and fixedWeeks. They were only in COMMON_PROPS and not in the public TypeScript props. Outside days also need a clear but de-emphasized style when shown.

How?

  • Add definitions for showOutsideDays and fixedWeeks to the BaseProps.
  • Add a custom class name 'components-calendar__day--outside for the outside modifier in constants.ts.
  • Add lighter gray text styles for .components-calendar__day--outside.
  • Add a story with the fixedWeeks and showOutsideDays props.

Testing Instructions

  1. Run Storybook: npm run storybook:dev from repo root.
  2. Go to Components → Selection & Input → Time & Date → DateCalendar.
  3. Open the WithOutsideDays story: current month is shown with adjacent-month days in the grid in a lighter gray; grid has a fixed 6 weeks.
  4. In the same story (or Default), use the month navigation and confirm outside days still render with the lighter style when changing months.
  5. Optionally use the Controls panel to toggle showOutsideDays and fixedWeeks and confirm behavior.

Testing Instructions for Keyboard

Screenshots or screencast

Before After
N/A noNqLOnFFojDDZjn

@yuliyan yuliyan requested review from a team and ajitbohra as code owners March 5, 2026 14:29
@github-actions github-actions Bot added the [Package] Components /packages/components label Mar 5, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 5, 2026 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yuliyan <yuliyan@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: poligilad-auto <poligilad@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@yuliyan yuliyan force-pushed the update/date-calendar-outside-days-styles branch from 184b4a6 to 22a28be Compare March 5, 2026 14:36
@yuliyan yuliyan mentioned this pull request Mar 5, 2026
Closed
ciampo
ciampo reviewed Mar 5, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@ciampo ciampo left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Thank you for workng on this!

The approach is looking good overall. We should make the same changes to the DateRangeCalendar component, too.

We will also need to add a CHANGELOG entry for the @wordpress/components package

Comment thread packages/components/src/calendar/style.scss

// Outside month days (visible when showOutsideDays is true): use a lighter text color.
.components-calendar__day--outside {
color: $components-color-gray-600;
Copy link
Copy Markdown
Contributor

@ciampo ciampo Mar 5, 2026

Choose a reason for hiding this comment

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

We may potentially want to use the same shade of gray that we use for disabled days (ie. $components-color-gray-400), althouth this is something to confirm with @WordPress/gutenberg-design folks

Copy link
Copy Markdown
Contributor Author

@yuliyan yuliyan Mar 5, 2026

Choose a reason for hiding this comment

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

I went with $components-color-gray-600 since it looked closer to the shade used in the proposal #76150. I also thought it might be better to keep it different from the disabled days, since outside days are still clickable and could themselves be disabled. In that case, using a different base shade might help distinguish the two states.

Happy to adjust if we get a confirmation from the @WordPress/gutenberg-design folks.

Copy link
Copy Markdown
Contributor

@ciampo ciampo Mar 6, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Sounds good. We can probably merge as-is and update the color later, if needed.

Potentially we may also consider showing the outer days with the same text color as regular non-disabled days. I'm afraid that currently the different is too subtle and could cause confusion.

Screenshot 2026-03-06 at 11 31 23

@ciampo ciampo added the [Type] Enhancement A suggestion for improvement. label Mar 5, 2026
@yuliyan
Copy link
Copy Markdown
Contributor Author

yuliyan commented Mar 5, 2026 •
edited
Loading

@ciampo, thanks for the review!

I added the changelog entry.

The approach is looking good overall. We should make the same changes to the DateRangeCalendar component, too.

The DateRangeCalendar shares the same styles and BaseProps as the DateCalendar, so the changes to the fixedWeeks and showOutsideDays should already by available in both components. Or maybe I'm missing something?

@yuliyan yuliyan force-pushed the update/date-calendar-outside-days-styles branch from a7b9a85 to 2c763d6 Compare March 6, 2026 09:09
@yuliyan yuliyan requested a review from ciampo March 6, 2026 09:09
@ciampo
Copy link
Copy Markdown
Contributor

ciampo commented Mar 6, 2026

The DateRangeCalendar shares the same styles and BaseProps as the DateCalendar, so the changes to the fixedWeeks and showOutsideDays should already by available in both components. Or maybe I'm missing something?

Right—I guess the main thing missing is a Storybook example for the DateRangeCalendar, which will help us understand if range selection (including styles) are working well or need more tweaks when the two props are enabled

@yuliyan
Copy link
Copy Markdown
Contributor Author

yuliyan commented Mar 6, 2026

Right—I guess the main thing missing is a Storybook example for the DateRangeCalendar, which will help us understand if range selection (including styles) are working well or need more tweaks when the two props are enabled

@ciampo, makes sense - added it in 9f1a135.

ciampo
ciampo approved these changes Mar 6, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@ciampo ciampo left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Looks like everything is working as expected, even though things get a bit awkward when showOutsideDays and fixedWeeks are enabled, and numberOfMonths is 2 or more.

One date selected in DateCalendar:

Screenshot 2026-03-06 at 17 36 35

A date range selected in DateRangeCalendar:

Screenshot 2026-03-06 at 17 37 03

I guess we can merge and tweak as needed. Thank you again, @yuliyan !

@ciampo ciampo enabled auto-merge (squash) March 6, 2026 16:41
@ciampo ciampo merged commit ef271cb into WordPress:trunk Mar 6, 2026
48 of 49 checks passed
@github-actions github-actions Bot added this to the Gutenberg 22.8 milestone Mar 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ciampo ciampo ciampo approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees

@yuliyan yuliyan

Labels

[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 22.8

Development

Successfully merging this pull request may close these issues.

DateCalendar: Prevent layout shift when navigating between months

2 participants

@yuliyan @ciampo