-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
Add modifiers and expose styling opportunities for certain user states #1608
Add modifiers and expose styling opportunities for certain user states #1608
Conversation
1c73e64
to
d847a91
Compare
@ljharb will add tests for the modifiers but just wanted to get your initial thoughts on these modifiers. they're super helpful for our designs and believe they could provide value to others as well :) |
yes this would be very useful! |
…or27/react-dates into add-after-hovered-start-class
Hey @majapw @ljharb! Added tests to increase developer confidence and document the added modifiers functionality. Let me know if there's anything I can do to help push this along. Would love to get this into |
00006bd
to
8d45905
Compare
8d45905
to
b8fab11
Compare
Hey @majapw @noratarano @nkinser, merged in master and fixed up a few more edge cases + added tests for them. It's quite a beefy PR so happy to jump on a video call to pair review on this if that would be easier! 😁 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! Thanks so much @krissalvador27
Hi @krissalvador27 Any thought on why this one test may be failing on master? https://travis-ci.org/airbnb/react-dates/jobs/606807210?utm_medium=notification&utm_source=github_status Don't want to publish until that's settled:
|
Perhaps daylight savings time? The PR was merged after, the PR tests last ran before. |
What an interesting bug 😄. @ljharb that definitely sounds possible, going to look into this now. |
FYI have a fix for it here #1854 🔨 |
As result of https://github.com/airbnb/react-dates/pull/1608/files#diff-12794b13879aed4e3ed252d60cd0dd92R19 changes now we have: issue |
Please file a new issue for new issues. |
Added a few useful modifiers & classes that expose some neat states that tend to happen when using the Calendar. I needed these to style my Calendar with rounded edges for start and end date (similar to #1527). Also let me know if there are tests I should add :)
Enhancements
Added
before-hovered-end
classafter-hovered-start
providing a visual cue to hover after the selected start date for an end date, this cues users to hover before the selected end date for a start datehovered-span
. Example below has it styled with a border radiusAdded
after-hovered-start
classhovered-span
(https://github.com/airbnb/react-dates/blob/master/src/utils/getCalendarDaySettings.js#L19)hovered-span
. Example below has it styled with a border radiusAdd
no-selected-start-before-selected-end
Add
selected-start-no-selected-end
andselected-end-no-selected-start
CalendarDay__selected_end
andCalendarDay__selected_end
which needs to have a border radius when both are selected but should be a circle when waiting to be part of a selected date spanOther
Conclusion