feat(ui-system): adding prop "className" to ThemeProvider

packages/ui-system/src/common/constants.ts

@@ -1,4 +1,5 @@
 export const FLEXGRID_CLASSNAME = "av-flexgrid";
 export const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item";
+export const THEMEPROVIDER_CLASSNAME = "av-theme-provider";
 
 export const FLEXGRID_GAP_RATIO = 0.25;

packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,13 +1,17 @@
+import clsx from "clsx";
 import { useEffect, useRef } from "react";
 
+import { THEMEPROVIDER_CLASSNAME } from "../../common/constants";
 import { ThemeProviderProps } from "./ThemeProviderTypes";
 
 export const ThemeProvider = ({
 	customTheme,
 	children,
 	global,
+	className,
 }: ThemeProviderProps) => {
 	const wrapperRef = useRef<HTMLDivElement>(null);
+	const wrapperClass = clsx(THEMEPROVIDER_CLASSNAME, "contents", className);
 
 	useEffect(() => {
 		const wrapper = global
@@ -22,7 +26,7 @@ export const ThemeProvider = ({
 	}, [customTheme, global]);
 
 	return customTheme || !global ? (
-		<div ref={wrapperRef} className="contents">
+		<div ref={wrapperRef} className={wrapperClass}>
 			{children}
 		</div>
 	) : (

packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts

@@ -3,6 +3,10 @@ export type ThemeProviderProps = {
 	 * The children to render.
 	 */
 	children: React.ReactNode;
+	/**
+	 * CSS class(es) to add to the main component wrapper.
+	 */
+	className?: string;
 	/**
 	 * An object specifying custom properties impacting the base theme.
 	 * Not all custom properties need to be specified.

packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx

@@ -1,5 +1,7 @@
 import { act, render, screen } from "@testing-library/react";
 
+import { expectToHaveClasses } from "../../../../../../configuration/tests-helpers";
+import { THEMEPROVIDER_CLASSNAME } from "../../../common/constants";
 import { ThemeProvider } from "../..";
 
 const customTheme = {
@@ -13,6 +15,16 @@ describe("ThemeProvider (exceptions)", () => {
 	});
 });
 
+describe("ThemeProvider props tests", () => {
+	it("should have default and custom classes", async () => {
+		await act(async () => {
+			render(<ThemeProvider className="toto">Hello World</ThemeProvider>);
+		});
+		const node = await screen.findByText("Hello World");
+		expectToHaveClasses(node, [THEMEPROVIDER_CLASSNAME, "contents", "toto"]);
+	});
+});
+
 describe("ThemeProvider injection tests", () => {
 	it("should NOT inject a custom theme locally [no custom theme]", async () => {
 		await act(async () => {