`forwardedRef` is used instead of `ref`

[bedrich-schindler]

I would like to clarify following:

• ref is prop used to reference origin HTML component.
• forwardedRef is prop used in many our components, but it is supposed to be used as internal implementation only and must not be used as prop.

The thing is that we have HoC src/lib/components/withForwardedRef.jsx that wraps original component with React.forwardRef. This redirects ref to forwardedRef, so every component wrapped by this HoC accepts ref, not forwardedRef.

export default (WrappedComponent) => {
  const withForwardedRef = (props, ref) => (
    <WrappedComponent {...props} forwardedRef={ref} />
  );

  withForwardedRef.displayName = `withForwardedRef(${WrappedComponent.name || WrappedComponent.name})`;

  return React.forwardRef(withForwardedRef);
};

export const Button = ({
  forwardedRef,
  ...restProps
}) => {

export const ButtonWithGlobalProps = withForwardedRef(withGlobalProps(Button, 'Button'));

export default ButtonWithGlobalProps;

First problem is that API shows forwardedRef instead of ref:

Other problem is that code examples contain different kind of imports. Sometimes default export (the correct one) is used, sometimes named export is used (the wrong one). It results in fact that almost all examples contain forwardedRef, but ref must be used in implementation, otherwise it won't work.

[mbohal]

Maybe we could change the implementation to remove forwardedRef from props and pass it by context.

We already use this for internal things in:

• form fields in FormLayout (src/lib/components/FormLayout/FormLayoutContext.js)
• Button in ButtonGroup (src/lib/components/ButtonGroup/ButtonGroupContext.js)

[mbohal]

Good catch @bedrich-schindler!

[bedrich-schindler]

@mbohal Yeah, it should work. I would try it this way, if @adamkudrna agrees

[adamkudrna]

Please don't forget to update docs, e.g. in Popover:

[mbohal]

Aslo we need to make sure that the transferProps position is correct.