[MM-59330] Migrate tooltips of "components/drafts/draft_actions/action.tsx" to WithTooltip (#27650)

This commit is contained in:
Arya Khochare 2024-07-29 00:32:08 +05:30 committed by GitHub
parent ec8c143bce
commit 401fca2648
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 39 deletions

View file

@ -4,27 +4,10 @@ exports[`components/drafts/draft_actions/action should match snapshot 1`] = `
<div
className="DraftAction"
>
<OverlayTrigger
className="hidden-xs"
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
bsClass="tooltip"
className="hidden-xs"
id="tooltip_"
placement="right"
>
</Tooltip>
}
<WithTooltip
id="drafts_action_tooltip_"
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
title=""
>
<button
className="DraftAction__button"
@ -35,6 +18,6 @@ exports[`components/drafts/draft_actions/action should match snapshot 1`] = `
className="icon "
/>
</button>
</OverlayTrigger>
</WithTooltip>
</div>
`;

View file

@ -3,37 +3,25 @@
import classNames from 'classnames';
import React from 'react';
import {Tooltip} from 'react-bootstrap';
import OverlayTrigger from 'components/overlay_trigger';
import Constants from 'utils/constants';
import './action.scss';
import WithTooltip from 'components/with_tooltip';
type Props = {
icon: string;
id: string;
name: string;
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
tooltipText: React.ReactNode;
tooltipText: React.ReactElement | string;
};
function Action({name, icon, onClick, id, tooltipText}: Props) {
return (
<div className='DraftAction'>
<OverlayTrigger
className='hidden-xs'
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id={`drafts_action_tooltip_${id}`}
placement='top'
overlay={
<Tooltip
id={`tooltip_${id}`}
className='hidden-xs'
>
{tooltipText}
</Tooltip>
}
title={tooltipText}
>
<button
className={classNames(
@ -45,7 +33,7 @@ function Action({name, icon, onClick, id, tooltipText}: Props) {
>
<i className={`icon ${icon}`}/>
</button>
</OverlayTrigger>
</WithTooltip>
</div>
);
}