IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap
View File

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

28
webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx
View File

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