Add modifiers and expose styling opportunities for certain user states

[krissalvador27]

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 class

• Similar to after-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 date
  
• Exposing the class allows users to style that CalendayDay differently than a hovered-span. Example below has it styled with a border radius
  

Added after-hovered-start class

• This modifier already exists, but not as an exposed class. It's used to treat the day after start as a hovered-span (https://github.com/airbnb/react-dates/blob/master/src/utils/getCalendarDaySettings.js#L19)
• Exposing the class allows users to style that CalendayDay differently than a hovered-span. Example below has it styled with a border radius
• In Action
  

Add no-selected-start-before-selected-end

• This modifier is true when user has selected an end date but no start date
• Exposing this class allows users to style that CalendarDay when hovering backwards from the selected end date.
• WITHOUT the modifier and class
  
• WITH the modifier and class
  

Add selected-start-no-selected-end and selected-end-no-selected-start

• This modifier is true when user has selected a start date/end date but no end date/start date
• Exposing this class allows users to style CalendarDay where only one date is currently picked
• WITHOUT the modifier and class I can only style selected start and end via CalendarDay__selected_end and CalendarDay__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 span
  
• WITH the modifier and class I can style selected start and end based on current user state (has both selected & has one but not the other selected). When both are selected then there is border radius for their respective sides, but when only one is selected show only a circle
  

Other

• Adds isPreviousDay helper

Conclusion

• Exposes style opportunities when a
  1. user has selected a start date but not an end date yet
  2. user has selected an end date but not a start date yet
  3. user has selected end date and is hovering on end date
  4. user has selected end date and is hovering on start date
• Makes react-dates even more customizable
• Solves issue Is there a way to style the '.CalendarDay__selected_start' differently when there is a range selected or hovered? #1527

[coveralls]

Coverage increased (+0.006%) to 84.964% when pulling 84946fe on krissalvador27:add-after-hovered-start-class into 2bf76ad on airbnb:master.

[krissalvador27]

@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 :)

[krissalvador27]

@ljharb @majapw any initial thoughts on these modifiers? :)

[krissalvador27]

Hey @ljharb @majapw. Following up on this and if there's anything I need to add/do to have this considered for merge?

Let me know 😄

[blooies]

yes this would be very useful!

[krissalvador27]

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 react-dates so I can style the component in a way that fits Spotify's look and feel as well as allow other devs and designers to customize the datepicker to fit their needs. 😄

[krissalvador27]

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! 😁

[majapw]

Looks great! Thanks so much @krissalvador27

[majapw]

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:

1) DayPickerRangeController #componentWillReceiveProps modifiers no-selected-start-before-selected-end start date has changed, previous start date is [secure]y, start and end date is truthy calls deleteModifier with `no-selected-start-before-selected-end` if day is before selected end date:
      AssertionError: expected 92 to equal 91
      + expected - actual
      -92
      +91
      
      at Context.equal (test/components/DayPickerRangeController_spec.jsx:1632:69)

[ljharb]

Perhaps daylight savings time? The PR was merged after, the PR tests last ran before.

[krissalvador27]

What an interesting bug 😄. @ljharb that definitely sounds possible, going to look into this now.

[krissalvador27]

FYI have a fix for it here #1854 🔨

[PitBeast]

As result of https://github.com/airbnb/react-dates/pull/1608/files#diff-12794b13879aed4e3ed252d60cd0dd92R19 changes now we have: issue

[ljharb]

Please file a new issue for new issues.