Fixed child class replacement bug (#1033)

* Fixed child class replacement bug

* CHANGELOG updated

* Added hover class to renderProps method

* Removed auto passing of hover class for renderProps method

* Added passed-in className based on isOpen state to render props method

Author: Elliot

CHANGELOG.md

@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Jest no longer requires artifact build before being run
 
+### Fixed
+
+- `Tooltip` appends `hover` class if tooltip is open rather and doesn't replace given `className` prop value
+
 ## [0.8.4]
 
 ### Added

packages/components/src/Tooltip/Tooltip.tsx

@@ -110,6 +110,7 @@ export const CustomizableTooltipAttributes: CustomizableAttributes = {}
 
 type TooltipRenderProp = (tooltipProps: {
   'aria-describedby': string
+  className?: string
   onBlur: () => void
   onFocus: () => void
   onMouseOut: (event: React.MouseEvent<Element, MouseEvent>) => void
@@ -254,17 +255,24 @@ function isRenderProp(
 export const Tooltip: FC<TooltipProps> = ({ children, ...props }) => {
   const tooltipProps = useTooltip(props)
 
+  let target = children
+
   const tooltipPropsLabeled = {
     ...omit(tooltipProps, ['tooltip', 'popperInstanceRef', 'isOpen']),
-    className: tooltipProps.isOpen ? 'hover' : '',
   }
 
-  let target = children
-
   if (isValidElement(children)) {
-    target = cloneElement(children, { ...tooltipPropsLabeled })
+    target = cloneElement(children, {
+      ...tooltipPropsLabeled,
+      className: tooltipProps.isOpen
+        ? `${children.props.className} hover`
+        : children.props.className,
+    })
   } else if (isRenderProp(children)) {
-    target = children(tooltipPropsLabeled)
+    target = children({
+      ...tooltipPropsLabeled,
+      className: tooltipProps.isOpen ? 'hover' : '',
+    })
   } else {
     // eslint-disable-next-line no-console
     console.warn(

packages/playground/src/index.tsx

@@ -25,21 +25,41 @@
  */
 import React from 'react'
 import { render } from 'react-dom'
-import { ComponentsProvider, Flex, Icon } from '@looker/components'
+import { ComponentsProvider, ButtonOutline, Tooltip } from '@looker/components'
 
 const App = () => {
   return (
     <ComponentsProvider>
-      <Flex alignItems="center" justifyContent="center">
-        <Icon name="GearOutline" size="xxsmall" />
-        <Icon name="GearOutline" size="xsmall" />
-        <Icon name="GearOutline" size="small" />
-        <Icon name="GearOutline" size="medium" />
-        <Icon name="GearOutline" />
-        <Icon name="GearOutline" size="large" />
-        <Icon name="GearOutline" size="78px" />
-        <Icon name="GearOutline" size="90px" />
-      </Flex>
+      <Tooltip
+        width="20rem"
+        placement="right"
+        textAlign="left"
+        content={
+          <>
+            This is a tooltip with quite a bit of text. It's probably not ideal
+            to have this much text in a Tooltip. Perhaps you should link to
+            another document
+          </>
+        }
+      >
+        <ButtonOutline>Tooltip with lots of text</ButtonOutline>
+      </Tooltip>
+      <Tooltip
+        width="20rem"
+        placement="right"
+        textAlign="left"
+        content={
+          <>
+            This is a tooltip with quite a bit of text. It's probably not ideal
+            to have this much text in a Tooltip. Perhaps you should link to
+            another document
+          </>
+        }
+      >
+        <ButtonOutline className="hover">
+          Tooltip with lots of text
+        </ButtonOutline>
+      </Tooltip>
     </ComponentsProvider>
   )
 }