Tooltip now supports render props OR cloneElement

Also updates CHANGELOG for 0.7.32

Author: Luke Bowerman

CHANGELOG.md

@@ -29,10 +29,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Banner` fontSize adjusted and external margin removed
 - `Button` and `ButtonOutline` horizontal padding on increased, decreased for `ButtonTransparent`
 - `DateTimeFormat` uses date-fns to format human-readable date string (rather than built-in browser default functionality)
-- `useTooltip` includes a generated id (or passed-in prop value) for the resulting tooltip in the return object
+- `Tooltip`
+  - Now offers a cloneElement version as well as the existing render props version
+  - Documentation update to reflect new `children` structure
+  - now supports `aria-describedby`
+  - `useTooltip` includes a generated id (or passed-in prop value) for the resulting tooltip in the return object
 - `MenuDisclosure`, `Banner`, `IconButton`, `ModalHeader` explicitly use their id props to either provide `useTooltip` with an id or to provide another component that uses `useTooltip` with an id to generate the tooltip's id
 - Icon used for error states in inputs changed to `CircleInfo`
-  - Doing this means that tooltip trigger elements can now have an `aria-describedby` property with said id as the value
 - Support Warning icon display on Select and SelectMulti inputs
 - Refactor use of InputSearch to support more flexible layouts
 - Use Babel for building Monorepo ES artifacts

packages/components/src/Button/IconButton.test.tsx

@@ -191,14 +191,7 @@ test('IconButton built-in tooltip defers to outer tooltip', () => {
   const label = 'Mark as my Favorite'
   const { container, getByText, getByTitle } = renderWithTheme(
     <Tooltip content={tooltip}>
-      {(tooltipProps) => (
-        <IconButton
-          tooltipDisabled
-          label={label}
-          icon="Favorite"
-          {...tooltipProps}
-        />
-      )}
+      <IconButton tooltipDisabled label={label} icon="Favorite" />
     </Tooltip>
   )
 

packages/components/src/Calendar/CalendarNav.tsx

@@ -92,17 +92,11 @@ export const CalendarNav: FC<NavbarElementProps> = ({
       </NextButtonWrapper>
 
       <Tooltip content="View Current Month">
-        {(tooltipProps) => (
-          <ButtonTransparent
-            {...tooltipProps}
-            onClick={handleLabelClick}
-            color="neutral"
-          >
-            <Heading as={headingSizeMap(size)} fontWeight="semiBold">
-              {localeUtils.formatMonthTitle(month, locale)}
-            </Heading>
-          </ButtonTransparent>
-        )}
+        <ButtonTransparent onClick={handleLabelClick} color="neutral">
+          <Heading as={headingSizeMap(size)} fontWeight="semiBold">
+            {localeUtils.formatMonthTitle(month, locale)}
+          </Heading>
+        </ButtonTransparent>
       </Tooltip>
 
       <PrevButtonWrapper>

packages/components/src/Tooltip/Tooltip.test.tsx

@@ -55,23 +55,23 @@ describe('Tooltip', () => {
   test('snapshot', () => {
     assertSnapshotShallow(
       <Tooltip content="Hello world" isOpen>
-        {(tooltipProps) => <Button {...tooltipProps}>Example</Button>}
+        <Button>Example</Button>
       </Tooltip>
     )
   })
 
   test('Tooltip can hide its arrow', () => {
     assertSnapshotShallow(
       <Tooltip content="Hello world" arrow={false} isOpen>
-        {(tooltipProps) => <Button {...tooltipProps}>Example</Button>}
+        <Button>Example</Button>
       </Tooltip>
     )
   })
 
   test('trigger: open on mouseover, close on mouseout', () => {
     const tooltip = mountWithTheme(
       <Tooltip content="Hello world">
-        {(tooltipProps) => <Button {...tooltipProps}>Test</Button>}
+        <Button>Test</Button>
       </Tooltip>
     )
 
@@ -89,7 +89,7 @@ describe('Tooltip', () => {
   test('close on surface mouseout', () => {
     const tooltip = mountWithTheme(
       <Tooltip content="Hello world" isOpen>
-        {(tooltipProps) => <Button {...tooltipProps}>Test</Button>}
+        <Button>Test</Button>
       </Tooltip>
     )
 
@@ -104,7 +104,7 @@ describe('Tooltip', () => {
   test('contains content', () => {
     const tooltip = mountWithTheme(
       <Tooltip content="Hello world">
-        {(tooltipProps) => <Button {...tooltipProps}>Test</Button>}
+        <Button>Test</Button>
       </Tooltip>
     )
 
@@ -117,7 +117,7 @@ describe('Tooltip', () => {
   test('open initially, collapse on mouseout', () => {
     const tooltip = mountWithTheme(
       <Tooltip content="Hello world" isOpen>
-        {(tooltipProps) => <Button {...tooltipProps}>Test</Button>}
+        <Button>Test</Button>
       </Tooltip>
     )
 
@@ -134,7 +134,7 @@ describe('Tooltip', () => {
   test('supports styling props', () => {
     const tooltip = mountWithTheme(
       <Tooltip content="Hello world" width="20rem" textAlign="right">
-        {(tooltipProps) => <Button {...tooltipProps}>Test</Button>}
+        <Button>Test</Button>
       </Tooltip>
     )
 
@@ -153,9 +153,7 @@ describe('Tooltip', () => {
   test('tooltip can exceed bounds of containing overlay', () => {
     const tooltip = (
       <Tooltip content="Great knowledge here!" isOpen>
-        {(tooltipProps) => (
-          <Box {...tooltipProps}>I wish I knew more about this...</Box>
-        )}
+        <Box>I wish I knew more about this...</Box>
       </Tooltip>
     )
 
@@ -171,4 +169,40 @@ describe('Tooltip', () => {
 
     assertSnapshotShallow(popover)
   })
+
+  test('Render props version works', () => {
+    const tooltip = mountWithTheme(
+      <Tooltip content="Hello world">
+        {(props) => <Button {...props}>Test</Button>}
+      </Tooltip>
+    )
+
+    const trigger = tooltip.find(Button)
+
+    trigger.simulate('mouseover', mouseEventSimulator)
+    const surface = tooltip.find(OverlaySurface)
+    expect(surface.exists()).toBeTruthy()
+
+    trigger.simulate('mouseout', mouseEventSimulator)
+    const postMouseoutSurface = tooltip.find(OverlaySurface)
+    expect(postMouseoutSurface.exists()).toBeFalsy()
+  })
+
+  test('Render props version works', () => {
+    const tooltip = mountWithTheme(
+      <Tooltip content="Hello world">
+        {(props) => <Button {...props}>Test</Button>}
+      </Tooltip>
+    )
+
+    const trigger = tooltip.find(Button)
+
+    trigger.simulate('mouseover', mouseEventSimulator)
+    const surface = tooltip.find(OverlaySurface)
+    expect(surface.exists()).toBeTruthy()
+
+    trigger.simulate('mouseout', mouseEventSimulator)
+    const postMouseoutSurface = tooltip.find(OverlaySurface)
+    expect(postMouseoutSurface.exists()).toBeFalsy()
+  })
 })

packages/components/src/Tooltip/Tooltip.tsx

@@ -27,7 +27,15 @@
 import { CustomizableAttributes } from '@looker/design-tokens'
 import { TextAlignProperty } from 'csstype'
 import { Placement } from '@popperjs/core'
-import React, { useMemo, useState, Ref, FC, ReactNode } from 'react'
+import React, {
+  cloneElement,
+  FC,
+  isValidElement,
+  useMemo,
+  useState,
+  ReactNode,
+  Ref,
+} from 'react'
 import { omit } from 'lodash'
 import { ModalContext } from '../Modal'
 import {
@@ -100,20 +108,22 @@ export interface UseTooltipProps {
 
 export const CustomizableTooltipAttributes: CustomizableAttributes = {}
 
+type TooltipRenderProp = (tooltipProps: {
+  'aria-describedby': string
+  onBlur: () => void
+  onFocus: () => void
+  onMouseOut: (event: React.MouseEvent<Element, MouseEvent>) => void
+  onMouseOver: () => void
+  ref: Ref<any>
+}) => ReactNode
+
 export interface TooltipProps extends UseTooltipProps {
   content: ReactNode
   /**
    * Component to wrap. The HOC will listen for mouse events on this component, maintain the
    * state of isOpen accordingly, and pass that state into the children or "trigger" element
    */
-  children: (tooltipProps: {
-    'aria-describedby': string
-    onBlur: () => void
-    onFocus: () => void
-    onMouseOut: (event: React.MouseEvent<Element, MouseEvent>) => void
-    onMouseOver: () => void
-    ref: Ref<any>
-  }) => ReactNode
+  children: ReactNode | TooltipRenderProp
 }
 export function useTooltip({
   arrow = true,
@@ -234,17 +244,36 @@ export function useTooltip({
   }
 }
 
+function isRenderProp(
+  children: ReactNode | TooltipRenderProp
+): children is TooltipRenderProp {
+  return typeof children === 'function'
+}
+
 export const Tooltip: FC<TooltipProps> = ({ children, ...props }) => {
   const tooltipProps = useTooltip(props)
 
   const tooltipPropsLabeled = {
     ...omit(tooltipProps, ['tooltip', 'popperInstanceRef']),
   }
 
+  let target = children
+
+  if (isValidElement(children)) {
+    target = cloneElement(children, { ...tooltipPropsLabeled })
+  } else if (isRenderProp(children)) {
+    target = children(tooltipPropsLabeled)
+  } else {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Element "${typeof target}" can't be used as target for Tooltip`
+    )
+  }
+
   return (
     <>
       {tooltipProps.tooltip}
-      {children(tooltipPropsLabeled)}
+      {target}
     </>
   )
 }

packages/playground/src/Tooltip/TooltipDemo.tsx

@@ -25,16 +25,28 @@
  */
 
 import React from 'react'
-import { Box, IconButton, Tooltip } from '@looker/components'
+import { SpaceVertical, IconButton, Tooltip } from '@looker/components'
 
 export function TooltipDemo() {
   return (
-    <Box p="xxxlarge">
-      <Tooltip content="Start editing" placement="top">
-        {(tooltipProps) => (
-          <IconButton icon="Edit" label="Edit something" {...tooltipProps} />
-        )}
-      </Tooltip>
-    </Box>
+    <SpaceVertical m="xxxlarge">
+      <div>
+        <Tooltip content="I'm a little teapot">Some Text</Tooltip>
+      </div>
+
+      <div>
+        <Tooltip content="Start editing" placement="top">
+          {(tooltipProps) => (
+            <IconButton icon="Edit" label="Edit something" {...tooltipProps} />
+          )}
+        </Tooltip>
+      </div>
+
+      <div>
+        <Tooltip content="Start editing" placement="top">
+          <IconButton icon="Edit" label="Edit something" />
+        </Tooltip>
+      </div>
+    </SpaceVertical>
   )
 }

packages/playground/src/index.tsx

@@ -26,12 +26,12 @@
 import React, { FC } from 'react'
 import { render } from 'react-dom'
 import { ComponentsProvider } from '@looker/components'
-import { AccordionDemo } from './Accordion/AccordionDemo'
+import { TooltipDemo } from './Tooltip/TooltipDemo'
 
 const App: FC = () => {
   return (
     <ComponentsProvider ie11Support>
-      <AccordionDemo />
+      <TooltipDemo />
     </ComponentsProvider>
   )
 }

packages/www/src/MDX/Pre/CodeSandbox.tsx

@@ -196,16 +196,13 @@ export const ToggleCodeButton: FC<ToggleButtonProps> = ({
   const toggleLabel = editorIsVisible ? 'Hide code editor' : 'Show code editor'
   return (
     <Tooltip content={toggleLabel} placement="left">
-      {(tooltipProps) => (
-        <ActionButton
-          {...tooltipProps}
-          editorIsVisible={editorIsVisible}
-          onClick={onClick}
-          label={toggleLabel}
-          icon={toggleIcon}
-          size="xsmall"
-        />
-      )}
+      <ActionButton
+        editorIsVisible={editorIsVisible}
+        onClick={onClick}
+        label={toggleLabel}
+        icon={toggleIcon}
+        size="xsmall"
+      />
     </Tooltip>
   )
 }

packages/www/src/documentation/components/actions/icon-button.mdx

@@ -92,13 +92,6 @@ You can also use your own `Tooltip` around `IconButton` (this will effectively r
 
 ```jsx
 <Tooltip content="I'm a little teapot">
-  {(tooltipProps) => (
-    <IconButton
-      {...tooltipProps}
-      label="Add Something Neat"
-      icon="Plus"
-      size="xxsmall"
-    />
-  )}
+  <IconButton label="Add Something Neat" icon="Plus" size="xxsmall" />
 </Tooltip>
 ```

packages/www/src/documentation/components/overlays/popover.mdx

@@ -73,7 +73,7 @@ If you want to hide the popover arrow you can set the prop `arrow` prop to false
 
   return (
     <SpaceVertical>
-      <Space between>
+      <Space between width="100%">
         <Popover content={popoverContent}>
           {(onClick, ref, className) =>
             button('Default', onClick, ref, className)
@@ -88,7 +88,7 @@ If you want to hide the popover arrow you can set the prop `arrow` prop to false
           {(onClick, ref, className) => button('Left', onClick, ref, className)}
         </Popover>
       </Space>
-      <Space>
+      <Space between width="100%">
         <Popover content={popoverContent} placement="bottom-start">
           {(onClick, ref, className) =>
             button('Bottom Start', onClick, ref, className)