Change avatar to use Compound implementation (#11448)

* 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

test/components/views/dialogs/ConfirmUserActionDialog-test.tsx

@@ -0,0 +1,35 @@
+/*
+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 React from "react";
+import { render } from "@testing-library/react";
+
+import ConfirmUserActionDialog from "../../../../src/components/views/dialogs/ConfirmUserActionDialog";
+import { mkRoomMember } from "../../../test-utils";
+
+describe("ConfirmUserActionDialog", () => {
+    it("renders", () => {
+        const { asFragment } = render(
+            <ConfirmUserActionDialog
+                onFinished={jest.fn()}
+                member={mkRoomMember("123", "@user:test.com", "join")}
+                action="Ban"
+                title="Ban this " // eg. 'Ban this user?'
+            />,
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/components/views/dialogs/ForwardDialog-test.tsx

@@ -113,7 +113,7 @@ describe("ForwardDialog", () => {
         expect(screen.queryByText("Hello world!")).toBeInTheDocument();
 
         // We would just test SenderProfile for the user ID, but it's stubbed
-        const previewAvatar = container.querySelector(".mx_EventTile_avatar .mx_BaseAvatar_image");
+        const previewAvatar = container.querySelector(".mx_EventTile_avatar .mx_BaseAvatar");
         expect(previewAvatar?.getAttribute("title")).toBe("@bob:example.org");
     });
 

test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmUserActionDialog renders 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ConfirmUserActionDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <h2
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Ban this 
+      </h2>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_Dialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="mx_Dialog_content"
+      id="mx_Dialog_content"
+    >
+      <div
+        class="mx_ConfirmUserActionDialog_user"
+      >
+        <div
+          class="mx_ConfirmUserActionDialog_avatar"
+        >
+          <span
+            class="_avatar_i91o9_17 mx_BaseAvatar"
+            data-color="7"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 48px;"
+            title="@user:test.com"
+          >
+            u
+          </span>
+        </div>
+        <div
+          class="mx_ConfirmUserActionDialog_name"
+        >
+          @user:test.com
+        </div>
+        <div
+          class="mx_ConfirmUserActionDialog_userId"
+        >
+          @user:test.com
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Ban
+        </button>
+      </span>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -71,25 +71,14 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
           <div>
             <div>
               <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: 20px;"
               >
-                <span
-                  aria-hidden="true"
-                  class="mx_BaseAvatar_initial"
-                  style="font-size: 13px; width: 20px; line-height: 20px;"
-                >
-                  O
-                </span>
-                <img
-                  alt=""
-                  aria-hidden="true"
-                  class="mx_BaseAvatar_image"
-                  data-testid="avatar-img"
-                  loading="lazy"
-                  src="data:image/png;base64,00"
-                  style="width: 20px; height: 20px;"
-                />
+                O
               </span>
               <span
                 class="mx_ManageRestrictedJoinRuleDialog_entry_name"