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

Fix: Clicking on members pile does nothing. #11657

Merged
merged 6 commits into from
Oct 6, 2023
Merged

Fix: Clicking on members pile does nothing. #11657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
10533cb
Fix: Clicking on pile opens members list
Sep 24, 2023
6c3291e
onClick used on Accessible Component
Oct 2, 2023
fd165fc
Updated snapshots for testing
Oct 2, 2023
f5c1780
Merge branch 'develop' of https://github.com/manancodes/matrix-react-…
Oct 2, 2023
4e2e207
Merge branch 'develop' of https://github.com/manancodes/matrix-react-…
manancodes Oct 4, 2023
8d21379
Snapshots updated after merging
manancodes Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions res/css/structures/_SpaceRoomView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ limitations under the License.

.mx_FacePile {
display: inline-block;
cursor: pointer;
}

.mx_SpaceRoomView_landing_inviteButton,
Expand Down
8 changes: 6 additions & 2 deletions src/components/views/elements/FacePile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { RoomMember } from "matrix-js-sdk/src/matrix";
import { AvatarStack, Tooltip } from "@vector-im/compound-web";

import MemberAvatar from "../avatars/MemberAvatar";
import AccessibleButton, { ButtonEvent } from "./AccessibleButton";

interface IProps extends HTMLAttributes<HTMLSpanElement> {
members: RoomMember[];
Expand All @@ -28,6 +29,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
tooltipShortcut?: string;
children?: ReactNode;
viewUserOnClick?: boolean;
onClick?: (e: ButtonEvent) => void | Promise<void>;
}

const FacePile: FC<IProps> = ({
Expand Down Expand Up @@ -64,8 +66,10 @@ const FacePile: FC<IProps> = ({

const content = (
<div className="mx_FacePile">
<AvatarStack>{pileContents}</AvatarStack>
{children}
<AccessibleButton kind="link_inline" onClick={props.onClick ?? null}>
<AvatarStack>{pileContents}</AvatarStack>
{children}
</AccessibleButton>
</div>
);

Expand Down
2 changes: 2 additions & 0 deletions src/components/views/elements/RoomFacePile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import DMRoomMap from "../../../utils/DMRoomMap";
import FacePile from "./FacePile";
import { useRoomMembers } from "../../../hooks/useRoomMembers";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { ButtonEvent } from "./AccessibleButton";

const DEFAULT_NUM_FACES = 5;

Expand All @@ -32,6 +33,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
room: Room;
onlyKnownUsers?: boolean;
numShown?: number;
onClick?: (e: ButtonEvent) => void | Promise<void>;
}

const RoomFacePile: FC<IProps> = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }) => {
Expand Down
26 changes: 16 additions & 10 deletions test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,24 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
data-state="closed"
>
<div
class="_stacked-avatars_ylj7w_116"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
<span
class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
data-color="8"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
<div
class="_stacked-avatars_ylj7w_116"
>
4
</span>
<span
class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
data-color="8"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
4
</span>
</div>
</div>
</div>
</DocumentFragment>
Expand Down
26 changes: 16 additions & 10 deletions test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,24 @@ exports[`<RoomFacePile /> renders 1`] = `
data-state="closed"
>
<div
class="_stacked-avatars_ylj7w_116"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
<span
class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
data-color="8"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 28px;"
<div
class="_stacked-avatars_ylj7w_116"
>
b
</span>
<span
class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
data-color="8"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 28px;"
>
b
</span>
</div>
</div>
</div>
</DocumentFragment>
Expand Down