matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-31 13:44:28 +03:00
Code Activity

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
125 changed files with 936 additions and 1413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
test/components/views/elements/FacePile-test.tsx Normal file
View File

@ -0,0 +1,31 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { render } from "@testing-library/react";
import React from "react";
import FacePile from "../../../../src/components/views/elements/FacePile";
import { mkRoomMember } from "../../../test-utils";
describe("<FacePile />", () => {
it("renders with a tooltip", () => {
const member = mkRoomMember("123", "456", "join");
const { asFragment } = render(
<FacePile members={[member]} size="36px" overflow={false} tooltip={<>tooltip</>} />,
);
expect(asFragment()).toMatchSnapshot();
});
});

104
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View File

@ -102,14 +102,27 @@ exports[`AppTile for a pinned widget should render 1`] = `
style="pointer-events: none;"
>
<span>
<img
alt=""
class="mx_BaseAvatar mx_BaseAvatar_image mx_WidgetAvatar"
<span
aria-label="Avatar"
class="_avatar_i91o9_17 mx_BaseAvatar mx_WidgetAvatar"
data-color="1"
data-testid="avatar-img"
loading="lazy"
src="image-file-stub"
style="width: 20px; height: 20px;"
/>
data-type="round"
style="--cpd-avatar-size: 20px;"
>
<img
alt=""
class="_image_i91o9_45"
crossorigin="anonymous"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="image-file-stub"
title=""
width="20px"
/>
</span>
<b>
Example 1
</b>
@ -177,14 +190,27 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
style="pointer-events: none;"
>
<span>
<img
alt=""
class="mx_BaseAvatar mx_BaseAvatar_image mx_WidgetAvatar"
<span
aria-label="Avatar"
class="_avatar_i91o9_17 mx_BaseAvatar mx_WidgetAvatar"
data-color="1"
data-testid="avatar-img"
loading="lazy"
src="image-file-stub"
style="width: 20px; height: 20px;"
/>
data-type="round"
style="--cpd-avatar-size: 20px;"
>
<img
alt=""
class="_image_i91o9_45"
crossorigin="anonymous"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="image-file-stub"
title=""
width="20px"
/>
</span>
<b>
Example 1
</b>
@ -245,25 +271,14 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
</div>
<div>
<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: 38px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 24.7px; width: 38px; line-height: 38px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 38px; height: 38px;"
/>
u
</span>
<h4
class="mx_Heading_h4"
@ -330,14 +345,27 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
style="pointer-events: none;"
>
<span>
<img
alt=""
class="mx_BaseAvatar mx_BaseAvatar_image mx_WidgetAvatar"
<span
aria-label="Avatar"
class="_avatar_i91o9_17 mx_BaseAvatar mx_WidgetAvatar"
data-color="1"
data-testid="avatar-img"
loading="lazy"
src="image-file-stub"
style="width: 20px; height: 20px;"
/>
data-type="round"
style="--cpd-avatar-size: 20px;"
>
<img
alt=""
class="_image_i91o9_45"
crossorigin="anonymous"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="image-file-stub"
title=""
width="20px"
/>
</span>
<b>
Example 1
</b>

26
test/components/views/elements/__snapshots__/FacePile-test.tsx.snap Normal file
View File

@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<FacePile /> renders with a tooltip 1`] = `
<DocumentFragment>
<div
class="mx_FacePile"
>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_TextWithTooltip_target mx_FacePile_faces"
tabindex="0"
>
<span
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="8"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
4
</span>
</div>
</div>
</DocumentFragment>
`;

186
test/components/views/elements/__snapshots__/Pill-test.tsx.snap
View File

@ -35,25 +35,14 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
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: 16px; height: 16px;"
/>
R
</span>
<span
class="mx_Pill_text"
@ -77,25 +66,14 @@ exports[`<Pill> should render the expected pill for a known user not in the room
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="5"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
U
</span>
<span
class="mx_Pill_text"
@ -119,25 +97,14 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
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: 16px; height: 16px;"
/>
R
</span>
<span
class="mx_Pill_text"
@ -161,25 +128,14 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
>
<span
aria-hidden="true"
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: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
U
</span>
<span
class="mx_Pill_text"
@ -203,25 +159,14 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
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: 16px; height: 16px;"
/>
R
</span>
<span
class="mx_Pill_text"
@ -245,25 +190,14 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
S
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
S
</span>
<span
class="mx_Pill_text"
@ -286,7 +220,7 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
href="https://matrix.to/#/@user3:example.com"
>
<div
class="mx_Pill_UserIcon mx_BaseAvatar mx_BaseAvatar_image"
class="mx_Pill_UserIcon mx_BaseAvatar"
/>
<span
class="mx_Pill_text"
@ -310,25 +244,14 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
class="_avatar_i91o9_17 mx_BaseAvatar"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
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: 16px; height: 16px;"
/>
R
</span>
<span
class="mx_Pill_text"
@ -352,25 +275,14 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
>
<span
aria-hidden="true"
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: 16px;"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
loading="lazy"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
U
</span>
<span
class="mx_Pill_text"