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

* 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

View file

@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
const content = container.querySelector(".mx_EventTile_body");
expect(content.innerHTML).toMatchInlineSnapshot(
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
);
});
@ -217,7 +217,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
const content = container.querySelector(".mx_EventTile_body");
expect(content.innerHTML).toMatchInlineSnapshot(
`"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" aria-describedby="mx_Pill_0.123456"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
`"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" data-state="closed"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
);
});

View file

@ -50,8 +50,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
<span>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_UserPill"
data-state="closed"
href="https://matrix.to/#/@user:example.com"
>
<span
@ -99,8 +99,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
<span>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_EventPill"
data-state="closed"
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
>
<span
@ -150,8 +150,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
<span>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_RoomPill"
data-state="closed"
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
>
<span
@ -260,8 +260,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
<span>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_UserPill"
data-state="closed"
href="https://matrix.to/#/@user:server"
>
<span
@ -303,7 +303,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
><a
class="mx_Pill mx_EventPill"
href="https://matrix.to/#/!room1:example.com/%event_id%"
aria-describedby="mx_Pill_0.123456"
data-state="closed"
><span
aria-label="Profile picture"
aria-hidden="true"
@ -336,7 +336,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
><a
class="mx_Pill mx_EventPill"
href="https://matrix.to/#/!room2:example.com/%event_id%"
aria-describedby="mx_Pill_0.123456"
data-state="closed"
><span
aria-label="Avatar"
aria-hidden="true"
@ -371,8 +371,8 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
<span>
<bdi>
<a
aria-describedby="mx_Pill_0.123456"
class="mx_Pill mx_EventPill"
data-state="closed"
href="https://matrix.to/#/!room1:example.com/!abc123"
>
<div