Media: Refactor the MediaUploadButton to be agnostic to its rendered UI

[youknowriad]

We're using the MediaUploadButton in several places and the button triggering the modal is very different from a place to another:

• We use regular buttons sometimes
• We use icon buttons with tooltips and labels
• We use simple links
• We use images

To address all the use-cases we were slowly adding complexity to the render method of the MediaUploadButton. This PR solves this issue by relying on a render prop instead. That way we can reuse any other component we use regularly to render these buttons.

This PR also adds a README to document this component and deprecates the old component.

[youknowriad]

"Children as function" would also work but I personally prefer "render props". I prefer if children would have been always used as "arrays" to avoid confusion in the shape of Children in general.

[gziolo]

I heard in Egghead.io podcast that render props is easier to follow for the majority of developers. I prefer it over this awkward this.props.children(), too.

[gziolo]

Ha, nice! :)

[gziolo]

Copy and paste here :)

[gziolo]

Love this refactoring. In general, I'm always happy seeing when if statements can be replaced with the higher level logic to make the code more explicit about what is happening. This adds a few lines of code to the components using <MediaModal />, but it also makes them much more flexible and at the same time easier to understand! Nice work @youknowriad.

I will do some tests before accepting this PR.

[gziolo]

Tests also well 👍