[MM-58443] Migrate tooltips of 'components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx' to WithTooltip (#27185)

* add withtooltip handling

* add withtooltip handling

* placed icon inside tooltip

* Update saved_posts_button.tsx

* Update saved_posts_button.tsx

* Update saved_posts_button.test.tsx.snap

* Update saved_posts_button.tsx

---------

Co-authored-by: surajanthwal <surajanthwal2010@gmail.com>
Co-authored-by: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
suraj-anthwal 2024-07-04 18:08:08 +00:00 committed by GitHub
parent 6d427cf005
commit 9f396c9294
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 36 deletions

View File

@ -1,25 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/global/AtMentionsButton should match snapshot 1`] = `
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
id="recentMentions"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Saved messages"
id="channel_header.flagged"
/>
</Tooltip>
}
<WithTooltip
id="recentMentions"
placement="bottom"
trigger={
Array [
"hover",
"focus",
]
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saved messages"
id="channel_header.flagged"
/>
}
>
<ForwardRef
@ -33,5 +22,5 @@ exports[`components/global/AtMentionsButton should match snapshot 1`] = `
size="sm"
toggled={false}
/>
</OverlayTrigger>
</WithTooltip>
`;

View File

@ -10,10 +10,9 @@ import IconButton from '@mattermost/compass-components/components/icon-button';
import {closeRightHandSide, showFlaggedPosts} from 'actions/views/rhs';
import {getRhsState} from 'selectors/rhs';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import WithTooltip from 'components/with_tooltip';
import Constants, {RHSStates} from 'utils/constants';
import {RHSStates} from 'utils/constants';
import type {GlobalState} from 'types/store';
@ -31,21 +30,16 @@ const SavedPostsButton = (): JSX.Element | null => {
}
};
const tooltip = (
<Tooltip id='recentMentions'>
<FormattedMessage
id='channel_header.flagged'
defaultMessage='Saved messages'
/>
</Tooltip>
);
return (
<OverlayTrigger
trigger={['hover', 'focus']}
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id='recentMentions'
title={
<FormattedMessage
id='channel_header.flagged'
defaultMessage='Saved messages'
/>
}
placement='bottom'
overlay={tooltip}
>
<IconButton
size={'sm'}
@ -58,7 +52,7 @@ const SavedPostsButton = (): JSX.Element | null => {
aria-controls='searchContainer' // Must be changed if the ID of the container changes
aria-label={formatMessage({id: 'channel_header.flagged', defaultMessage: 'Saved messages'})}
/>
</OverlayTrigger>
</WithTooltip>
);
};