React-dates: Next/Previous month position styling is not applied when passing a custom icon

[derekaspaulding]

react-dates version
[email protected]

Describe the bug
When passing custom arrows, the position styling is not applied. In previous versions (I'm upgrading from 16.x to 18.4.1, so I'm not sure how far back this changed) the custom icon would still have the position set to the same as the default arrow icons. This would be less of an issue if there was a good way to select the individual DayPickerNavigation_button divs, but the only way that I could select them individually was with :nth-of-type. Also, if I position the icons themselves, I lose the focus states that the DayPickerNavigation_button divs handle, and if I also handle that myself, the tab index gets thrown off.

Source code (including props configuration)
This issue can be seen in the Storybook Documentation Example for custom icons

Screenshots/Gifs
Storybook Documentation Example for custom icons

Desktop (please complete the following information):

• OS: Mac OS X
• Browser: Chrome
• Version 71

Smartphone (please complete the following information):

• Device: NA
• OS: NA
• Browser NA
• Version NA

Is the issue reproducible in Storybook?
Storybook Documentation Example for custom icons

[ljharb]

@derekaspaulding it would help if you could try v17, and an earlier v18, to try to pin down where the behavior changed.

[derekaspaulding]

@ljharb It looks like the change happened in the 17.0.0 release. There was another slight change with the 17.2 release, and that is still the current behavior. I removed all my other custom styles and took some screenshots of the different versions

16.7.1 - This version is good

17.0.0 - 17.1.1

17.2.0 - 18.5.0

[dougmacknz]

I did a bit of investigation on this and found this was done by design in https://github.com/airbnb/react-dates/pull/1204. I've submitted a PR to add the missing styling to the stories, so that this doesn't appear as though it's a bug.

[ryanysyao]

Hello!
I am a react noob and I struggled with this for a while and just wanted to understand why attaching specific classes for custom "next" and "prev" buttons was removed - is this because it can be positioned with flex-box (space-between)? It still seems useful to have .btn-next and .btn-prev on the buttons themselves. Initially I thought you were supposed to pass an entire button component (with tabindex, classnames, etc.) into navPrev/navNext, but that only nested a button in the main button and still did not address position specifically as #1573 does for the stories. Thanks!

react-dates version: 20.2.4

[Kvek]

Is there an update on this issue?