Expose refs for all components

[dcocchia]

Many of our components do not set a ref on their main output, so users of the library will be forced to use findDOMNode to do things like focus on a button or input.

We should add a ref to each component to help with this.

[dcocchia]

I think a nice way to do this would be to use the new ref forwarding api, use the same ref name for all components, and add tests to ensure we don't break that contract/api. It would require latest React, but maybe we could add in a fallback if the forwarding method isn't supported?

[tmarshall]

@dcocchia sounds perfect. That's why I haven't started it, actually. Been hesitant to add in logic that may become moot once forwarded refs are in place.

[mmarcuccio]

Any of the components using Radium will need to take this issue into consideration. https://github.com/FormidableLabs/radium/issues/1010

Ideally the Radium and withTheme higher order components would forward refs. This would maximize our code reusability and reduce complexity.

• withTheme (supports ref forwarding)
  • Radium (supports ref forwarding)
    • Snacks Component (supports ref forwarding)

However, due to this issue we need to use React.forwardRef on the final export instead and pass the ref down the tree via a different property name (such as forwardRef). At the leaf level we can then assign the component's ref property to the value from props.forwardRef.

• React.forwardRef
  • withTheme
    • Radium
      • Snacks Component ref={props.forwardRef}

[mmarcuccio]

I am putting my work on hold while the Radium team is investigating. If Radium ends up not supporting forward refs, we should discuss using the innerRef strategy that many other component libraries use.

[mmarcuccio]

Forwardref is not going to be compatible with Radium. Let's move forward with the innerRef strategy.