Dropdown arrow is not stylable on high-res (without deep hacking)

[johanatan]

Due to background-image being marked !important in the media section of re-com.css, all attempts to style this control via stylesheets with a custom image for the dropdown arrow are failing. I had to resort to the following 'deep hacking' in componentDidMount to achieve the styling.

(.setProperty (aget b "style") "background-image" "image.png" "important")

where b is defined as:

(.item (.getElementsByTagName (.getDOMNode this) "b") 0)

This poking into the implementation of the dropdown to pull out a b is obviously not ideal.

See Issue #99 for similar situation.

[MawiraIke]

As of re-com 2.13.2, this is not possible even with the addition of parts keyword argument which can be used to solve similar issues like #99 . This is because the drop down arrow is not exposed to the parts supplied to single-dropdown. I suggest adding a new parts keyword called arrow which can be used to style or add classes to the dropdown arrow. I have attached the code to add this feature below.

[MawiraIke]

Example usage at #318 (comment)