libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

fixed style of clickable card (#28521)

Browse source 
* fixed style of clickable card

fixes: #28519
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* fix aria

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* use useId instead of passing it

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-04-16 15:48:58 +02:00 committed by GitHub
parent 426c13967d
commit 38662c86a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
js/apps/admin-ui/src/components/keycloak-card/ClickableCard.tsx
View file

@ -1,32 +1,32 @@
import { KeyboardEvent } from "react";
import { Card, CardProps } from "@patternfly/react-core";
import { KeyboardEvent, useId } from "react";
import { Card, CardHeader, CardProps } from "@patternfly/react-core";
type ClickableCardProps = Omit<CardProps, "onClick"> & {
onClick: () => void;
};
export const ClickableCard = ({
children,
onClick,
children,
...rest
}: ClickableCardProps) => {
const id = useId();
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
onClick();
}
};
return (
<Card
className="keycloak-empty-state-card"
role="button"
aria-pressed="false"
tabIndex={0}
isSelectable
onKeyDown={onKeyDown}
onClick={onClick}
{...rest}
>
{children}
<Card id={id} isClickable onKeyDown={onKeyDown} onClick={onClick} {...rest}>
<CardHeader
selectableActions={{
onClickAction: onClick,
selectableActionId: `input-${id}`,
selectableActionAriaLabelledby: id,
}}
>
{children}
</CardHeader>
</Card>
);
};