fix(Spinner)!: removing spacing prop in favor of Tailwind classes (#830)

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"]
 }

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",

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;
+};

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 />);

packages/ui-spinner/tailwind.config.js

@@ -1,2 +1,2 @@
 import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
-export default commonTailwindConfigForComponent();
+export default commonTailwindConfigForComponent("ui-spinner");

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",
 ];