diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss index a4a4aa78843..000781bd97a 100644 --- a/res/css/structures/_SpaceRoomView.pcss +++ b/res/css/structures/_SpaceRoomView.pcss @@ -189,6 +189,7 @@ limitations under the License. .mx_FacePile { display: inline-block; + cursor: pointer; } .mx_SpaceRoomView_landing_inviteButton, diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx index d7570fdfa75..5c762199655 100644 --- a/src/components/views/elements/FacePile.tsx +++ b/src/components/views/elements/FacePile.tsx @@ -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 { members: RoomMember[]; @@ -28,6 +29,7 @@ interface IProps extends HTMLAttributes { tooltipShortcut?: string; children?: ReactNode; viewUserOnClick?: boolean; + onClick?: (e: ButtonEvent) => void | Promise; } const FacePile: FC = ({ @@ -64,8 +66,10 @@ const FacePile: FC = ({ const content = (
- {pileContents} - {children} + + {pileContents} + {children} +
); diff --git a/src/components/views/elements/RoomFacePile.tsx b/src/components/views/elements/RoomFacePile.tsx index 68d9348c451..6ec333c4e55 100644 --- a/src/components/views/elements/RoomFacePile.tsx +++ b/src/components/views/elements/RoomFacePile.tsx @@ -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; @@ -32,6 +33,7 @@ interface IProps extends HTMLAttributes { room: Room; onlyKnownUsers?: boolean; numShown?: number; + onClick?: (e: ButtonEvent) => void | Promise; } const RoomFacePile: FC = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }) => { diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap index 731a5f460ff..6c2b64cc155 100644 --- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap @@ -7,18 +7,24 @@ exports[` renders with a tooltip 1`] = ` data-state="closed" >
- - 4 - + + 4 + +
diff --git a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap index 26fea36a985..11056fad011 100644 --- a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap @@ -7,18 +7,24 @@ exports[` renders 1`] = ` data-state="closed" >
- - b - + + b + +