Skip to content

Commit

Permalink
fix(button): conflicting hover state (#9504)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
sstrubberg and tw15egan authored Sep 1, 2021
1 parent 86c9683 commit ceee5c0
Show file tree
Hide file tree
Showing 3 changed files with 2 additions and 18 deletions.
14 changes: 1 addition & 13 deletions packages/react/src/components/Button/Button-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -83,8 +82,6 @@ const props = {
'Icon description (iconDescription)',
'Button icon'
),
onClick: action('onClick'),
onFocus: action('onFocus'),
};
},
iconOnly: () => {
Expand Down Expand Up @@ -117,8 +114,6 @@ const props = {
['start', 'center', 'end'],
'center'
),
onClick: action('onClick'),
onFocus: action('onFocus'),
};
},
set: () => {
Expand All @@ -134,8 +129,6 @@ const props = {
'Button icon'
),
stacked: boolean('Stack buttons vertically (stacked)', false),
onClick: action('onClick'),
onFocus: action('onFocus'),
};
},
};
Expand Down Expand Up @@ -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 = {
Expand Down
4 changes: 1 addition & 3 deletions packages/react/src/components/Button/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ const Button = React.forwardRef(function Button(
const handleFocus = (evt) => {
if (hasIconOnly) {
closeTooltips(evt);
setIsHovered(!isHovered);
setIsFocused(true);
setAllowTooltipVisibility(true);
}
Expand All @@ -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) {
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 0 additions & 2 deletions packages/react/src/components/TooltipIcon/TooltipIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ const TooltipIcon = ({

const handleFocus = (evt) => {
closeTooltips(evt);
setIsHovered(!isHovered);
setIsFocused(true);
setAllowTooltipVisibility(true);
};
Expand All @@ -76,7 +75,6 @@ const TooltipIcon = ({

const handleMouseEnter = (evt) => {
if (!disabled) {
setIsHovered(true);
tooltipTimeout.current && clearTimeout(tooltipTimeout.current);

if (evt.target === tooltipRef.current) {
Expand Down

0 comments on commit ceee5c0

Please sign in to comment.