Merge pull request #101 from aversini/refactor(TextInput)-prefer-tail…

…wind-classes-over-inline-styles refactor(TextInput): prefer tailwind classes over inline styles
versini-org · Nov 29, 2023 · bf99f0e · bf99f0e
2 parents d23153b + 818b45e
commit bf99f0e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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;
@@ -50,21 +56,19 @@
 	 * 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);
 	}
 
 	.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;
 	}
 }