From ceee5c09e109c4b0eb56061633e601bdbf9bc8e8 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@protonmail.com>
Date: Wed, 1 Sep 2021 13:27:55 -0500
Subject: [PATCH] fix(button): conflicting hover state (#9504)

* fix(button): conflicting hover state

* fix(button): removed unnecessary boolean

* fix(button): testing deploy preview

* fix(button): removed setIsHovered on mouseEnter and handleFocus

* fix(button): hover states

* fix(button): hover states

* fix(button): another stab at a state fix

* chore(storybook): added controls

* fix(storybook): added playground2

* Revert "chore(storybook): added controls"

This reverts commit e44f5e8f5b8d5a780d36e4004330d7284a6912d6.

* fix(button): removed storybook onFocus

* fix(button): removed onclick action

* fix(button): console'ing the onFocus

* fix(button): removed legacy storybook actions

* Update packages/react/src/components/Button/Button.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>

* Update packages/react/src/components/Button/Button.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>

* fix(button): removed zombies and applied fix to tooltipIcon

* fix(button): removed test stories

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 .../react/src/components/Button/Button-story.js    | 14 +-------------
 packages/react/src/components/Button/Button.js     |  4 +---
 .../src/components/TooltipIcon/TooltipIcon.js      |  2 --
 3 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 1207138ef49d..51ea235169ae 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
 import {
@@ -83,8 +82,6 @@ const props = {
         'Icon description (iconDescription)',
         'Button icon'
       ),
-      onClick: action('onClick'),
-      onFocus: action('onFocus'),
     };
   },
   iconOnly: () => {
@@ -117,8 +114,6 @@ const props = {
         ['start', 'center', 'end'],
         'center'
       ),
-      onClick: action('onClick'),
-      onFocus: action('onFocus'),
     };
   },
   set: () => {
@@ -134,8 +129,6 @@ const props = {
         'Button icon'
       ),
       stacked: boolean('Stack buttons vertically (stacked)', false),
-      onClick: action('onClick'),
-      onFocus: action('onFocus'),
     };
   },
 };
@@ -227,12 +220,7 @@ export const Playground = () => {
 };
 
 export const IconButton = () => (
-  <Button
-    renderIcon={Add16}
-    iconDescription="Icon Description"
-    hasIconOnly
-    onClick={action('onClick')}
-  />
+  <Button renderIcon={Add16} iconDescription="Icon Description" hasIconOnly />
 );
 
 IconButton.story = {
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 6d28d9439ce7..ec81c3704cda 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -67,7 +67,6 @@ const Button = React.forwardRef(function Button(
   const handleFocus = (evt) => {
     if (hasIconOnly) {
       closeTooltips(evt);
-      setIsHovered(!isHovered);
       setIsFocused(true);
       setAllowTooltipVisibility(true);
     }
@@ -83,7 +82,6 @@ const Button = React.forwardRef(function Button(
 
   const handleMouseEnter = (evt) => {
     if (hasIconOnly) {
-      setIsHovered(true);
       tooltipTimeout.current && clearTimeout(tooltipTimeout.current);
 
       if (evt.target === tooltipRef.current) {
@@ -142,8 +140,8 @@ const Button = React.forwardRef(function Button(
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--tooltip--hidden`]: hasIconOnly && !allowTooltipVisibility,
     [`${prefix}--tooltip--visible`]: isHovered,
+    [`${prefix}--tooltip--hidden`]: hasIconOnly && !allowTooltipVisibility,
     [`${prefix}--btn--icon-only`]: hasIconOnly,
     [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost',
     [`${prefix}--tooltip__trigger`]: hasIconOnly,
diff --git a/packages/react/src/components/TooltipIcon/TooltipIcon.js b/packages/react/src/components/TooltipIcon/TooltipIcon.js
index 4645a5908f1c..ae21635d3da0 100644
--- a/packages/react/src/components/TooltipIcon/TooltipIcon.js
+++ b/packages/react/src/components/TooltipIcon/TooltipIcon.js
@@ -63,7 +63,6 @@ const TooltipIcon = ({
 
   const handleFocus = (evt) => {
     closeTooltips(evt);
-    setIsHovered(!isHovered);
     setIsFocused(true);
     setAllowTooltipVisibility(true);
   };
@@ -76,7 +75,6 @@ const TooltipIcon = ({
 
   const handleMouseEnter = (evt) => {
     if (!disabled) {
-      setIsHovered(true);
       tooltipTimeout.current && clearTimeout(tooltipTimeout.current);
 
       if (evt.target === tooltipRef.current) {