Forward ref and box props to Pulsar to fix Tooltip rendering (#1565)

Author: brandongregoryscott

index.d.ts

@@ -2058,22 +2058,19 @@ export type PreOwnProps = TextOwnProps
 export type PreProps = PolymorphicBoxProps<'pre', PreOwnProps>
 export declare const Pre: BoxComponent<PreOwnProps, 'pre'>
 
-export interface PulsarProps {
+export interface PulsarOwnProps {
   /**
-   * The position the Tooltip is on.
+   * The position the pulsar is displayed
    */
   position?: Exclude<PositionTypes, 'top' | 'bottom' | 'left' | 'right'>
   /**
    * The size of the pulsar
    */
   size?: number
-  /**
-   * Called when the Pulsar is clicked
-   */
-  onClick?: PaneProps['onClick']
 }
 
-export declare const Pulsar: React.FC<PulsarProps>
+export type PulsarProps = PolymorphicBoxProps<'div', PulsarOwnProps>
+export declare const Pulsar: BoxComponent<PulsarOwnProps, 'div'>
 
 export interface RadioOwnProps {
   /**

package.json

@@ -50,7 +50,7 @@
     "size": "size-limit",
     "storybook": "start-storybook -p 6006",
     "test": "yarn lint && yarn tsd && yarn jest",
-    "test:watch": "yarn run test -- --watch",
+    "test:watch": "yarn jest --watch",
     "update-docs": "cd docs && yarn add evergreen-ui@latest --exact && git add package.json yarn.lock && git show-branch --no-name HEAD | grep -E 'v[0-9]+.[0-9]+.[0-9]+' && git commit --amend --no-edit || git commit -m \"Updated doc site evergreen version\""
   },
   "engines": {

src/pulsar/__tests__/Pulsar.test.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { mockRef } from '../../test/utils'
+import { Tooltip } from '../../tooltip'
+import { Pulsar } from '../src/Pulsar'
+
+const makePulsarFixture = (props = {}) => <Pulsar data-testid="Pulsar" {...props} />
+
+describe('Pulsar', () => {
+  it('should forward ref', () => {
+    const ref = mockRef()
+
+    render(makePulsarFixture({ ref }))
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+
+  it('should forward box props', () => {
+    const backgroundColor = 'red'
+
+    render(makePulsarFixture({ backgroundColor }))
+
+    expect(screen.getByTestId('Pulsar')).toHaveStyle({ backgroundColor })
+  })
+
+  it('should render Tooltip when wrapped and hovered', () => {
+    render(<Tooltip content="Hello world">{makePulsarFixture()}</Tooltip>)
+
+    userEvent.hover(screen.getByTestId('Pulsar'))
+
+    expect(screen.getByText('Hello world')).toBeInTheDocument()
+  })
+})

src/pulsar/src/Pulsar.js

@@ -1,6 +1,6 @@
-import React, { memo } from 'react'
+import React, { memo, forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { keyframes } from 'ui-box'
+import Box, { keyframes } from 'ui-box'
 import Positions from '../../constants/src/Position'
 import { Pane } from '../../layers'
 import { majorScale } from '../../scales'
@@ -21,7 +21,7 @@ const pulseAnimation = keyframes('pulseAnimation', {
 const animationTiming = 'cubic-bezier(0, 0, 0.58, 1)'
 const animationDuration = '1.8s'
 
-const pularAnimationStyles = {
+const pulsarAnimationStyles = {
   animation: `${pulseAnimation} ${animationDuration} ${animationTiming} both infinite`
 }
 
@@ -49,45 +49,49 @@ const getPositionProps = ({ position, size }) => {
   return props
 }
 
-export const Pulsar = memo(({ position = Positions.TOP_RIGHT, size = majorScale(1), onClick }) => {
-  const { colors } = useTheme()
-  const positionProps = getPositionProps({ position, size })
-  const outerPadding = size * 0.25
+export const Pulsar = memo(
+  forwardRef(({ position = Positions.TOP_RIGHT, size = majorScale(1), onClick, ...rest }, ref) => {
+    const { colors } = useTheme()
+    const positionProps = getPositionProps({ position, size })
+    const outerPadding = size * 0.25
 
-  return (
-    <Pane
-      position="absolute"
-      borderRadius="50%"
-      backgroundColor={colors.blue100}
-      boxSizing="content-box"
-      opacity={0.7}
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      padding={outerPadding}
-      {...pularAnimationStyles}
-      onClick={onClick}
-      cursor={onClick ? 'pointer' : undefined}
-      {...positionProps}
-    >
-      <Pane width={size} height={size} backgroundColor={colors.blue200} borderRadius="50%" opacity={0.7} />
-    </Pane>
-  )
-})
+    return (
+      <Pane
+        ref={ref}
+        position="absolute"
+        borderRadius="50%"
+        backgroundColor={colors.blue100}
+        boxSizing="content-box"
+        opacity={0.7}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        padding={outerPadding}
+        {...pulsarAnimationStyles}
+        onClick={onClick}
+        cursor={onClick ? 'pointer' : undefined}
+        {...positionProps}
+        {...rest}
+      >
+        <Pane width={size} height={size} backgroundColor={colors.blue200} borderRadius="50%" opacity={0.7} />
+      </Pane>
+    )
+  })
+)
 
 Pulsar.propTypes = {
   /**
-   * The position of the pulsar
+   * Composes the Box component as the base.
    */
-  position: PropTypes.oneOf([Positions.TOP_LEFT, Positions.TOP_RIGHT, Positions.BOTTOM_LEFT, Positions.BOTTOM_RIGHT]),
+  ...Box.propTypes,
 
   /**
-   * The width/height of the dot
+   * The position of the pulsar
    */
-  size: PropTypes.number,
+  position: PropTypes.oneOf([Positions.TOP_LEFT, Positions.TOP_RIGHT, Positions.BOTTOM_LEFT, Positions.BOTTOM_RIGHT]),
 
   /**
-   * Called when the Pulsar is clicked
+   * The width/height of the dot
    */
-  onClick: PropTypes.func
+  size: PropTypes.number
 }

src/pulsar/stories/index.stories.js

@@ -5,6 +5,7 @@ import { Button } from '../../buttons'
 import Position from '../../constants/src/Position'
 import { Popover } from '../../popover'
 import { minorScale } from '../../scales'
+import { Tooltip } from '../../tooltip'
 import { Link, Text } from '../../typography'
 import { Nudge } from '../src/Nudge'
 import { Pulsar } from '../src/Pulsar'
@@ -82,5 +83,11 @@ storiesOf('nudge', module)
         <Box>Pulsar Custom Size</Box>
         <Pulsar size={4} />
       </Box>
+      <Box position="relative">
+        <Box>Pulsar with Tooltip</Box>
+        <Tooltip content="Hello world">
+          <Pulsar />
+        </Tooltip>
+      </Box>
     </Box>
   ))