refactor: form field component

ArdentHQ · Oct 23, 2024 · caa0a68 · caa0a68
1 parent fb02129
commit caa0a68
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 16 deletions.
diff --git 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<any>;
 
-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<FormFieldProperties> = ({ name, ...properties }) => {
+export const FormField: React.FC<FormFieldProperties> = ({ name, disableHover = false,  ...properties }) => {
 	const FormProvider = useFormContext();
 	const { isInvalid, errorMessage } = React.useMemo(() => {
 		const error: { message: string } | undefined = get(FormProvider?.errors, name);
@@ -33,7 +34,7 @@ export const FormField: React.FC<FormFieldProperties> = ({ name, ...properties }
 	}, [FormProvider, name]);
 
 	return (
-		<FormFieldStyled isInvalid={isInvalid} className="flex min-w-0 flex-col" {...properties}>
+		<FormFieldStyled isInvalid={isInvalid} className="flex min-w-0 flex-col" disableHover={disableHover} {...properties}>
 			<FormFieldProvider value={{ errorMessage, isInvalid, name }}>
 				<>{properties.children}</>
 			</FormFieldProvider>

diff --git a/src/app/components/Form/FormLabel.test.tsx b/src/app/components/Form/FormLabel.test.tsx
@@ -46,10 +46,4 @@ describe("FormLabel", () => {
 		expect(baseElement).toHaveTextContent("This field is optional");
 		expect(asFragment()).toMatchSnapshot();
 	});
-
-	it("should render with classnames", () => {
-		const { container } = render(<FormLabel label="Test" className="text-red-500" />);
-
-		expect(container.firstChild).toHaveClass("text-red-500");
-	})
 });
diff --git a/src/app/components/Form/FormLabel.tsx b/src/app/components/Form/FormLabel.tsx
@@ -3,17 +3,16 @@ import { useTranslation } from "react-i18next";
 
 import { useFormField } from "./useFormField";
 import { Tooltip } from "@/app/components/Tooltip";
-import cn from 'classnames';
 
 type FormLabelProperties = {
 	label?: string;
 	optional?: boolean;
-	className?: string;
 } & React.LabelHTMLAttributes<any>;
 
 export function FormLabel(properties: FormLabelProperties) {
 	const fieldContext = useFormField();
-    const { className, ...labelProperties } = properties;
+
+	const labelProperties = { ...properties };
 
 	for (const property of ["label", "optional"]) {
 		// @ts-ignore
@@ -25,7 +24,7 @@ export function FormLabel(properties: FormLabelProperties) {
 	return (
 		<label
 			data-testid="FormLabel"
-			className={cn("FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100", className)}
+			className="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
 			htmlFor={fieldContext?.name}
 			{...labelProperties}
 		>

diff --git a/src/domains/wallet/components/DeleteWallet/DeleteWallet.tsx b/src/domains/wallet/components/DeleteWallet/DeleteWallet.tsx
@@ -23,8 +23,8 @@ export const DeleteWallet = ({ onClose, onCancel, onDelete, wallet }: DeleteWall
 			onCancel={onCancel}
 			onDelete={onDelete}
 		>
-			<FormField name="wallet" className="mt-4">
-				<FormLabel label={t("COMMON.WALLET")} className="hover:!text-theme-secondary-text" />
+			<FormField name="wallet" className="mt-4" disableHover>
+				<FormLabel label={t("COMMON.WALLET")} />
 				<SelectAddress
 					wallet={{
 						address: wallet.address(),