Michael TelatynskiandGitHub
30f442208a
* Add more playwright axe tests to settings dialogs * Add utility to jest setupTests to detect React hydration errors * Iterate jest utility * Fix axe issue heading-order * Fix div-in-p issues * Fix setupTests.ts * Fix heading order * Make types happier * Fix hydration issues of thead containing text nodes * Update tests * Fix form-in-form React hydration issues * Fix li-in-li React hydration issues * Fix checked in form without onChange React hydration issue * Fix styling bleeding from _common.pcss * Update snapshots * Fix more remaining issues * Remove _common.pcss h2 rule altogether * Fix test * Update snapshots * Iterate * Iterate * Update snapshots * Simplify diff * Test * Update screenshots * Update screenshot
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
/*
|
|
Copyright 2024,2025 New Vector Ltd.
|
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React, { useId, type ReactNode, type Ref } from "react";
|
|
import { secureRandomString } from "matrix-js-sdk/src/randomstring";
|
|
import { CheckboxInput, Form, HelpMessage, InlineField, Label } from "@vector-im/compound-web";
|
|
|
|
interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
inputRef?: Ref<HTMLInputElement>;
|
|
id?: string;
|
|
description?: ReactNode;
|
|
formWrap?: boolean;
|
|
}
|
|
|
|
const StyledCheckbox: React.FC<IProps> = ({
|
|
id: initialId,
|
|
children: label,
|
|
className,
|
|
inputRef,
|
|
description,
|
|
formWrap = true,
|
|
...otherProps
|
|
}) => {
|
|
const id = initialId || "checkbox_" + secureRandomString(10);
|
|
const name = useId();
|
|
const descriptionId = useId();
|
|
|
|
const field = (
|
|
<InlineField
|
|
className={className}
|
|
name={name}
|
|
control={
|
|
<CheckboxInput
|
|
ref={inputRef}
|
|
aria-describedby={description ? descriptionId : undefined}
|
|
id={id}
|
|
{...otherProps}
|
|
/>
|
|
}
|
|
>
|
|
{label && <Label htmlFor={id}>{label}</Label>}
|
|
{description && <HelpMessage id={descriptionId}>{description}</HelpMessage>}
|
|
</InlineField>
|
|
);
|
|
|
|
if (formWrap) {
|
|
return <Form.Root>{field}</Form.Root>;
|
|
}
|
|
|
|
return field;
|
|
};
|
|
|
|
export default StyledCheckbox;
|