1466d44b57
In this PR: - Use a real `<input type="checkbox" />` element in the `<Toggle />` component - Create an `accessibility` module in the `twenty-ui` package - Export the `VISIBILITY_HIDDEN` CSS object to hide visually any element - Export a `<VisibilityHidden />` component from the `twenty-ui` package to add visually hidden textual information easily - Export a `<VisibilityHiddenInput />` component to create custom form control components easily - Use a `<label>` element for the "Advanced:" text; it will naturally toggle the advanced settings Fixes #7756 --------- Co-authored-by: Devessier <baptiste@devessier.fr>
15 lines
315 B
TypeScript
15 lines
315 B
TypeScript
import styled from '@emotion/styled';
|
|
import { VISIBILITY_HIDDEN } from '@ui/accessibility/utils/visibility-hidden';
|
|
|
|
const StyledSpan = styled.span`
|
|
${VISIBILITY_HIDDEN}
|
|
`;
|
|
|
|
export const VisibilityHidden = ({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) => {
|
|
return <StyledSpan>{children}</StyledSpan>;
|
|
};
|