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

Change avatar to use Compound implementation (#11448)

Browse source 
* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests
This commit is contained in:
Germain 2023-08-24 04:48:35 +01:00 • committed by GitHub
parent e34920133e
commit 09c5e06d12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
125 changed files with 936 additions and 1413 deletions
Download patch file Download diff file Expand all files Collapse all files

23
test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View file

@ -6,25 +6,14 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
class="mx_PinnedEventTile"
>
<span
class="mx_BaseAvatar mx_PinnedEventTile_senderAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar"
data-color="6"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
>
A
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 24px; height: 24px;"
/>
a
</span>
<span
class="mx_PinnedEventTile_sender mx_Username_color6"

115
test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
View file

@ -23,25 +23,14 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
</h3>
<p>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
>
R
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 36px; height: 36px;"
/>
R
</span>
</p>
<p>
@ -59,25 +48,14 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
</h3>
<p>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="1"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
>
?
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 36px; height: 36px;"
/>
?
</span>
</p>
<p>
@ -236,25 +214,14 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
</h3>
<p>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
>
R
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 36px; height: 36px;"
/>
R
</span>
</p>
<p>
@ -305,25 +272,14 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
</h3>
<p>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
>
R
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 36px; height: 36px;"
/>
R
</span>
</p>
<p>
@ -381,25 +337,14 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
</h3>
<p>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
>
R
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 36px; height: 36px;"
/>
R
</span>
</p>
<p>

92
test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
View file

@ -14,25 +14,14 @@ exports[`RoomTile when message previews are enabled and there is a message in a
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 20.8px; width: 32px; line-height: 32px;"
>
!
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 32px; height: 32px;"
/>
!
</span>
</div>
<div
@ -99,25 +88,14 @@ exports[`RoomTile when message previews are enabled and there is a message in th
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 20.8px; width: 32px; line-height: 32px;"
>
!
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 32px; height: 32px;"
/>
!
</span>
</div>
<div
@ -184,25 +162,14 @@ exports[`RoomTile when message previews are enabled should render a room without
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 20.8px; width: 32px; line-height: 32px;"
>
!
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 32px; height: 32px;"
/>
!
</span>
</div>
<div
@ -257,25 +224,14 @@ exports[`RoomTile when message previews are not enabled should render the room 1
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 20.8px; width: 32px; line-height: 32px;"
>
!
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 32px; height: 32px;"
/>
!
</span>
</div>
<div