Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #11634 from matrix-org/germain-gg/facepile-offset
Browse files Browse the repository at this point in the history
Revert "Fix regression around FacePile with overflow (#11527)"
  • Loading branch information
andybalaam authored Sep 26, 2023
2 parents 24b10a8 + d996182 commit 875fcb1
Show file tree
Hide file tree
Showing 29 changed files with 101 additions and 100 deletions.
8 changes: 5 additions & 3 deletions res/css/views/elements/_FacePile.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 1 addition & 2 deletions src/components/views/elements/FacePile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
</>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
14 changes: 7 additions & 7 deletions test/components/structures/__snapshots__/RoomView-test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
16 changes: 8 additions & 8 deletions test/components/views/elements/__snapshots__/Pill-test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/messages/TextualBody-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>"`,
);
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 875fcb1

Please sign in to comment.