Add customCloseIcon prop

[moonboots]

@majapw @ljharb

Adds a customCloseIcon prop to allow overriding the default <CloseButton />. I matched the behavior of customArrowIcon: default prop of null, fallback to original component inside render, and a wrapping css class.

[coveralls]

Coverage decreased (-5.04%) to 81.802% when pulling 48e136c on moonboots:custom-close-icon into 04d08d4 on airbnb:master.

[majapw]

This class name is wrong. You're not inside the input.

[majapw]

This can just be X no?

[majapw]

This should fail... why would it be under .DateRangePickerInput__calendar-icon? Why isn't this failing?

[majapw]

I'm concerned about the test, plus we need parallel tests for the SingleDatePicker components.

[coveralls]

Coverage increased (+0.3%) to 82.318% when pulling 09fd248 on moonboots:custom-close-icon into 43badcf on airbnb:master.

[coveralls]

Coverage increased (+0.1%) to 82.318% when pulling 3f95071 on moonboots:custom-close-icon into 9704b74 on airbnb:master.

[coveralls]

Coverage increased (+0.1%) to 82.318% when pulling 3f95071 on moonboots:custom-close-icon into 9704b74 on airbnb:master.

[coveralls]

Coverage increased (+0.1%) to 82.318% when pulling 3f95071 on moonboots:custom-close-icon into 9704b74 on airbnb:master.

[coveralls]

Coverage increased (+0.1%) to 82.146% when pulling 0a31762 on moonboots:custom-close-icon into 130e542 on airbnb:master.

[moonboots]

@majapw I've added a corresponding spec for SingleDatePicker. The spec you pointed out wasn't failing because it accidentally didn't have any assertions, only a dangling expect(..);, fixed now.

[majapw]

You now have the same problem here in this spec...

[moonboots]

Oops, fixed

[coveralls]

Coverage increased (+0.1%) to 82.146% when pulling 9f18afd on moonboots:custom-close-icon into 130e542 on airbnb:master.

[coveralls]

Coverage increased (+0.1%) to 82.146% when pulling 9f18afd on moonboots:custom-close-icon into 130e542 on airbnb:master.

[zeemawn]

Correct me if I'm wrong, but shouldn't this whole thing rather be called "custom CLEAR icon"?
The 'X' might look like a close-icon, but its function is to clear the dates, isn't it?
(Besides that, it would be nice to have an actual close-button)

[ljharb]

It closes the datepicker, it doesn't clear the dates.

[majapw]

It actually does both... We overload the icon in use, so uh, I get the Q

[ljharb]

Lol well there you go

[ljharb]

@majapw can we unoverload them?

[interactivejohn]

I ran into the same issue as @zeemawn. I spent a good couple hours thinking that I could add a custom close icon to the default state, only to find out that it was only implemented for the showClearDate and withFullScreenPortal props. Maybe something can be added to the README that explains where the customCloseIcon is implemented? Meanwhile I will fork this package and start working on implementing a showDefaultCloseIcon for the DatePicker as requested above (I also need it for a project).