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', () => {
|
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();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -2058,6 +2058,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-message__text {
|
||||||
|
span.emoticon[style]:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.post-message--overflow {
|
&.post-message--overflow {
|
||||||
|
Loading…
Reference in New Issue
Block a user