Fix duplicate tooltips on IconButton (#661)

* Check for existing outer tooltip on IconButton

* Loosen check for hasOuterTooltip

Author: mdodgelooker

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

@@ -29,6 +29,7 @@ import React from 'react'
 import noop from 'lodash/noop'
 import { assertSnapshot, renderWithTheme } from '@looker/components-test-utils'
 import { fireEvent } from '@testing-library/react'
+import { Tooltip } from '../Tooltip'
 import { IconButton } from './IconButton'
 
 test('IconButton default', () => {
@@ -113,3 +114,25 @@ test('IconButton tooltipDisabled actually disables tooltip', () => {
   const notTooltip = container.querySelector('p') // Get Tooltip content
   expect(notTooltip).toBeNull()
 })
+
+test('IconButton built-in tooltip defers to outer tooltip', () => {
+  const tooltip = 'Add to favorites'
+  const label = 'Mark as my Favorite'
+  const { getByText, getByTitle } = renderWithTheme(
+    <Tooltip content={tooltip}>
+      {(eventHandlers, ref) => (
+        <IconButton
+          tooltipDisabled
+          label={label}
+          icon="Favorite"
+          {...eventHandlers}
+          ref={ref}
+        />
+      )}
+    </Tooltip>
+  )
+
+  fireEvent.mouseOver(getByTitle('Favorite'))
+  expect(getByText(tooltip)).toBeInTheDocument()
+  expect(getByText(label)).toHaveStyle('height: 1px')
+})

packages/components/src/Button/IconButton.tsx

@@ -24,6 +24,8 @@
 
  */
 
+import some from 'lodash/some'
+import isFunction from 'lodash/isFunction'
 import styled, { css } from 'styled-components'
 import {
   CompatibleHTMLProps,
@@ -126,13 +128,19 @@ const IconButtonComponent = forwardRef(
       ...rest
     } = props
 
+    // any of the hover/focus handlers being present disables built-in tooltip
+    const hasOuterTooltip = some(
+      [propsOnFocus, propsOnBlur, propsOnMouseOver, propsOnMouseOut],
+      isFunction
+    )
+
     const {
       ref,
       tooltip,
       eventHandlers: { onFocus, onBlur, onMouseOver, onMouseOut },
     } = useTooltip({
       content: label,
-      disabled: tooltipDisabled,
+      disabled: tooltipDisabled || hasOuterTooltip,
       placement: tooltipPlacement,
     })
 

packages/playground/src/Tooltip/TooltipDemo.tsx

@@ -0,0 +1,39 @@
+/*
+ MIT License
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ */
+
+import React from 'react'
+import { Box, IconButton, Tooltip } from '@looker/components'
+
+export function TooltipDemo() {
+  return (
+    <Box p="xxxlarge">
+      <Tooltip content="Start editing" placement="top">
+        {(eventHandlers, ref) => (
+          <IconButton
+            icon="Edit"
+            label="Edit something"
+            {...eventHandlers}
+            ref={ref}
+          />
+        )}
+      </Tooltip>
+    </Box>
+  )
+}

packages/playground/src/index.tsx

@@ -24,13 +24,13 @@ import { GlobalStyle } from '@looker/components'
 import { theme } from '@looker/design-tokens'
 import { ThemeProvider } from 'styled-components'
 
-import { ComboboxDemo } from './Select/ComboboxDemo'
+import { TooltipDemo } from './Tooltip/TooltipDemo'
 
 const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
-      <ComboboxDemo />
+      <TooltipDemo />
     </ThemeProvider>
   )
 }