Tooltip no longer works other components, just Buttons

[tomzweb]

On the latest version (0.34.1) of big design, using a Text or Badge component no longer works as a trigger for the Tooltip. I upgraded from 0.30.2 which worked fine. However, 0.34.1 now returns the below warning and no tooltip is displayed.

_vendor.js:183048 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Reference`._ 

To reproduce the bug, use the Text or Badge component as the trigger:

<Tooltip placement='auto' trigger={<Text>Hello</Text>}>
   HELLO FROM TOOLTIP
</Tooltip>

I would expect no error and the tooltip to show as it previously did.

However, using a Text as a trigger resolves the warning and displays the tooltip.

[chanceaclark]

Thanks @tomzweb for reporting this!

On the surface, it looks like we just need to forward the ref to our Text component.

I upgraded from 0.30.2 which worked fine.

This sounds like a transient dependency caused it to break. I tried to replicate this in a CodeSandbox and was still getting the same issue in 0.30.2 🤔 If you could replicate it working in a CodeSandbox, that'd be super helpful to understand the underlying issue of why it was working before 🙏

[tomzweb]

@chanceaclark 0.30.2 working here: https://codesandbox.io/s/silent-rain-kxqcdb?file=/src/App.tsx using React 18 and styled-components 5.3.6. Though I can confirm 0.30.2 was also working on our project using React 17 and styled-components 5.3.5

And 0.34.1 here: https://codesandbox.io/s/amazing-joana-z5th59?file=/src/App.js which is showing the error in the console log.

[gbspecapedra]

Same issue here using a Badge or Text component as the trigger.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Reference`.
Badge@http://localhost:2000/static/js/bundle.js:29870:11

"react": "^18.2.0",
"@bigcommerce/big-design": "^0.36.0",