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.

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}

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");
 	});
 });