Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added caption layout for both dropdowns and buttons #1678

Merged
merged 4 commits into from
Feb 12, 2023

Conversation

seanockert
Copy link
Contributor

@seanockert seanockert commented Feb 3, 2023

Context

The captionLayout option currently accepts EITHER month/year dropdowns OR prev/next month navigation buttons, but not both. We need both navigation controls for our app.

This option was available in v7 but not in v8

Other users would also like to have this option: https://github.com/gpbl/react-day-picker/issues/1663

Analysis

The simplest way is to add a new option for captionLayout.

I considered passing an array eg. captionLayout={['dropdowns', 'buttons']} but this would be a breaking change and add complexity. I kept it as a string and added both option.

Solution

  • Added captionLayout="both" to show both month/year dropdowns and prev/next month buttons
  • Added test files
  • Updated docs
  • It's a little awkward that we need to conditionally hide the captionLabel in CaptionNavigation.tsx. I can rewrite this component if you prefer
react-day-picker-both-captions-interaction.mov

Copy link
Owner

@gpbl gpbl left a comment

Choose a reason for hiding this comment

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

Hey thanks for your PR: I've been testing it and works great.

I still see the issue with the width of the caption. If I propose some changes to this PR, would you have the time to review them? Thanks.

- Added `captionLayout="dropdown-buttons"` to show both month/year dropdowns and prev/next month buttons
- Added test files
- Related feature request: https://github.com/gpbl/react-day-picker/issues/1663
@gpbl gpbl merged commit c83975e into gpbl:master Feb 12, 2023
@7PH
Copy link
Contributor

7PH commented Feb 13, 2023

Thank you guys for adding this feature! We are very interested to start using it, do you know when you plan on publishing the next version on npm @gpbl ?

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.

3 participants