feat: add className to MarigoldProvider (#3893)

* feat: add className to MarigoldProvider

* add test for it

* docs

* Create strong-kiwis-check.md

.changeset/strong-kiwis-check.md

@@ -0,0 +1,7 @@
+---
+"@marigold/storybook-config": patch
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+feat: add className to MarigoldProvider

config/storybook/.storybook/preview.tsx

@@ -59,7 +59,10 @@ export const decorators: any = [
             {Object.keys(THEME).map(key => (
               <OverlayContainerProvider value={`portalContainer-${key}`}>
                 <Frame key={key} id={key} title={`Theme "${key}"`}>
-                  <MarigoldProvider theme={THEME[key as ThemeNames]}>
+                  <MarigoldProvider
+                    theme={THEME[key as ThemeNames]}
+                    className="bg-bg-surface"
+                  >
                     <div className="p-4" data-theme={key}>
                       {Story()}
                     </div>
@@ -72,7 +75,10 @@ export const decorators: any = [
       }
       case 'core': {
         return (
-          <MarigoldProvider theme={THEME[theme as ThemeNames]}>
+          <MarigoldProvider
+            theme={THEME[theme as ThemeNames]}
+            className="bg-bg-surface"
+          >
             <div className="h-screen p-6">
               <FieldGroup labelWidth="200px">{Story()}</FieldGroup>
             </div>
@@ -81,7 +87,10 @@ export const decorators: any = [
       }
       default: {
         return (
-          <MarigoldProvider theme={THEME[theme as ThemeNames]}>
+          <MarigoldProvider
+            theme={THEME[theme as ThemeNames]}
+            className="bg-bg-surface"
+          >
             <div className="h-screen p-6">{Story()}</div>
           </MarigoldProvider>
         );

docs/content/components/application/provider/provider.mdx

@@ -39,6 +39,12 @@ import { MarigoldProvider } from '@marigold/components';
       default: 'none',
       description: 'The use that should be used within the provider context.',
     },
+    {
+      property: 'className',
+      type: 'string',
+      default: 'none',
+      description: 'Set a className to the outer div from your app.',
+    },
 
 ]}
 />

docs/ui/ComponentDemo.tsx

@@ -63,8 +63,11 @@ export const ComponentDemo = ({ name, children }: ComponentDemoProps) => {
             >
               <div id="portalContainer" className="not-prose" />
               <OverlayContainerProvider value="portalContainer">
-                <MarigoldProvider theme={(current && themes[current]) as Theme}>
-                  <div className="not-prose w-full overflow-x-auto p-4">
+                <MarigoldProvider
+                  theme={(current && themes[current]) as Theme}
+                  className="bg-bg-surface"
+                >
+                  <div className="not-prose size-full overflow-x-auto p-4">
                     <Wrapper>
                       <Demo />
                     </Wrapper>

packages/components/src/Provider/MarigoldProvider.test.tsx

@@ -119,3 +119,25 @@ test('cascading without a selector is allowed when inner theme has not root styl
     )
   ).not.toThrowError();
 });
+
+test('using classname prop', () => {
+  const outerTheme = {
+    name: 'outer',
+    colors: {
+      primary: 'coral',
+    },
+    components: {
+      Button: cva(),
+    },
+  };
+
+  render(
+    <MarigoldProvider theme={outerTheme} className="bg-slate-400">
+      child
+    </MarigoldProvider>
+  );
+  const theme = screen.getByText('child');
+
+  console.log(theme?.className);
+  expect(theme?.className).toMatchInlineSnapshot(`"bg-slate-400"`);
+});

packages/components/src/Provider/MarigoldProvider.tsx

@@ -9,7 +9,12 @@ export interface MarigoldProviderProps<T extends Theme>
 // ---------------
 export function MarigoldProvider<T extends Theme>({
   children,
+  className,
   theme,
 }: MarigoldProviderProps<T>) {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider theme={theme} className={className}>
+      {children}
+    </ThemeProvider>
+  );
 }