Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature/UIDS-474-add-hover-to-tooltip #487

Merged
merged 1 commit into from
Dec 8, 2021
Merged

feature/UIDS-474-add-hover-to-tooltip #487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions spec/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19711,6 +19711,52 @@ exports[`Storyshots Design System/Tooltip With Header 1`] = `
</div>
`;

exports[`Storyshots Design System/Tooltip With Hover 1`] = `
<div
style={
Object {
"padding": "1rem",
}
}
>
<div
style={
Object {
"padding": "4rem",
}
}
>
<span
aria-hidden="true"
className="Tooltip__icon"
onClick={[Function]}
onKeyPress={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex="0"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-question-circle fa-w-16 "
data-icon="question-circle"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
fill="currentColor"
style={Object {}}
/>
</svg>
</span>
</div>
</div>
`;

exports[`Storyshots Design System/Tooltip With Html 1`] = `
<div
style={
Expand Down
16 changes: 13 additions & 3 deletions src/Tooltip/Tooltip.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ class Tooltip extends Component {
}
};

handleToggleTooltip = (event) => {
handleToggleTooltipClick = (event) => {
if (this.props.withHover) return;

event.preventDefault();
this.clickOutsideListener = addClickOutsideListener(
event.target.parentNode,
Expand All @@ -58,6 +60,10 @@ class Tooltip extends Component {
this.setState((state) => ({ visible: !state.visible }), this.handleShow);
};

handleToggleTooltipHover = () => {
this.setState((state) => ({ visible: !state.visible }), this.handleShow);
};

render() {
return (
<Popper
Expand All @@ -74,8 +80,10 @@ class Tooltip extends Component {
className={classNames('Tooltip__icon', this.props.iconClasses)}
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
tabIndex="0"
onClick={this.handleToggleTooltip}
onKeyPress={this.handleToggleTooltip}
onClick={this.handleToggleTooltipClick}
onKeyPress={this.handleToggleTooltipClick}
onMouseEnter={this.props.withHover && this.handleToggleTooltipHover}
onMouseLeave={this.props.withHover && this.handleToggleTooltipHover}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only issue is that this tooltip will not be accessible if it is mouse-only (not available to keyboard users). Maybe we can add an onFocus and onBlur? If so, it may be worth extracting out this.props.withHover && this.handleToggleTooltipHover to a separate var at the top of render

>
<FontAwesomeIcon icon={this.props.icon} />
</span>
Expand All @@ -92,6 +100,7 @@ Tooltip.propTypes = {
strategy: PropTypes.string,
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
theme: PropTypes.string,
withHover: PropTypes.bool,
onShow: PropTypes.func,
};

Expand All @@ -101,6 +110,7 @@ Tooltip.defaultProps = {
header: undefined,
strategy: undefined,
theme: 'dark',
withHover: undefined,
onShow: undefined,
};

Expand Down
8 changes: 8 additions & 0 deletions src/Tooltip/Tooltip.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,14 @@ export const GrayIcon = () => (
/>
);

export const WithHover = () => (
<Tooltip
placement={radios('Placement', ['right', 'top', 'bottom', 'left', 'auto'], 'right')}
text={text('Tooltip Text', 'Default Tooltip')}
withHover
/>
);

const trackingEvent = {
event: 'test tracking event',
eventData: { userId: 1 },
Expand Down