imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch Pill & E2EIcon to using Compound Tooltips (#12080)

Browse source 
* Switch Pill to using Compound Tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch E2EIcon to using Compound Tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests & snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-12-21 15:21:41 +00:00 • committed by GitHub
parent 42ac2272b2
commit 07747e24d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 105 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

4
test/components/views/elements/Pill-test.tsx
View file

@ -142,8 +142,8 @@ describe("<Pill>", () => {
await userEvent.hover(screen.getByText("Room 1"));
});
it("should show a tooltip with the room Id", () => {
expect(screen.getByRole("tooltip", { name: room1Id })).toBeInTheDocument();
it("should show a tooltip with the room Id", async () => {
expect(await screen.findByRole("tooltip", { name: room1Id })).toBeInTheDocument();
});
describe("when not hovering the pill any more", () => {

62
test/components/views/elements/__snapshots__/Pill-test.tsx.snap
View file

@ -11,13 +11,17 @@ exports[`<Pill> should not render an avatar or link when called with inMessage =
<div>
<bdi>
<span
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_RoomPill"
data-state="closed"
tabindex="0"
>
<span
class="mx_Pill_text"
class="mx_Pill mx_RoomPill"
>
Room 1
<span
class="mx_Pill_text"
>
Room 1
</span>
</span>
</span>
</bdi>
@ -30,24 +34,28 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
<div>
<bdi>
<span
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_AtRoomPill"
data-state="closed"
tabindex="0"
>
<span
aria-hidden="true"
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
class="mx_Pill mx_AtRoomPill"
>
R
</span>
<span
class="mx_Pill_text"
>
@room
<span
aria-hidden="true"
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
>
R
</span>
<span
class="mx_Pill_text"
>
@room
</span>
</span>
</span>
</bdi>
@ -60,8 +68,8 @@ exports[`<Pill> should render the expected pill for a known user not in the room
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_UserPill"
data-state="closed"
href="https://matrix.to/#/@user2:example.com"
>
<span
@ -91,8 +99,8 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_EventPill"
data-state="closed"
href="https://matrix.to/#/!room1:example.com/$123-456"
>
<span
@ -122,8 +130,8 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_EventPill"
data-state="closed"
href="https://matrix.to/#/!room1:example.com/$123-456"
>
<span
@ -153,8 +161,8 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_RoomPill"
data-state="closed"
href="https://matrix.to/#/#room1:example.com"
>
<span
@ -184,8 +192,8 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_RoomPill"
data-state="closed"
href="https://matrix.to/#/!space1:example.com"
>
<span
@ -215,8 +223,8 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_UserPill"
data-state="closed"
href="https://matrix.to/#/@user3:example.com"
>
<div
@ -238,8 +246,8 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_RoomPill"
data-state="closed"
href="https://matrix.to/#/!room1:example.com"
>
<span
@ -269,8 +277,8 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
<div>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_UserPill"
data-state="closed"
href="https://matrix.to/#/@user1:example.com"
>
<span