From 9a5ab9aace78a8efddcaea14ac048c57b06f3e48 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Sun, 29 Dec 2024 18:19:55 -0500
Subject: [PATCH] fix(Flexgrid): margins are not taken into account in
 className prop (#838)

This pull request includes changes to the `Flexgrid` component and its
associated tests to improve the handling of class names and ensure
proper styling.

Changes to `Flexgrid` component:

*
[`packages/ui-system/src/components/Flexgrid/Flexgrid.tsx`](diffhunk://#diff-3551cc714509a392d7a76e5851c62b13d0bd208bbd82dc9e855cebb40dbe62b4L39-R51):
Modified the component to wrap the `flexgridClassName` div with an
additional `div` when `className` is provided, ensuring that the custom
class name is applied correctly.

Changes to `Flexgrid` tests:

*
[`packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx`](diffhunk://#diff-5ecedf8854e149098b7b30064eeca6ffaa58e34496160bdbc09615a964b048cfL114-R115):
Updated the test to check the parent element for the class name,
ensuring that the custom class name is applied to the correct element.
---
 .../ui-system/src/components/Flexgrid/Flexgrid.tsx    | 11 +++++++++--
 .../components/Flexgrid/__tests__/Flexgrid.test.tsx   |  4 ++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx b/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx
index 5e1b02b9..30451a02 100644
--- a/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx
+++ b/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx
@@ -36,12 +36,19 @@ export const Flexgrid = ({
 	const flexgridClassName = clsx(
 		FLEXGRID_CLASSNAME,
 		"box-border flex flex-wrap",
-		className,
 	);
 
 	const context = { columnGap, rowGap };
 
-	return (
+	return className ? (
+		<div className={className}>
+			<div className={flexgridClassName} style={cssRoot} {...otherProps}>
+				<FlexgridContext.Provider value={context}>
+					{children}
+				</FlexgridContext.Provider>
+			</div>
+		</div>
+	) : (
 		<div className={flexgridClassName} style={cssRoot} {...otherProps}>
 			<FlexgridContext.Provider value={context}>
 				{children}
diff --git a/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx b/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx
index 5fee6a72..c5373d74 100644
--- a/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx
+++ b/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx
@@ -111,7 +111,7 @@ describe("Flexgrid props", () => {
 		const gridRoot = await screen.findByTestId("grid-1");
 		expectToHaveStyles(gridRoot, { "align-items": "stretch" });
 		// not only it should be there, but it should be the last entry
-		expect(gridRoot).toHaveClass("mr-2");
-		expect(gridRoot.className.slice(-4)).toBe("mr-2");
+		expect(gridRoot.parentElement).toHaveClass("mr-2");
+		expect(gridRoot.parentElement?.className.slice(-4)).toBe("mr-2");
 	});
 });