segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.38k stars 830 forks source link

Tooltip not rendered when wrapping Pulsar #1564

Closed brandongregoryscott closed 1 year ago

brandongregoryscott commented 1 year ago

Right now this results in a console error and no Tooltip being rendered on hover:

<Tooltip content="Example tooltip content">
  <Pulsar position={Position.TOP_LEFT} />
</Tooltip>
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 `Stack`.
    at eval (https://pvtkqq.csb.app/node_modules/evergreen-ui/esm/pulsar/src/Pulsar.js:53:30)
    at Stack (https://pvtkqq.csb.app/node_modules/evergreen-ui/esm/stack/src/Stack.js:13:23)
    at Positioner (https://pvtkqq.csb.app/node_modules/evergreen-ui/esm/positioner/src/Positioner.js:50:22)
    at Tooltip (https://pvtkqq.csb.app/node_modules/evergreen-ui/esm/tooltip/src/Tooltip.js:60:33)
    at div
    at eval (https://pvtkqq.csb.app/node_modules/ui-box/dist/src/box.js:21:11)
    at Pane (https://pvtkqq.csb.app/node_modules/evergreen-ui/esm/layers/src/Pane.js:57:31)
    at div
    at eval (https://pvtkqq.csb.app/node_modules/ui-box/dist/src/box.js:21:11)
    at Pane (https://pvtkqq.csb.app/node_modules/evergreen-ui/esm/layers/src/Pane.js:57:31)
    at App

I think the Pulsar component needs to forward its ref and additional box props that are cloned onto it by the Tooltip component (i.e. onMouseEnter, onMouseLeave)

_Originally posted by @brandongregoryscott in https://github.com/segmentio/evergreen/pull/1558#discussion_r1039007519_

brandongregoryscott commented 1 year ago

Resolved with #1565