feat: ButtonWrapper prop in Button to customise rendering

[jsomsanith]

What is the problem this PR is trying to solve?
This PR resolve PR #36.
The Link component has a LinkWrapper feature, that takes a component to render, adding a Link style on it.
We want the same feature for button.

What is the chosen solution to this problem?
Button component now has a ButtonWrapper props, allowing to write that :

<Button ButtonWrapper={CustomButton} appearance="primary">
        Primary
</Button>

<Button ButtonWrapper={CustomAnchor} appearance="primary" href="http://storybook.js.org">
        Primary
</Button>

This will render CustomButton/CustomAnchor applying the Button style

[domyen]

Awesome! Can you update the Button story so folks can find out about the usage?

[jsomsanith]

Oh, I added 2 stories, guess I haven’t pushed them

[jsomsanith]

That’s it :D I just pushed

[kylesuss]

First off @jsomsanith , thanks so much for looking into this & the speed of implementation. Much appreciated!

I pushed a small commit to this branch:

4379c88

We have this helper that we are using for the Link called StoryLinkWrapper -- it is meant to represent a component that is similar to a React Router Link, Gatsby Link, Next Link, etc. When I update the new ButtonWrapper anchor stories to use this component, we hit those errors that some non-standard anchor props are being passed down:

This only seems to happen w/ a tags and to be honest, I am not sure why it didn't happen with the example styled.a that you provided. That said, I have encountered these errors a lot w/ the Link component and LinkWrapper so I think it makes sense to look into them now before we merge this if that's ok.

I think it means having to do something similar to this:

https://github.com/storybookjs/design-system/blob/master/src/components/Link.js#L161-L167

Where you ensure that the props you need make it to the button styles (for appearance, loading state, etc.), but don't let them make it all the way down to the ButtonWrapper. This fixed our issues w/ the Link and LinkWrapper so it should work here in theory as well, but def open to alternatives as well if you know of any.

[jsomsanith]

@kylesuss fixed, and I added an optimisation: we memoize the styled button wrapper, instead of creating a new component at each render. Everytime it’s a new component, React considers it as a component change, the old will always be unmounted, and a new one mounted instead.

[kylesuss]

Looks great @jsomsanith ! Thanks for making those updates to suppress the annoying PropTypes errors and also for another great contribution.

[kylesuss]

Ah cool! Didn't realize you could do this same destructuring technique using withComponent.

[kylesuss]

Nice idea w/ the memoization 👌

[kylesuss]

🚀 PR was released in v0.0.35 🚀