diff --git a/src/app/components/Form/FormField.tsx b/src/app/components/Form/FormField.tsx index 0d8b961298..616a13ccea 100644 --- a/src/app/components/Form/FormField.tsx +++ b/src/app/components/Form/FormField.tsx @@ -7,11 +7,12 @@ import { FormFieldProvider } from "./useFormField"; type FormFieldProperties = { name: string; + disableHover?: boolean; } & React.FieldsetHTMLAttributes; -export const FormFieldStyled = styled.fieldset<{ isInvalid: boolean }>` +export const FormFieldStyled = styled.fieldset<{ isInvalid: boolean; disableHover: boolean }>` &:hover .FormLabel { - ${({ isInvalid }) => !isInvalid && tw`text-theme-primary-600`}; + ${({ isInvalid, disableHover }) => !isInvalid && !disableHover && tw`text-theme-primary-600`} } .FormLabel { ${({ isInvalid }) => isInvalid && tw`text-theme-danger-500`}; @@ -21,7 +22,7 @@ export const FormFieldStyled = styled.fieldset<{ isInvalid: boolean }>` } `; -export const FormField: React.FC = ({ name, ...properties }) => { +export const FormField: React.FC = ({ name, disableHover = false, ...properties }) => { const FormProvider = useFormContext(); const { isInvalid, errorMessage } = React.useMemo(() => { const error: { message: string } | undefined = get(FormProvider?.errors, name); @@ -33,7 +34,12 @@ export const FormField: React.FC = ({ name, ...properties } }, [FormProvider, name]); return ( - + <>{properties.children} diff --git a/src/app/components/Input/__snapshots__/InputDate.test.tsx.snap b/src/app/components/Input/__snapshots__/InputDate.test.tsx.snap index b51444295c..3e9e9b02da 100644 --- a/src/app/components/Input/__snapshots__/InputDate.test.tsx.snap +++ b/src/app/components/Input/__snapshots__/InputDate.test.tsx.snap @@ -3,7 +3,7 @@ exports[`InputDate > should render 1`] = `
should render password rules 1`] = `