fix(TextInput)!: removing spacing prop in favor of Tailwind classes (#…

…833)
versini-org · Dec 29, 2024 · 6f28910 · 6f28910
1 parent ee99870
commit 6f28910
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 28 deletions.
diff --git a/examples/with-vite/src/components/CustomForm.tsx b/examples/with-vite/src/components/CustomForm.tsx
@@ -6,7 +6,7 @@ export const CustomForm = () => {
 		<form>
 			<div className="flex gap-2">
 				<TextInput
-					spacing={{ t: 4 }}
+					className="mt-4"
 					name="question"
 					label="Type your question here"
 					helperText="Powered by the sun"

diff --git a/examples/with-webpack/src/components/CustomForm.tsx b/examples/with-webpack/src/components/CustomForm.tsx
@@ -6,7 +6,7 @@ export const CustomForm = () => {
 		<form>
 			<div className="flex gap-2">
 				<TextInput
-					spacing={{ t: 4 }}
+					className="mt-4"
 					name="question"
 					label="Type your question here"
 					helperText="Powered by the sun"

diff --git a/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts b/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts
@@ -96,6 +96,7 @@ const componentsWithNoSpacingProp = [
 	"ui-svgicon",
 	"ui-table",
 	"ui-textarea",
+	"ui-textinput",
 	"ui-truncate",
 ];
 

diff --git a/packages/ui-textinput/package.json b/packages/ui-textinput/package.json
@@ -14,9 +14,7 @@
 	"type": "module",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"scripts": {
 		"build:check": "tsc",
 		"build:js": "vite build",
@@ -41,12 +39,9 @@
 		"@tailwindcss/typography": "0.5.15",
 		"@versini/ui-hooks": "workspace:../ui-hooks",
 		"@versini/ui-liveregion": "workspace:../ui-liveregion",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }
diff --git a/packages/ui-textinput/src/components/TextInput/TextInput.tsx b/packages/ui-textinput/src/components/TextInput/TextInput.tsx
@@ -30,7 +30,6 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 
 			rightElement,
 			rightElementClassName,
-			spacing,
 			size = "md",
 
 			...extraProps
@@ -60,7 +59,6 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 			focusMode,
 			disabled,
 			noBorder,
-			spacing,
 			mode,
 			size,
 			rightElementClassName,

diff --git a/packages/ui-textinput/src/components/TextInput/TextInputMask.tsx b/packages/ui-textinput/src/components/TextInput/TextInputMask.tsx
@@ -34,8 +34,6 @@ export const TextInputMask = React.forwardRef<
 
 			rightElement,
 
-			spacing,
-
 			...otherProps
 		},
 		ref,
@@ -166,7 +164,6 @@ export const TextInputMask = React.forwardRef<
 					labelHidden={labelHidden}
 					type={masked ? "password" : "text"}
 					disabled={disabled}
-					spacing={spacing}
 					onBlur={handleFieldBlur}
 					onFocus={handleFieldFocus}
 					onChange={handleChange}

diff --git a/packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts b/packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts
@@ -1,5 +1,3 @@
-import type { SpacingTypes } from "@versini/ui-types";
-
 export type Size = "xs" | "sm" | "md" | "lg" | "xl";
 export type SetTimeoutResult = ReturnType<typeof setTimeout> | null;
 export type CommonTextInputProps = {
@@ -55,8 +53,7 @@ export type CommonTextInputProps = {
 	 * Controls input height and horizontal padding, 'md' by default
 	 */
 	size?: Size;
-} & SpacingTypes.Props &
-	Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
 export type TextInputProps = {
 	/**

diff --git a/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx b/packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -10,6 +10,27 @@ describe("TextInput (exceptions)", () => {
 	});
 });
 
+describe("TextInput spacing", () => {
+	it("should render a text input with a right margin spacing", async () => {
+		render(
+			<TextInput
+				label="toto"
+				name="toto"
+				className="mr-2"
+				data-testid="txtnpt-1"
+			/>,
+		);
+		const input = await screen.findByTestId("txtnpt-1");
+		expect(input.className).not.toContain("mr-2");
+		if (input.parentElement) {
+			// not only it should be there, but it should be the last entry
+			expect(input.parentElement.className).toContain("mr-2");
+			expect(input.parentElement.className).toContain("relative");
+			expect(input.parentElement.className.slice(-4)).toBe("mr-2");
+		}
+	});
+});
+
 describe("TextInput sizes", () => {
 	it.each`
 		size    | description

diff --git a/packages/ui-textinput/src/components/TextInput/__tests__/TextInputMask.test.tsx b/packages/ui-textinput/src/components/TextInput/__tests__/TextInputMask.test.tsx
@@ -39,6 +39,32 @@ describe("TextInputMask (exceptions)", () => {
 	});
 });
 
+describe("TextInputMask spacing", () => {
+	it("should render a text input with a right margin spacing", async () => {
+		render(
+			<TextInputMask
+				label="toto"
+				name="toto"
+				className="mr-2"
+				data-testid="txtnpt-1"
+				rightElement={
+					<MyButtonIcon>
+						<MyIconHide />
+					</MyButtonIcon>
+				}
+			/>,
+		);
+		const input = await screen.findByTestId("txtnpt-1");
+		expect(input.className).not.toContain("mr-2");
+		if (input.parentElement) {
+			// not only it should be there, but it should be the last entry
+			expect(input.parentElement.className).toContain("mr-2");
+			expect(input.parentElement.className).toContain("relative");
+			expect(input.parentElement.className.slice(-4)).toBe("mr-2");
+		}
+	});
+});
+
 describe("TextInputMask modifiers", () => {
 	it("should render a dark or light (system) text input", async () => {
 		render(

diff --git a/packages/ui-textinput/src/components/TextInput/utilities.ts b/packages/ui-textinput/src/components/TextInput/utilities.ts
@@ -1,5 +1,3 @@
-import { getSpacing } from "@versini/ui-spacing";
-import type { SpacingTypes } from "@versini/ui-types";
 import clsx from "clsx";
 
 import {
@@ -21,7 +19,7 @@ type getTextInputClassesProps = {
 	className?: string;
 	rightElementClassName?: string;
 	inputClassName?: string;
-} & SpacingTypes.Props;
+};
 
 const getTextInputColorClasses = ({
 	mode,
@@ -151,7 +149,6 @@ export const getTextInputClasses = ({
 	disabled,
 	noBorder,
 	error,
-	spacing,
 	mode,
 	focusMode,
 	size,
@@ -163,7 +160,6 @@ export const getTextInputClasses = ({
 				"relative flex w-full flex-col justify-center",
 				TEXT_INPUT_WRAPPER_CLASSNAME,
 				className,
-				getSpacing(spacing),
 			);
 
 	let heightClass = "";
@@ -190,7 +186,7 @@ export const getTextInputClasses = ({
 		? clsx(inputClassName)
 		: clsx(
 				TEXT_INPUT_CLASSNAME,
-				inputClassName,
+
 				heightClass,
 				"rounded-md text-base px-4",
 				getTextInputColorClasses({ mode }),
@@ -199,6 +195,7 @@ export const getTextInputClasses = ({
 				{
 					"disabled:cursor-not-allowed disabled:opacity-50": disabled,
 				},
+				inputClassName,
 			);
 
 	const accessibleLabel = raw ? undefined : "sr-only";

diff --git a/packages/ui-textinput/tailwind.config.js b/packages/ui-textinput/tailwind.config.js
@@ -1,2 +1,2 @@
 import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
-export default commonTailwindConfigForComponent();
+export default commonTailwindConfigForComponent("ui-textinput");
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml