From 0374ebe7bc477f949f3d652a78ee27a30299453f Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Mon, 30 Sep 2024 09:18:49 -0400
Subject: [PATCH] feat(TextInput): adding new prop: rightElementClassName
 (#710)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new prop, `rightElementClassName`, for enhanced styling
of the right element in the TextInput component.
- **Bug Fixes**
- Adjusted padding logic to accommodate the width of the right element,
ensuring proper layout.
- **Tests**
- Added new test cases for rendering with custom classes and updated
existing tests for clarity and coverage.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/TextInput/TextInput.tsx       |  2 ++
 .../src/components/TextInput/TextInputTypes.d.ts |  4 ++++
 .../TextInput/__tests__/TextInput.test.tsx       | 16 +++++++++++++++-
 .../src/components/TextInput/utilities.ts        |  6 +++++-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/ui-textinput/src/components/TextInput/TextInput.tsx b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
index 06681526..006033d8 100644
--- a/packages/ui-textinput/src/components/TextInput/TextInput.tsx
+++ b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
@@ -29,6 +29,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 			helperText = "",
 
 			rightElement,
+			rightElementClassName,
 			spacing,
 			size = "md",
 
@@ -62,6 +63,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 			spacing,
 			mode,
 			size,
+			rightElementClassName,
 		});
 
 		/* c8 ignore start - ResizeObserver is tough to test... */
diff --git a/packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts b/packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts
index c6b2a70a..b1e1091d 100644
--- a/packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts
+++ b/packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts
@@ -65,6 +65,10 @@ export type TextInputProps = {
 	 * elements, such a Button.
 	 */
 	rightElement?: React.ReactElement;
+	/**
+	 * Extra classes to add to the right element container.
+	 */
+	rightElementClassName?: string;
 } & CommonTextInputProps;
 
 export type TextInputMaskProps = {
diff --git a/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx b/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx
index f6ad21af..7dfed73b 100644
--- a/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx
+++ b/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -234,7 +234,7 @@ describe("TextInput modifiers", () => {
 		}
 	});
 
-	it("should render a text input with an input class", async () => {
+	it("should render a text input with a custom input class", async () => {
 		render(
 			<TextInput
 				label="toto"
@@ -260,6 +260,20 @@ describe("TextInput modifiers", () => {
 		await screen.findByText("right element");
 	});
 
+	it("should render a text input with a right element custom class", async () => {
+		render(
+			<TextInput
+				label="toto"
+				name="toto"
+				rightElementClassName="toto"
+				rightElement={<div data-testid="txtnpt-1">right element</div>}
+			/>,
+		);
+		const rightEl = (await screen.findByTestId("txtnpt-1")).parentElement;
+		expect(rightEl?.className).toContain("toto");
+		expect(rightEl?.className).toContain("absolute");
+	});
+
 	it("should render a disabled text input", async () => {
 		render(<TextInput label="hello world" name="toto" disabled />);
 		const label = await screen.findAllByText("hello world");
diff --git a/packages/ui-textinput/src/components/TextInput/utilities.ts b/packages/ui-textinput/src/components/TextInput/utilities.ts
index c974c3d2..377cdfff 100644
--- a/packages/ui-textinput/src/components/TextInput/utilities.ts
+++ b/packages/ui-textinput/src/components/TextInput/utilities.ts
@@ -19,6 +19,7 @@ type getTextInputClassesProps = {
 	size: Size;
 
 	className?: string;
+	rightElementClassName?: string;
 	inputClassName?: string;
 } & SpacingProps;
 
@@ -154,6 +155,7 @@ export const getTextInputClasses = ({
 	mode,
 	focusMode,
 	size,
+	rightElementClassName,
 }: getTextInputClassesProps) => {
 	const wrapper = raw
 		? className
@@ -215,7 +217,9 @@ export const getTextInputClasses = ({
 		disabled,
 	});
 
-	const rightElement = raw ? undefined : "absolute right-3";
+	const rightElement = raw
+		? undefined
+		: clsx("absolute right-3", rightElementClassName);
 
 	return {
 		wrapper,