[MM-55497] Add tooltips with enlarged emojis when hovering over emojis within message content (#26709)

* feat: add tooltip to emojis in post messages

* ci: eslint fix
This commit is contained in:
Tanmay Thole 2024-04-12 16:40:03 +05:30 committed by GitHub
parent 1dd7046eff
commit bb26e8685f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 10 deletions

View File

@ -16,14 +16,14 @@ describe('PostEmoji', () => {
test('should render image when imageUrl is provided', () => { test('should render image when imageUrl is provided', () => {
render(<PostEmoji {...baseProps}/>); render(<PostEmoji {...baseProps}/>);
expect(screen.getByTitle(':' + baseProps.name + ':')).toBeInTheDocument(); expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toBeInTheDocument();
expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`); expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
}); });
test('should render shortcode text within span when imageUrl is provided', () => { test('should render shortcode text within span when imageUrl is provided', () => {
render(<PostEmoji {...baseProps}/>); render(<PostEmoji {...baseProps}/>);
expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`); expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`);
}); });
test('should render original text when imageUrl is empty', () => { test('should render original text when imageUrl is empty', () => {
@ -34,7 +34,7 @@ describe('PostEmoji', () => {
render(<PostEmoji {...props}/>); render(<PostEmoji {...props}/>);
expect(screen.queryByTitle(':' + baseProps.name + ':')).not.toBeInTheDocument(); expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).not.toBeInTheDocument();
expect(screen.getByText(`:${props.name}:`)).toBeInTheDocument(); expect(screen.getByText(`:${props.name}:`)).toBeInTheDocument();
}); });
}); });

View File

@ -3,6 +3,8 @@
import React from 'react'; import React from 'react';
import WithTooltip from 'components/with_tooltip';
interface Props { interface Props {
name: string; name: string;
imageUrl: string; imageUrl: string;
@ -22,14 +24,22 @@ const PostEmoji = ({name, imageUrl}: Props) => {
} }
return ( return (
<span <WithTooltip
alt={emojiText} id='postEmoji__tooltip'
className='emoticon'
title={emojiText} title={emojiText}
style={{backgroundImage: backgroundImageUrl}} emoji={name}
emojiStyle='large'
placement='top'
> >
{emojiText} <span
</span> alt={emojiText}
className='emoticon'
data-testid={`postEmoji.${emojiText}`}
style={{backgroundImage: backgroundImageUrl}}
>
{emojiText}
</span>
</WithTooltip>
); );
}; };

View File

@ -2058,6 +2058,12 @@
} }
} }
} }
.post-message__text {
span.emoticon[style]:hover {
cursor: pointer;
}
}
} }
&.post-message--overflow { &.post-message--overflow {