Merge pull request #73 from aversini/feat(TextInput)-adding-support-f…

…or-wrapper-and-input-classes feat(TextInput): adding support for wrapper and input classes
versini-org · Nov 23, 2023 · ad4226f · ad4226f
2 parents 93c577a + 968f312
commit ad4226f
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 3 deletions.
diff --git a/packages/documentation/src/stories/TextInput.stories.tsx b/packages/documentation/src/stories/TextInput.stories.tsx
@@ -17,11 +17,16 @@ const meta: Meta<typeof TextInput> = {
 		borderKind: "dark",
 		errorKind: "light",
 		error: false,
+		inputClassName: "",
+		className: "",
 	},
 	argTypes: {
 		className: {
 			control: "text",
 		},
+		inputClassName: {
+			control: "text",
+		},
 		labelId: {
 			control: "text",
 		},

diff --git a/packages/ui-components/src/components/TextInput/TextInput.tsx b/packages/ui-components/src/components/TextInput/TextInput.tsx
@@ -10,6 +10,7 @@ export const TextInput = ({
 	error = false,
 	raw = false,
 	className,
+	inputClassName,
 	focusKind = "light",
 	borderKind = "dark",
 	errorKind = "light",
@@ -28,6 +29,7 @@ export const TextInput = ({
 	const liveErrorMessage = `${name} error, ${helperText}`;
 	const textInputClassName = getTextInputClasses({
 		className,
+		inputClassName,
 		error,
 		raw,
 		focusKind,

diff --git a/packages/ui-components/src/components/TextInput/TextInputTypes.d.ts b/packages/ui-components/src/components/TextInput/TextInputTypes.d.ts
@@ -9,4 +9,5 @@ export type TextInputProps = {
 	errorKind?: "dark" | "light";
 	raw?: boolean;
 	noBorder?: boolean;
+	inputClassName?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
diff --git a/packages/ui-components/src/components/TextInput/__tests__/TextInput.test.tsx b/packages/ui-components/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -46,6 +46,34 @@ describe("TextInput modifiers", () => {
 		const input = await screen.findByTestId("txtnpt-1");
 		expect(input.className).toBe("");
 	});
+
+	it("should render a text input with a wrapper class", async () => {
+		render(
+			<TextInput
+				label="toto"
+				name="toto"
+				className="toto"
+				data-testid="txtnpt-1"
+			/>,
+		);
+		const input = await screen.findByTestId("txtnpt-1");
+		expect(input.className).not.toContain("toto");
+		expect(input.parentElement?.className).toContain("toto");
+	});
+
+	it("should render a text input with an input class", async () => {
+		render(
+			<TextInput
+				label="toto"
+				name="toto"
+				inputClassName="toto"
+				data-testid="txtnpt-1"
+			/>,
+		);
+		const input = await screen.findByTestId("txtnpt-1");
+		expect(input.className).toContain("toto");
+		expect(input.parentElement?.className).not.toContain("toto");
+	});
 });
 
 describe("TextInput methods", () => {

diff --git a/packages/ui-components/src/components/TextInput/utilities.ts b/packages/ui-components/src/components/TextInput/utilities.ts
@@ -9,6 +9,7 @@ import {
 
 type getTextInputClassesProps = {
 	className?: string;
+	inputClassName?: string;
 	raw: boolean;
 	focusKind: string;
 	borderKind: string;
@@ -104,6 +105,7 @@ const getTextInputHelperTextClasses = ({
 
 export const getTextInputClasses = ({
 	className,
+	inputClassName,
 	raw,
 	focusKind,
 	borderKind,
@@ -112,13 +114,15 @@ export const getTextInputClasses = ({
 	noBorder,
 	error,
 }: getTextInputClassesProps) => {
-	const wrapper = raw ? undefined : `${TEXT_INPUT_WRAPPER_CLASSNAME} w-full`;
+	const wrapper = raw
+		? className
+		: `${TEXT_INPUT_WRAPPER_CLASSNAME} w-full ${className}`;
 
 	const input = raw
-		? className
+		? inputClassName
 		: clsx(
 				TEXT_INPUT_CLASSNAME,
-				className,
+				inputClassName,
 				getTextInputBaseClasses(),
 				getTextInputSizesClasses(),
 				getTextInputColorClasses(),