From b3e94b7fc2f7049556916768a3ad5fd42a39e4f6 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Tue, 2 May 2023 13:51:16 -0700
Subject: [PATCH 1/2] fix: Add a FluentProvider to local storybook.

---
 .../.storybook/preview.js                        |  7 +++++++
 .../FluentDocsContainer.stories.tsx              | 16 ++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 apps/recipes-react-components/.storybook/preview.js
 create mode 100644 apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx

diff --git a/apps/recipes-react-components/.storybook/preview.js b/apps/recipes-react-components/.storybook/preview.js
new file mode 100644
index 00000000000000..cacb8663c76486
--- /dev/null
+++ b/apps/recipes-react-components/.storybook/preview.js
@@ -0,0 +1,7 @@
+import { FluentDocsContainer } from '../src/DocComponents/FluentDocsContainer.stories';
+
+export const parameters = {
+  docs: {
+    container: FluentDocsContainer,
+  },
+};
diff --git a/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx b/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx
new file mode 100644
index 00000000000000..ef44d3bfd05a8d
--- /dev/null
+++ b/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
+import { FluentStoryContext } from '@fluentui/react-storybook-addon';
+import { webLightTheme, FluentProvider } from '@fluentui/react-components';
+
+type FluentDocsContainerProps = {
+  context: FluentStoryContext & DocsContextProps;
+};
+
+export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
+  return (
+    <FluentProvider style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>
+      <DocsContainer context={context}>{children}</DocsContainer>
+    </FluentProvider>
+  );
+};

From 261702aa7f8d86c26ceb42874719261fa9da632f Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Mon, 8 May 2023 10:58:25 -0700
Subject: [PATCH 2/2] remove style from docs container

---
 .../src/DocComponents/FluentDocsContainer.stories.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx b/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx
index ef44d3bfd05a8d..bd362d22c04177 100644
--- a/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx
+++ b/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx
@@ -9,7 +9,7 @@ type FluentDocsContainerProps = {
 
 export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
   return (
-    <FluentProvider style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>
+    <FluentProvider theme={webLightTheme}>
       <DocsContainer context={context}>{children}</DocsContainer>
     </FluentProvider>
   );