Message preview should show tooltip with the full message on hover (#30265)

* Add title attribute for message preview

So that the full message is shown in a tooltip on hover.

* Fix test

* Update src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

Co-authored-by: Florian Duros <florianduros@element.io>

---------

Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
R Midhun Suresh 2025-07-21 17:28:54 +05:30 committed by GitHub
parent 5b659fe2e5
commit 8a879c7fca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 8 additions and 42 deletions

View File

@ -94,7 +94,11 @@ export const RoomListItemView = memo(function RoomListItemView({
<div className="mx_RoomListItemView_roomName" title={vm.name}>
{vm.name}
</div>
<div className="mx_RoomListItemView_messagePreview">{vm.messagePreview}</div>
{vm.messagePreview && (
<div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
{vm.messagePreview}
</div>
)}
</div>
{showHoverMenu ? (
<RoomListItemMenuView

View File

@ -65,7 +65,7 @@ describe("<RoomListItemView />", () => {
});
test("should render a room item with a message preview", () => {
defaultValue.messagePreview = "The message looks list this";
defaultValue.messagePreview = "The message looks like this";
const onClick = jest.fn();
const { asFragment } = render(<RoomListItemView room={room} onClick={onClick} isSelected={false} />);

View File

@ -69,9 +69,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room0
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -123,9 +120,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room1
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -177,9 +171,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room2
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -231,9 +222,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room3
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -285,9 +273,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room4
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -339,9 +324,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room5
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -393,9 +375,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room6
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -447,9 +426,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room7
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -501,9 +477,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room8
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -555,9 +528,6 @@ exports[`<RoomList /> should render a room list 1`] = `
>
room9
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>

View File

@ -45,9 +45,6 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
>
room1
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -100,9 +97,6 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
>
room1
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
<div
aria-hidden="true"
@ -167,9 +161,6 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
>
room1
</div>
<div
class="mx_RoomListItemView_messagePreview"
/>
</div>
</div>
</div>
@ -224,8 +215,9 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
</div>
<div
class="mx_RoomListItemView_messagePreview"
title="The message looks like this"
>
The message looks list this
The message looks like this
</div>
</div>
</div>