Merge pull request #11634 from matrix-org/germain-gg/facepile-offset

Revert "Fix regression around FacePile with overflow (#11527)"

(cherry picked from commit 875fcb1)

res/css/views/elements/_FacePile.pcss

@@ -15,11 +15,13 @@ limitations under the License.
 */
 
 .mx_FacePile_more {
+ /* Needed to calculate the offset on the face pile */
+ --cpd-avatar-size: 28px;
  position: relative;
  border-radius: 100%;
- width: 30px;
- height: 30px;
- background-color: $spacePanel-bg-color;
+ width: 28px;
+ height: 28px;
+ background-color: $panels;
  display: inline-block;
 
  &::before {

src/components/views/elements/FacePile.tsx

@@ -57,9 +57,8 @@ const FacePile: FC<IProps> = ({
 
  const pileContents = (
  <>
- {/* XXX: The margin-left is a workaround for Compound's styling excluding this element and being overly specific */}
- {overflow ? <span className="mx_FacePile_more" style={{ marginLeft: `calc(${size} * -0.2)` }} /> : null}
  {faces}
+ {overflow ? <span className="mx_FacePile_more" /> : null}
  </>
  );
 

test/components/structures/__snapshots__/MessagePanel-test.tsx.snap

@@ -95,7 +95,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
  class="mx_GenericEventListSummary_avatars"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="7"
  data-testid="avatar-img"
  data-type="round"

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
  class="mx_DecoratedRoomAvatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -100,7 +100,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
  class="mx_DecoratedRoomAvatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -179,7 +179,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
  <button
  aria-label="Avatar"
  aria-live="off"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -267,7 +267,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
  class="mx_DecoratedRoomAvatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -346,7 +346,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
  <button
  aria-label="Avatar"
  aria-live="off"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -509,7 +509,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
  class="mx_DecoratedRoomAvatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -587,7 +587,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
  <button
  aria-label="Avatar"
  aria-live="off"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"

test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -71,7 +71,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
  class="mx_SpaceHierarchy_roomTile_avatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="7"
  data-testid="avatar-img"
  data-type="round"
@@ -141,7 +141,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
  class="mx_SpaceHierarchy_roomTile_avatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="8"
  data-testid="avatar-img"
  data-type="round"
@@ -212,7 +212,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
  class="mx_SpaceHierarchy_roomTile_avatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="8"
  data-testid="avatar-img"
  data-type="round"
@@ -289,7 +289,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
  class="mx_SpaceHierarchy_roomTile_avatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="2"
  data-testid="avatar-img"
  data-type="round"

test/components/structures/__snapshots__/UserMenu-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
  class="mx_UserMenu_userAvatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="2"
  data-testid="avatar-img"
  data-type="round"

test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`RoomAvatar should render as expected for a DM room 1`] = `
 <div>
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="1"
  data-testid="avatar-img"
  data-type="round"
@@ -18,7 +18,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
 exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 <div>
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="7"
  data-testid="avatar-img"
  data-type="round"
@@ -33,7 +33,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="2"
  data-testid="avatar-img"
  data-type="round"

test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
  class="mx_Marker_border"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="8"
  data-testid="avatar-img"
  data-type="round"

test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
  class="mx_DialogOwnBeaconStatus"
 >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_ylj7w_56"
  data-color="8"
  data-testid="avatar-img"
  data-type="round"

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
  class="mx_BeaconListItem"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_ylj7w_56"
  data-color="1"
  data-testid="avatar-img"
  data-type="round"

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

@@ -41,7 +41,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
  class="mx_ConfirmUserActionDialog_avatar"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="7"
  data-testid="avatar-img"
  data-type="round"

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

@@ -71,7 +71,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
  <div>
  <div>
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="7"
  data-testid="avatar-img"
  data-type="round"

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -104,15 +104,15 @@ exports[`AppTile for a pinned widget should render 1`] = `
  <span>
  <span
  aria-label="Avatar"
- class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
+ class="_avatar_ylj7w_17 mx_BaseAvatar mx_WidgetAvatar"
  data-color="1"
  data-testid="avatar-img"
  data-type="round"
  style="--cpd-avatar-size: 20px;"
  >
  <img
  alt=""
- class="_image_2lhia_45"
+ class="_image_ylj7w_45"
  crossorigin="anonymous"
  data-type="round"
  height="20px"
@@ -191,15 +191,15 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
  <span>
  <span
  aria-label="Avatar"
- class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
+ class="_avatar_ylj7w_17 mx_BaseAvatar mx_WidgetAvatar"
  data-color="1"
  data-testid="avatar-img"
  data-type="round"
  style="--cpd-avatar-size: 20px;"
  >
  <img
  alt=""
- class="_image_2lhia_45"
+ class="_image_ylj7w_45"
  crossorigin="anonymous"
  data-type="round"
  height="20px"
@@ -269,7 +269,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
  </div>
  <div>
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="1"
  data-testid="avatar-img"
  data-type="round"
@@ -345,15 +345,15 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
  <span>
  <span
  aria-label="Avatar"
- class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
+ class="_avatar_ylj7w_17 mx_BaseAvatar mx_WidgetAvatar"
  data-color="1"
  data-testid="avatar-img"
  data-type="round"
  style="--cpd-avatar-size: 20px;"
  >
  <img
  alt=""
- class="_image_2lhia_45"
+ class="_image_ylj7w_45"
  crossorigin="anonymous"
  data-type="round"
  height="20px"

test/components/views/elements/__snapshots__/FacePile-test.tsx.snap

@@ -7,10 +7,10 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
  data-state="closed"
  >
  <div
- class="_stacked-avatars_2lhia_116"
+ class="_stacked-avatars_ylj7w_116"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="8"
  data-testid="avatar-img"
  data-type="round"

test/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -35,7 +35,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -66,7 +66,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="5"
  data-testid="avatar-img"
  data-type="round"
@@ -97,7 +97,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -128,7 +128,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="4"
  data-testid="avatar-img"
  data-type="round"
@@ -159,7 +159,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -190,7 +190,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="2"
  data-testid="avatar-img"
  data-type="round"
@@ -244,7 +244,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="3"
  data-testid="avatar-img"
  data-type="round"
@@ -275,7 +275,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
  >
  <span
  aria-hidden="true"
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="4"
  data-testid="avatar-img"
  data-type="round"

test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap

@@ -7,10 +7,10 @@ exports[`<RoomFacePile /> renders 1`] = `
  data-state="closed"
  >
  <div
- class="_stacked-avatars_2lhia_116"
+ class="_stacked-avatars_ylj7w_116"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="8"
  data-testid="avatar-img"
  data-type="round"

test/components/views/messages/TextualBody-test.tsx

@@ -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_2lhia_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_2lhia_45" 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" 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_ylj7w_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_ylj7w_45" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
  );
  });
 

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -83,7 +83,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
  class="mx_Marker_border"
  >
  <span
- class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+ class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
  data-color="1"
  data-testid="avatar-img"
  data-type="round"