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 e44f5e8. * 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>
carbon-design-system · Sep 1, 2021 · ceee5c0 · ceee5c0
1 parent 86c9683
commit ceee5c0
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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) {