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

…#835)

packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts

@@ -97,8 +97,9 @@ const componentsWithNoSpacingProp = [
 	"ui-table",
 	"ui-textarea",
 	"ui-textinput",
-	"ui-truncate",
 	"ui-toggle",
+	"ui-togglegroup",
+	"ui-truncate",
 ];
 
 /**

packages/ui-togglegroup/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",
@@ -40,12 +38,9 @@
 	"dependencies": {
 		"@radix-ui/react-toggle-group": "1.1.1",
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }

packages/ui-togglegroup/src/components/ToggleGroup/ToggleGroup.tsx

@@ -17,11 +17,11 @@ export const ToggleGroup = ({
 	focusMode = "system",
 	size = "medium",
 	defaultValue,
-	spacing,
+	className,
 
 	...otherProps
 }: ToggleGroupProps) => {
-	const toggleGroupClasses = getToggleGroupClasses({ mode, spacing });
+	const toggleGroupClasses = getToggleGroupClasses({ mode, className });
 	const contextValue = { size, focusMode, mode };
 	return (
 		<ToggleGroupContext.Provider value={contextValue}>

packages/ui-togglegroup/src/components/ToggleGroup/ToggleGroupTypes.d.ts

@@ -1,5 +1,4 @@
 import type * as ToggleGroupRadix from "@radix-ui/react-toggle-group";
-import type { SpacingTypes } from "@versini/ui-types";
 
 export type Size = "small" | "medium" | "large";
 export type Mode = "dark" | "light" | "system" | "alt-system";
@@ -18,7 +17,10 @@ export type ToggleGroupProps = {
 	 * The size of the component.
 	 */
 	size?: Size;
-} & Omit<ToggleGroupRadix.ToggleGroupSingleProps, "type", "defaultValue"> &
-	SpacingTypes.Props;
+	/**
+	 * The classes to apply to the component.
+	 */
+	className?: string;
+} & Omit<ToggleGroupRadix.ToggleGroupSingleProps, "type", "defaultValue">;
 
 export type ToggleGroupItemProps = ToggleGroupRadix.ToggleGroupItemProps;

packages/ui-togglegroup/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -10,6 +10,20 @@ describe("ToggleGroup (exceptions)", () => {
 	});
 });
 
+describe("ToggleGroup spacing", () => {
+	it("should render a toggle group with a right margin spacing", async () => {
+		render(
+			<ToggleGroup className="mr-2">
+				<ToggleGroupItem value="toto" />
+			</ToggleGroup>,
+		);
+		const group = screen.getByRole("group");
+		// not only it should be there, but it should be the last entry
+		expect(group.className).toContain("mr-2");
+		expect(group.className.slice(-4)).toBe("mr-2");
+	});
+});
+
 describe("ToggleGroup modifiers", () => {
 	it("should render a default ToggleGroup (light)", async () => {
 		render(

packages/ui-togglegroup/src/components/ToggleGroup/utilities.ts

@@ -1,5 +1,3 @@
-import { getSpacing } from "@versini/ui-spacing";
-import type { SpacingTypes } from "@versini/ui-types";
 import clsx from "clsx";
 
 import {
@@ -86,11 +84,10 @@ export const getToggleGroupItemClasses = ({
 
 export const getToggleGroupClasses = ({
 	mode,
-	spacing,
-}: { mode: Mode } & SpacingTypes.Props) => {
+	className,
+}: { mode: Mode; className: string }) => {
 	return clsx(
 		TOGGLEGROUP_CLASSNAME,
-		getSpacing(spacing),
 		"inline-flex p-1",
 		"rounded-sm",
 		{
@@ -101,5 +98,6 @@ export const getToggleGroupClasses = ({
 			"bg-surface-darker text-copy-lighter dark:bg-surface-light dark:text-copy-dark":
 				mode === "alt-system",
 		},
+		className,
 	);
 };

packages/ui-togglegroup/tailwind.config.js

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