mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
[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:
parent
1dd7046eff
commit
bb26e8685f
@ -16,14 +16,14 @@ describe('PostEmoji', () => {
|
||||
test('should render image when imageUrl is provided', () => {
|
||||
render(<PostEmoji {...baseProps}/>);
|
||||
|
||||
expect(screen.getByTitle(':' + baseProps.name + ':')).toBeInTheDocument();
|
||||
expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
|
||||
expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
|
||||
});
|
||||
|
||||
test('should render shortcode text within span when imageUrl is provided', () => {
|
||||
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', () => {
|
||||
@ -34,7 +34,7 @@ describe('PostEmoji', () => {
|
||||
|
||||
render(<PostEmoji {...props}/>);
|
||||
|
||||
expect(screen.queryByTitle(':' + baseProps.name + ':')).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).not.toBeInTheDocument();
|
||||
expect(screen.getByText(`:${props.name}:`)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
@ -3,6 +3,8 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
imageUrl: string;
|
||||
@ -22,14 +24,22 @@ const PostEmoji = ({name, imageUrl}: Props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
alt={emojiText}
|
||||
className='emoticon'
|
||||
<WithTooltip
|
||||
id='postEmoji__tooltip'
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -2058,6 +2058,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-message__text {
|
||||
span.emoticon[style]:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.post-message--overflow {
|
||||
|
Loading…
Reference in New Issue
Block a user