Will HuntandGitHub
599112e122
* Fix labelling of avatar menu * Make the integration manager toggle more clear. * fix label * lint * Update snapshots. * Refactor many cases of checkbox to use the new compound component. * Remove non-checkbox related changes * Reset some things * Remove usages of mx_checkbox* styling. * Use label locators for apperance tests. * small linter tweaks * lint * update screenshot * Test updates * lint * Realign checkboxes for device selection. * Fixup QuickSettings styling * remove comment * lint * flex comment * remove unused label * remove redundant classes * add test for spaces * lint * Copyright * fixup spaces test * spaces lint * Replace pin with compound pin. * Realign icons * Remove hack for colouring icons * Adjust existing rooms component to correctly label room. * Add test for adding an existing room to an existing space. * Set deterministic sort order for rooms * lint
52 lines
1.6 KiB
TypeScript
52 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;
|
|
}
|
|
|
|
const StyledCheckbox: React.FC<IProps> = ({
|
|
id: initialId,
|
|
children: label,
|
|
className,
|
|
inputRef,
|
|
description,
|
|
...otherProps
|
|
}) => {
|
|
const id = initialId || "checkbox_" + secureRandomString(10);
|
|
const name = useId();
|
|
const descriptionId = useId();
|
|
return (
|
|
<Form.Root>
|
|
<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>
|
|
</Form.Root>
|
|
);
|
|
};
|
|
|
|
export default StyledCheckbox;
|