feat(Button): allows button to render arbitrary component as its root

[ZacharyStair]

leverages a render prop to allow consumers to render whatever they want in place of button or anchor

closes #1890

[ZacharyStair]

@asudoh @joshblack what do you think?

[asudoh]

LGTM basically - Thank you for jumping in @ZacharyStair! Just one comment - Would you try merging the original <button> handling code and <a> handling code so your addition can fit well in there? BTW wanted to see with other reviewers on render name, in case they come up with one.

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit f6b925b

https://deploy-preview-1891--carbon-components-react.netlify.com

[ZacharyStair]

this proptype isn't strictly accurate; it could be either a function (i.e. a stateless functional react component), a React.component class, or even a string. it's complicated

edit: or maybe an Object, depending on what React.forwardRef returns

[asudoh]

@zachary String is a fair point. Given typeof class {} yields function, probably PropTypes.oneOfType([PropTypes.func, PropTypes.string])?

[asudoh]

Cool - Seems that we need to cover disabled and type for <button>.

[ZacharyStair]

fixed (sorry for the delay, i accidentally changed inputref to inputRef and was confused why all the tests were failing...)

[ZacharyStair]

the reason I picked render was a) it is getting to be a generally established convention across the react ecosystem (https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L95, https://reactjs.org/docs/render-props.html#use-render-props-for-cross-cutting-concerns) and b) it isn't specific to this component, so if other components want to do something like this they can also use render. One potential sticking point is components that use multiple different 'render props', but it seems like you'd still want to name the most common/general render prop render.

edit: i guess react-router uses both a component prop, which has to be an actual react component, or a render function that takes the props applied by the router and returns a component. It doesn't automatically mix in props to the provided component which I don't necessarily agree with

[dakahn]

Hi there 👋. Could you talk me through a specific use case for this functionality? Thanks!

[ZacharyStair]

@dakahn sure thing:

I mentioned briefly in the linked issue: We're using the Link component from react-router-dom (https://reacttraining.com/react-router/web/api/Link) that wraps and modifies the behavior of a normal <a> element, and we want to use the carbon Button component (styles, functionality, etc) but instead of passing in an href and getting a carbon-decorated <a> element we want to pass a Link and have that be decorated with the correct classes, etc.

// our code (once this pr gets merged)
import { Button } from 'carbon-components-react';
import { Link } from 'react-router-dom';
...
<Button render={Link} foo="foo" to="www.ibm.com">bar</Button>

renders

<Link className="bx--btn" foo="foo" to="www.ibm.com">bar</Link>

which renders

<a className="bx--btn" foo="foo" href="www.ibm.com">bar</a>

[dakahn]

Oh -- sorry to make you repeat yourself. Reading it now you're quite clear! 😸

[joshblack]

@ZacharyStair Instead of a render prop, what do you think of an as prop pattern? (Just thinking out loud)

For example:

// Element
<Button as="a" />
// Component
<Button as={Link} />

Then the internal implementation uses React.createElement(this.props.as) for the containing node type.

[asudoh]

Just one additional comment - BTW I think as makes sense to me, too.

[asudoh]

The default prop here seems to have caused some snapshot changes - Probably we can leave it undefined?

[ZacharyStair]

i think the jsx form might be clearer but either way works

[ZacharyStair]

it seems that the main difference is createElement automatically forwards refs, but we get an inputRef instead of a ref anyway so that part isn't strictly relevant

[asudoh]

LGTM 👍 - Thanks @ZacharyStair!

[joshblack]

Forgot to include this before, but as a reference for that as pattern we have something similar in UI Shell called Link: https://github.com/IBM/carbon-components-react/blob/master/src/components/UIShell/Link.js

In this case, it uses element but I think we will change that before stable to as as noted above.

[carbon-bot]

🎉 This PR is included in version 6.98.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀