mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 01:05:42 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix: Clicking on members pile does nothing. (#11657)

Browse source 
* Fix: Clicking on pile opens members list

* onClick used on Accessible Component

* Updated snapshots for testing

* Snapshots updated after merging

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
This commit is contained in:
Manan Sadana 2023-10-06 12:24:25 +05:30 committed by GitHub
parent 91413bc6b6
commit 54fa9a572e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/structures/_SpaceRoomView.pcss
View file

@ -189,6 +189,7 @@ limitations under the License.
.mx_FacePile {
display: inline-block;
cursor: pointer;
}
.mx_SpaceRoomView_landing_inviteButton,

8
src/components/views/elements/FacePile.tsx
View file

@ -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[];
@ -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> = ({
@ -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>
);

2
src/components/views/elements/RoomFacePile.tsx
View file

@ -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<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 }) => {

26
test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
View file

@ -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>

26
test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
View file

@ -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>