fix(TooltipDefinition): sync hidden state with other tooltip componen…

…ts (#8655) * fix(Button): prevent adding hidden class to TooltipDefinition * fix(Button): restrict tooltip calls to hasIconOnly variant * fix(TooltipDefinition): remove not selector, add show/hide logic * chore(snapshot): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 13, 2021 · f0b3027 · f0b3027
1 parent fa7f540
commit f0b3027
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 18 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6415,6 +6415,9 @@ Map {
       "id": Object {
         "type": "string",
       },
+      "onBlur": Object {
+        "type": "func",
+      },
       "onFocus": Object {
         "type": "func",
       },

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -65,34 +65,40 @@ const Button = React.forwardRef(function Button(
   };
 
   const handleFocus = (evt) => {
-    closeTooltips(evt);
-    setIsHovered(!isHovered);
-    setIsFocused(true);
-    setAllowTooltipVisibility(true);
+    if (hasIconOnly) {
+      closeTooltips(evt);
+      setIsHovered(!isHovered);
+      setIsFocused(true);
+      setAllowTooltipVisibility(true);
+    }
   };
 
   const handleBlur = () => {
-    setIsHovered(false);
-    setIsFocused(false);
-    setAllowTooltipVisibility(false);
+    if (hasIconOnly) {
+      setIsHovered(false);
+      setIsFocused(false);
+      setAllowTooltipVisibility(false);
+    }
   };
 
   const handleMouseEnter = (evt) => {
-    setIsHovered(true);
-    tooltipTimeout.current && clearTimeout(tooltipTimeout.current);
+    if (hasIconOnly) {
+      setIsHovered(true);
+      tooltipTimeout.current && clearTimeout(tooltipTimeout.current);
 
-    if (evt.target === tooltipRef.current) {
-      setAllowTooltipVisibility(true);
-      return;
-    }
+      if (evt.target === tooltipRef.current) {
+        setAllowTooltipVisibility(true);
+        return;
+      }
 
-    closeTooltips(evt);
+      closeTooltips(evt);
 
-    setAllowTooltipVisibility(true);
+      setAllowTooltipVisibility(true);
+    }
   };
 
   const handleMouseLeave = () => {
-    if (!isFocused) {
+    if (!isFocused && hasIconOnly) {
       tooltipTimeout.current = setTimeout(() => {
         setAllowTooltipVisibility(false);
         setIsHovered(false);

diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
@@ -9,6 +9,7 @@ import React from 'react';
 
 import { withKnobs, select, text } from '@storybook/addon-knobs';
 import TooltipDefinition from '../TooltipDefinition';
+import Button from '../Button';
 import mdx from './TooltipDefinition.mdx';
 
 const directions = {
@@ -54,6 +55,9 @@ export default {
 export const Default = () => (
   <div style={{ marginTop: '2rem' }}>
     <TooltipDefinition {...props()}>Definition Tooltip</TooltipDefinition>
+    <Button hasIconOnly iconDescription="Filter">
+      Test
+    </Button>
   </div>
 );
 

diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition.js
@@ -23,6 +23,7 @@ const TooltipDefinition = ({
   children,
   direction,
   align,
+  onBlur,
   onFocus,
   onMouseEnter,
   onMouseLeave,
@@ -49,14 +50,25 @@ const TooltipDefinition = ({
       [`${prefix}--tooltip--visible`]: tooltipVisible,
     }
   );
+
   const debounceTooltipVisible = debounce(() => setTooltipVisible(false), 100);
-  const handleFocus = () => setAllowTooltipVisibility(true);
+
+  const handleFocus = () => {
+    debounceTooltipVisible.cancel();
+    setAllowTooltipVisibility(true);
+    setTooltipVisible(true);
+  };
+
+  const handleBlur = debounceTooltipVisible;
+
   const handleMouseEnter = () => {
     debounceTooltipVisible.cancel();
     setAllowTooltipVisibility(true);
     setTooltipVisible(true);
   };
+
   const handleMouseLeave = debounceTooltipVisible;
+
   useEffect(() => {
     const handleEscKeyDown = (event) => {
       if (matches(event, [keys.Escape])) {
@@ -77,7 +89,8 @@ const TooltipDefinition = ({
         type="button"
         className={tooltipTriggerClasses}
         aria-describedby={tooltipId}
-        onFocus={composeEventHandlers([onFocus, handleFocus])}>
+        onFocus={composeEventHandlers([onFocus, handleFocus])}
+        onBlur={composeEventHandlers([onBlur, handleBlur])}>
         {children}
       </button>
       <div
@@ -119,6 +132,11 @@ TooltipDefinition.propTypes = {
    */
   id: PropTypes.string,
 
+  /**
+   * The event handler for the `blur` event.
+   */
+  onBlur: PropTypes.func,
+
   /**
    * The event handler for the `focus` event.
    */

diff --git a/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap b/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap
@@ -15,6 +15,7 @@ exports[`TooltipDefinition should allow the user to specify the direction 1`] =
     <button
       aria-describedby="definition-tooltip-3"
       className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-start"
+      onBlur={[Function]}
       onFocus={[Function]}
       type="button"
     >
@@ -46,6 +47,7 @@ exports[`TooltipDefinition should render 1`] = `
     <button
       aria-describedby="definition-tooltip-1"
       className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-start"
+      onBlur={[Function]}
       onFocus={[Function]}
       type="button"
     >
@@ -78,6 +80,7 @@ exports[`TooltipDefinition should support a custom trigger element class 1`] = `
     <button
       aria-describedby="definition-tooltip-2"
       className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition custom-trigger-class bx--tooltip--bottom bx--tooltip--align-start"
+      onBlur={[Function]}
       onFocus={[Function]}
       type="button"
     >