From 306791c85047476db296445d01af1237c46416cf Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 26 Sep 2024 16:04:34 -0400
Subject: [PATCH 1/4] fix(TextInput): misaligned label and helper text at
 different sizes

---
 .../src/Form/TextInput.stories.tsx            | 26 ++++++++
 .../tailwindcss/components/textInput.ts       |  2 +-
 .../src/components/TextInput/TextInput.tsx    | 63 ++++++++++++++++++-
 .../TextInput/__tests__/TextInput.test.tsx    |  4 +-
 .../src/components/TextInput/utilities.ts     | 16 ++---
 5 files changed, 99 insertions(+), 12 deletions(-)

diff --git a/packages/documentation/src/Form/TextInput.stories.tsx b/packages/documentation/src/Form/TextInput.stories.tsx
index b6620bc8..0f395d31 100644
--- a/packages/documentation/src/Form/TextInput.stories.tsx
+++ b/packages/documentation/src/Form/TextInput.stories.tsx
@@ -65,3 +65,29 @@ RightElement.args = {
 	),
 	helperText: "Powered by the sun",
 };
+
+export const AllSizes: Story<any> = (args) => (
+	<div className="min-h-10">
+		<form noValidate>
+			<div className="h-28">
+				<TextInput {...args} size="xs" defaultValue="xs" />
+			</div>
+			<div className="h-28">
+				<TextInput {...args} size="sm" defaultValue="sm" />
+			</div>
+			<div className="h-28">
+				<TextInput {...args} size="md" defaultValue="md" />
+			</div>
+			<div className="h-28">
+				<TextInput {...args} size="lg" defaultValue="lg" />
+			</div>
+			<div className="h-28">
+				<TextInput {...args} size="xl" defaultValue="xl" />
+			</div>
+		</form>
+	</div>
+);
+AllSizes.args = {
+	helperText: "Powered by the sun",
+	label: "Pose your question here",
+};
diff --git a/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts b/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts
index bde7a9df..7209ebf8 100644
--- a/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts
+++ b/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts
@@ -8,7 +8,7 @@ export default {
 	/* move the label above the field (on focus) */
 	[`.av-text-input:focus + label[aria-hidden="true"],
 	  .av-text-input:not(:placeholder-shown) + label[aria-hidden="true"]`]: {
-		transform: "translate(12px, var(--av-text-input-label, -37px)) scale(0.75)",
+		transform: "translate(12px, var(--av-text-input-label, -33px)) scale(0.75)",
 	},
 	/* move the helper text below the field */
 	".av-text-input-helper-text": {
diff --git a/packages/ui-textinput/src/components/TextInput/TextInput.tsx b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
index 43b6a66c..5b1554f4 100644
--- a/packages/ui-textinput/src/components/TextInput/TextInput.tsx
+++ b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
@@ -1,6 +1,6 @@
 import { useResizeObserver, useUniqueId } from "@versini/ui-hooks";
 import { LiveRegion } from "@versini/ui-private";
-import React, { useLayoutEffect, useState } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 
 import { TEXT_INPUT_CLASSNAME } from "../../common/constants";
 import type { TextInputProps } from "./TextInputTypes";
@@ -40,6 +40,9 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 		const [inputPaddingRight, setInputPaddingRight] = useState(0);
 		const inputId = useUniqueId({ id, prefix: `${TEXT_INPUT_CLASSNAME}-` });
 		const liveErrorMessage = `${name} error, ${helperText}`;
+		const labelRef = useRef<HTMLLabelElement>(null);
+		const helperTextRef = useRef<HTMLDivElement>(null);
+
 		const textInputClassName = getTextInputClasses({
 			className,
 			inputClassName,
@@ -68,6 +71,62 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 		}, [rect]);
 		/* c8 ignore end */
 
+		useLayoutEffect(() => {
+			switch (size) {
+				case "xs":
+					labelRef?.current?.style.setProperty(
+						"--av-text-input-label",
+						"-25px",
+					);
+					helperTextRef?.current?.style.setProperty(
+						"--av-text-input-helper-text",
+						"29px",
+					);
+					break;
+				case "sm":
+					labelRef?.current?.style.setProperty(
+						"--av-text-input-label",
+						"-29px",
+					);
+					helperTextRef?.current?.style.setProperty(
+						"--av-text-input-helper-text",
+						"33px",
+					);
+					break;
+				case "lg":
+					labelRef?.current?.style.setProperty(
+						"--av-text-input-label",
+						"-15px",
+					);
+					helperTextRef?.current?.style.setProperty(
+						"--av-text-input-helper-text",
+						"22px",
+					);
+					break;
+				case "xl":
+					labelRef?.current?.style.setProperty(
+						"--av-text-input-label",
+						"-19px",
+					);
+					helperTextRef?.current?.style.setProperty(
+						"--av-text-input-helper-text",
+						"25px",
+					);
+					break;
+
+				default:
+					labelRef?.current?.style.setProperty(
+						"--av-text-input-label",
+						"-33px",
+					);
+					helperTextRef?.current?.style.setProperty(
+						"--av-text-input-helper-text",
+						"37px",
+					);
+					break;
+			}
+		}, [size]);
+
 		return (
 			<div className={textInputClassName.wrapper}>
 				<label
@@ -93,6 +152,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 				/>
 				{!raw && !labelHidden && (
 					<label
+						ref={labelRef}
 						aria-hidden={true}
 						htmlFor={inputId}
 						className={textInputClassName.visibleLabel}
@@ -103,6 +163,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 
 				{helperText && (
 					<div
+						ref={helperTextRef}
 						id={`${inputId}-helper`}
 						className={textInputClassName.helperText}
 					>
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 13364b53..f6ad21af 100644
--- a/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx
+++ b/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -35,11 +35,11 @@ describe("TextInput sizes", () => {
 		switch (size) {
 			case "xs":
 				heightClass = "h-8";
-				paddingClass = "px-2";
+				paddingClass = "px-4";
 				break;
 			case "sm":
 				heightClass = "h-10";
-				paddingClass = "px-3";
+				paddingClass = "px-4";
 				break;
 			case "md":
 				heightClass = "h-12";
diff --git a/packages/ui-textinput/src/components/TextInput/utilities.ts b/packages/ui-textinput/src/components/TextInput/utilities.ts
index ae3ab322..c974c3d2 100644
--- a/packages/ui-textinput/src/components/TextInput/utilities.ts
+++ b/packages/ui-textinput/src/components/TextInput/utilities.ts
@@ -164,23 +164,23 @@ export const getTextInputClasses = ({
 				getSpacing(spacing),
 			);
 
-	let sizeClass = "";
+	let heightClass = "";
 	switch (size) {
 		case "xs":
-			sizeClass = "h-8 px-2";
+			heightClass = "h-8";
 			break;
 		case "sm":
-			sizeClass = "h-10 px-3";
+			heightClass = "h-10";
 			break;
 		case "lg":
-			sizeClass = "h-14 px-4";
+			heightClass = "h-14";
 			break;
 		case "xl":
-			sizeClass = "h-16 px-4";
+			heightClass = "h-16";
 			break;
 
 		default:
-			sizeClass = "h-12 px-4";
+			heightClass = "h-12";
 			break;
 	}
 
@@ -189,8 +189,8 @@ export const getTextInputClasses = ({
 		: clsx(
 				TEXT_INPUT_CLASSNAME,
 				inputClassName,
-				sizeClass,
-				"rounded-md text-base",
+				heightClass,
+				"rounded-md text-base px-4",
 				getTextInputColorClasses({ mode }),
 				getTextInputFocusClasses({ focusMode }),
 				getTextInputBorderClasses({ noBorder, error }),

From 022e06203fbc54c8efc21fb60408e1e381556ac3 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 26 Sep 2024 16:31:16 -0400
Subject: [PATCH 2/4] Update TextInput.tsx

---
 .../src/components/TextInput/TextInput.tsx    | 71 +++++--------------
 1 file changed, 18 insertions(+), 53 deletions(-)

diff --git a/packages/ui-textinput/src/components/TextInput/TextInput.tsx b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
index 5b1554f4..07e98326 100644
--- a/packages/ui-textinput/src/components/TextInput/TextInput.tsx
+++ b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
@@ -43,6 +43,14 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 		const labelRef = useRef<HTMLLabelElement>(null);
 		const helperTextRef = useRef<HTMLDivElement>(null);
 
+		const sizeStyles = {
+			xs: { label: "-25px", helperText: "29px" },
+			sm: { label: "-29px", helperText: "33px" },
+			md: { label: "-33px", helperText: "37px" },
+			lg: { label: "-15px", helperText: "22px" },
+			xl: { label: "-19px", helperText: "25px" },
+		};
+
 		const textInputClassName = getTextInputClasses({
 			className,
 			inputClassName,
@@ -71,60 +79,17 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 		}, [rect]);
 		/* c8 ignore end */
 
+		/**
+		 * This effect sets the label and helper text position based on
+		 * the size of the input.
+		 */
 		useLayoutEffect(() => {
-			switch (size) {
-				case "xs":
-					labelRef?.current?.style.setProperty(
-						"--av-text-input-label",
-						"-25px",
-					);
-					helperTextRef?.current?.style.setProperty(
-						"--av-text-input-helper-text",
-						"29px",
-					);
-					break;
-				case "sm":
-					labelRef?.current?.style.setProperty(
-						"--av-text-input-label",
-						"-29px",
-					);
-					helperTextRef?.current?.style.setProperty(
-						"--av-text-input-helper-text",
-						"33px",
-					);
-					break;
-				case "lg":
-					labelRef?.current?.style.setProperty(
-						"--av-text-input-label",
-						"-15px",
-					);
-					helperTextRef?.current?.style.setProperty(
-						"--av-text-input-helper-text",
-						"22px",
-					);
-					break;
-				case "xl":
-					labelRef?.current?.style.setProperty(
-						"--av-text-input-label",
-						"-19px",
-					);
-					helperTextRef?.current?.style.setProperty(
-						"--av-text-input-helper-text",
-						"25px",
-					);
-					break;
-
-				default:
-					labelRef?.current?.style.setProperty(
-						"--av-text-input-label",
-						"-33px",
-					);
-					helperTextRef?.current?.style.setProperty(
-						"--av-text-input-helper-text",
-						"37px",
-					);
-					break;
-			}
+			const { label, helperText } = sizeStyles[size];
+			labelRef?.current?.style.setProperty("--av-text-input-label", label);
+			helperTextRef?.current?.style.setProperty(
+				"--av-text-input-helper-text",
+				helperText,
+			);
 		}, [size]);
 
 		return (

From 185672206e54e3b2b80760e2766a335594f5261a Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 26 Sep 2024 17:12:46 -0400
Subject: [PATCH 3/4] Update textInput.ts

---
 .../ui-styles/src/plugins/tailwindcss/components/textInput.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts b/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts
index 7209ebf8..99a5c9ad 100644
--- a/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts
+++ b/packages/ui-styles/src/plugins/tailwindcss/components/textInput.ts
@@ -13,7 +13,7 @@ export default {
 	/* move the helper text below the field */
 	".av-text-input-helper-text": {
 		transform:
-			"translate(12px, var(--av-text-input-helper-text, 44px)) scale(0.75)",
+			"translate(12px, var(--av-text-input-helper-text, 38px)) scale(0.75)",
 		transformOrigin: "top left",
 	},
 };

From da8613587103b637b5859b3a92a13f001826828e Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 26 Sep 2024 17:12:51 -0400
Subject: [PATCH 4/4] Update TextInput.tsx

---
 .../ui-textinput/src/components/TextInput/TextInput.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-textinput/src/components/TextInput/TextInput.tsx b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
index 07e98326..06681526 100644
--- a/packages/ui-textinput/src/components/TextInput/TextInput.tsx
+++ b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
@@ -44,9 +44,9 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 		const helperTextRef = useRef<HTMLDivElement>(null);
 
 		const sizeStyles = {
-			xs: { label: "-25px", helperText: "29px" },
-			sm: { label: "-29px", helperText: "33px" },
-			md: { label: "-33px", helperText: "37px" },
+			xs: { label: "-25px", helperText: "30px" },
+			sm: { label: "-29px", helperText: "34px" },
+			md: { label: "-33px", helperText: "38px" },
 			lg: { label: "-15px", helperText: "22px" },
 			xl: { label: "-19px", helperText: "25px" },
 		};