From 7819ec290a353eed79357b7808df54247b2c11f9 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Wed, 29 Nov 2023 11:35:40 -0500
Subject: [PATCH 1/2] refactor(TextInput): prefer tailwind classes over inline
 styles

---
 .../src/components/TextInput/TextInput.tsx    |  8 +++----
 .../src/components/TextInput/utilities.ts     | 22 ++++++++++++-------
 .../ui-components/src/components/index.css    | 22 +++++++++++--------
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/packages/ui-components/src/components/TextInput/TextInput.tsx b/packages/ui-components/src/components/TextInput/TextInput.tsx
index d0cb5ad1..66673ec0 100644
--- a/packages/ui-components/src/components/TextInput/TextInput.tsx
+++ b/packages/ui-components/src/components/TextInput/TextInput.tsx
@@ -53,11 +53,11 @@ export const TextInput = ({
 	}, [rightElement]);
 
 	return (
-		<span className={textInputClassName.wrapper}>
+		<div className={textInputClassName.wrapper}>
 			<label
 				htmlFor={inputId}
 				id={labelId}
-				className={textInputClassName.topLabel}
+				className={textInputClassName.accessibleLabel}
 			>
 				{label}
 			</label>
@@ -78,7 +78,7 @@ export const TextInput = ({
 				<label
 					aria-hidden={true}
 					htmlFor={inputId}
-					className={textInputClassName.bottomLabel}
+					className={textInputClassName.visibleLabel}
 				>
 					{label}
 				</label>
@@ -101,6 +101,6 @@ export const TextInput = ({
 					{liveErrorMessage}
 				</LiveRegion>
 			)}
-		</span>
+		</div>
 	);
 };
diff --git a/packages/ui-components/src/components/TextInput/utilities.ts b/packages/ui-components/src/components/TextInput/utilities.ts
index 7fde15d7..1ae96ee0 100644
--- a/packages/ui-components/src/components/TextInput/utilities.ts
+++ b/packages/ui-components/src/components/TextInput/utilities.ts
@@ -81,7 +81,7 @@ const getTextInputLabelClasses = ({
 }) => {
 	return raw
 		? ""
-		: clsx("cursor-text font-medium", {
+		: clsx("absolute cursor-text font-medium", {
 				[`text-copy-error-${errorKind}`]: error,
 				"text-copy-medium": !error,
 				"cursor-not-allowed opacity-50": disabled,
@@ -99,7 +99,7 @@ const getTextInputHelperTextClasses = ({
 }) => {
 	return raw
 		? undefined
-		: clsx(TEXT_INPUT_HELPER_TEXT_CLASSNAME, "font-medium", {
+		: clsx(TEXT_INPUT_HELPER_TEXT_CLASSNAME, "absolute font-medium", {
 				[`text-copy-error-${errorKind}`]: error,
 				"text-copy-medium": !error,
 		  });
@@ -118,7 +118,11 @@ export const getTextInputClasses = ({
 }: getTextInputClassesProps) => {
 	const wrapper = raw
 		? className
-		: clsx(`${TEXT_INPUT_WRAPPER_CLASSNAME} w-full justify-center`, className);
+		: clsx(
+				"relative flex w-full flex-col justify-center",
+				TEXT_INPUT_WRAPPER_CLASSNAME,
+				className,
+		  );
 
 	const input = raw
 		? clsx(inputClassName)
@@ -135,9 +139,9 @@ export const getTextInputClasses = ({
 				},
 		  );
 
-	const topLabel = raw ? undefined : VISUALLY_HIDDEN_CLASSNAME;
+	const accessibleLabel = raw ? undefined : VISUALLY_HIDDEN_CLASSNAME;
 
-	const bottomLabel = getTextInputLabelClasses({
+	const visibleLabel = getTextInputLabelClasses({
 		disabled,
 		raw,
 		error,
@@ -150,13 +154,15 @@ export const getTextInputClasses = ({
 		errorKind,
 	});
 
-	const rightElement = raw ? undefined : TEXT_INPUT_CONTROL_RIGHT_CLASSNAME;
+	const rightElement = raw
+		? undefined
+		: clsx(TEXT_INPUT_CONTROL_RIGHT_CLASSNAME, "absolute");
 
 	return {
 		wrapper,
 		input,
-		topLabel,
-		bottomLabel,
+		accessibleLabel,
+		visibleLabel,
 		helperText,
 		rightElement,
 	};
diff --git a/packages/ui-components/src/components/index.css b/packages/ui-components/src/components/index.css
index b5f48cdb..2fea6998 100644
--- a/packages/ui-components/src/components/index.css
+++ b/packages/ui-components/src/components/index.css
@@ -20,13 +20,19 @@
 }
 
 @layer components {
-	.av-text-input-wrapper {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-	}
-	.av-text-input-wrapper label {
-		position: absolute;
+	/**
+	 * There are 2 labels, one visible and one
+	 * hidden for accessibility.
+	 *
+	 * - The hidden label is used to describe the input
+	 *   field for screen readers.
+	 * - The visible label is used for the animation.
+	 *
+	 * Here we want to apply animation to the visible label.
+	 * It's the one that has the aria-hidden attribute set
+	 * to true.
+	 */
+	.av-text-input-wrapper label[aria-hidden="true"] {
 		/* move the label inline */
 		transform: translate(18px, 0) scale(1);
 		transform-origin: top left;
@@ -57,14 +63,12 @@
 	}
 
 	.av-text-input-helper-text {
-		position: absolute;
 		transform: translate(18px, 30px) scale(0.75);
 		transform-origin: top left;
 		transition: all 0.2s ease-out;
 	}
 
 	.av-text-input__control--right {
-		position: absolute;
 		right: 18px;
 	}
 }

From 818b45efbf9292ec8d0531c3d2d53e661b287192 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Wed, 29 Nov 2023 11:41:20 -0500
Subject: [PATCH 2/2] Update index.css

---
 packages/ui-components/src/components/index.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/components/index.css b/packages/ui-components/src/components/index.css
index 2fea6998..077d6938 100644
--- a/packages/ui-components/src/components/index.css
+++ b/packages/ui-components/src/components/index.css
@@ -56,8 +56,8 @@
 	 * that in the DOM, the label must be placed after the
 	 * input.
    */
-	.av-text-input:focus + label,
-	.av-text-input:not(:placeholder-shown) + label {
+	.av-text-input:focus + label[aria-hidden="true"],
+	.av-text-input:not(:placeholder-shown) + label[aria-hidden="true"] {
 		/* move the label up */
 		transform: translate(18px, -25px) scale(0.75);
 	}