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 -->

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... */

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 = {

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");

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,