From ffe1486f0d8f8ec6d0e4a029402e2b3b1b88f404 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Sun, 29 Dec 2024 14:16:55 -0500
Subject: [PATCH] fix(Spinner)!: removing spacing prop in favor of Tailwind
 classes (#830)

---
 packages/ui-spinner/package.json                       |  9 ++-------
 packages/ui-spinner/src/components/Spinner/Spinner.tsx |  8 ++++----
 .../src/components/Spinner/SpinnerTypes.d.ts           |  8 +++++---
 .../src/components/Spinner/__tests__/Spinner.test.tsx  | 10 ++++++++++
 packages/ui-spinner/tailwind.config.js                 |  2 +-
 .../src/plugins/tailwindcss/tailwindPlugin.ts          |  1 +
 pnpm-lock.yaml                                         |  3 ---
 7 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/ui-spinner/package.json b/packages/ui-spinner/package.json
index d0b4d35a..fc069e4b 100644
--- a/packages/ui-spinner/package.json
+++ b/packages/ui-spinner/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",
@@ -39,11 +37,8 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }
diff --git a/packages/ui-spinner/src/components/Spinner/Spinner.tsx b/packages/ui-spinner/src/components/Spinner/Spinner.tsx
index 274cb476..4d1a5a76 100644
--- a/packages/ui-spinner/src/components/Spinner/Spinner.tsx
+++ b/packages/ui-spinner/src/components/Spinner/Spinner.tsx
@@ -1,4 +1,3 @@
-import { getSpacing } from "@versini/ui-spacing";
 import clsx from "clsx";
 
 import { SPINNER_CLASSNAME } from "../../common/constants";
@@ -8,13 +7,13 @@ export const Spinner = ({
 	spinnerRef,
 	mode = "system",
 	type = "circle",
-	spacing,
+	className,
 }: SpinnerProps) => {
 	const spinnerClassName =
 		type === "circle"
 			? clsx(
 					SPINNER_CLASSNAME,
-					getSpacing(spacing),
+
 					"h-8 w-8",
 					"align-[-0.125em]",
 					"border-4",
@@ -25,8 +24,9 @@ export const Spinner = ({
 						"text-copy-dark dark:text-copy-accent": mode === "system",
 						"text-copy-accent dark:text-copy-dark": mode === "alt-system",
 					},
+					className,
 				)
-			: clsx(SPINNER_CLASSNAME, getSpacing(spacing));
+			: clsx(SPINNER_CLASSNAME, className);
 
 	const dotClassName = clsx("av-spinner__dot", {
 		"fill-copy-dark": mode === "dark",
diff --git a/packages/ui-spinner/src/components/Spinner/SpinnerTypes.d.ts b/packages/ui-spinner/src/components/Spinner/SpinnerTypes.d.ts
index b92ff567..5a95b18c 100644
--- a/packages/ui-spinner/src/components/Spinner/SpinnerTypes.d.ts
+++ b/packages/ui-spinner/src/components/Spinner/SpinnerTypes.d.ts
@@ -1,6 +1,8 @@
-import type { SpacingTypes } from "@versini/ui-types";
-
 export type SpinnerProps = {
+	/**
+	 * The class name to apply to the spinner.
+	 */
+	className?: string;
 	/**
 	 * The mode of spinner to render. This will change the color of the spinner.
 	 */
@@ -13,4 +15,4 @@ export type SpinnerProps = {
 	 * The type of spinner to render. This will change the layout of the spinner.
 	 */
 	type?: "circle" | "dots";
-} & SpacingTypes.Props;
+};
diff --git a/packages/ui-spinner/src/components/Spinner/__tests__/Spinner.test.tsx b/packages/ui-spinner/src/components/Spinner/__tests__/Spinner.test.tsx
index 91d78977..94159797 100644
--- a/packages/ui-spinner/src/components/Spinner/__tests__/Spinner.test.tsx
+++ b/packages/ui-spinner/src/components/Spinner/__tests__/Spinner.test.tsx
@@ -10,6 +10,16 @@ describe("Spinner (exceptions)", () => {
 	});
 });
 
+describe("Spinner spacing", () => {
+	it("should render a spinner with a right margin spacing", async () => {
+		render(<Spinner className="mr-2" />);
+		const node = await screen.findByRole("status");
+		// not only it should be there, but it should be the last entry
+		expect(node.className).toContain("mr-2");
+		expect(node.className.slice(-4)).toBe("mr-2");
+	});
+});
+
 describe("Spinner modifiers", () => {
 	it("should render a default Spinner (dark)", async () => {
 		render(<Spinner />);
diff --git a/packages/ui-spinner/tailwind.config.js b/packages/ui-spinner/tailwind.config.js
index 42ba260d..dcc50624 100644
--- a/packages/ui-spinner/tailwind.config.js
+++ b/packages/ui-spinner/tailwind.config.js
@@ -1,2 +1,2 @@
 import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
-export default commonTailwindConfigForComponent();
+export default commonTailwindConfigForComponent("ui-spinner");
diff --git a/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts b/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts
index 6cea1ab3..2a4e974c 100644
--- a/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts
+++ b/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts
@@ -92,6 +92,7 @@ const componentsWithNoSpacingProp = [
 	"ui-modal",
 	"ui-panel",
 	"ui-pill",
+	"ui-spinner",
 	"ui-svgicon",
 	"ui-truncate",
 ];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c8b88a3..42af04a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -732,9 +732,6 @@ importers:
       '@tailwindcss/typography':
         specifier: 0.5.15
         version: 0.5.15(tailwindcss@3.4.17)
-      '@versini/ui-spacing':
-        specifier: workspace:../ui-spacing
-        version: link:../ui-spacing
       '@versini/ui-types':
         specifier: workspace:../ui-types
         version: link:../ui-types