From c2356ab99d32d496644b534894a75cdd934a5023 Mon Sep 17 00:00:00 2001
From: Tudor Popa <popatudor@microsoft.com>
Date: Wed, 26 Oct 2022 17:06:32 +0200
Subject: [PATCH] fix(docsite-v9): move theme picker under component title so
 it can be visible on embedded pages

---
 .../FluentDocsContainer.stories.tsx           | 12 +--------
 .../FluentDocsHeader.stories.tsx              | 27 -------------------
 .../DocsComponents/FluentDocsPage.stories.tsx |  5 ++++
 3 files changed, 6 insertions(+), 38 deletions(-)
 delete mode 100644 apps/public-docsite-v9/src/DocsComponents/FluentDocsHeader.stories.tsx

diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx
index 82050f18dfaaf4..e03cbda640bce2 100644
--- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx
+++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
-import { FluentStoryContext, THEME_ID, themes } from '@fluentui/react-storybook-addon';
-import { FluentDocsHeader } from './FluentDocsHeader.stories';
+import { FluentStoryContext } from '@fluentui/react-storybook-addon';
 import { webLightTheme, FluentProvider } from '@fluentui/react-components';
 
 interface IFluentDocsContainerProps {
@@ -12,17 +11,8 @@ interface IFluentDocsContainerProps {
  * A container that wraps storybook's native docs container to add extra components to the docs experience
  */
 export const FluentDocsContainer: React.FC<IFluentDocsContainerProps> = ({ children, context }) => {
-  // eslint-disable-next-line deprecation/deprecation
-  const selectedTheme = themes.find(theme => theme.id === context.globals[THEME_ID]);
   return (
     <>
-      <FluentProvider style={{ backgroundColor: 'transparent' }} theme={selectedTheme?.theme ?? webLightTheme}>
-        <FluentDocsHeader
-          // eslint-disable-next-line deprecation/deprecation
-          storybookGlobals={context.globals}
-        />
-      </FluentProvider>
-
       {/** TODO add table of contents */}
       <FluentProvider style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>
         <DocsContainer context={context}>{children}</DocsContainer>
diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsHeader.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsHeader.stories.tsx
deleted file mode 100644
index 5c554d699bfdbe..00000000000000
--- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsHeader.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { FluentGlobals, THEME_ID } from '@fluentui/react-storybook-addon';
-import { shorthands, makeStyles } from '@griffel/react';
-import { ThemePicker } from './ThemePicker.stories';
-
-const useStyles = makeStyles({
-  root: {
-    textAlign: 'right',
-    position: 'relative',
-    width: 'auto',
-    ...shorthands.margin('0px', 'auto'),
-    maxWidth: '1200px',
-    paddingRight: '15px',
-  },
-});
-
-/**
- * Sticky header over the entire docs page
- */
-export const FluentDocsHeader: React.FC<{ storybookGlobals: FluentGlobals }> = ({ storybookGlobals }) => {
-  const styles = useStyles();
-  return (
-    <div className={styles.root}>
-      <ThemePicker selectedThemeId={storybookGlobals[THEME_ID]} />
-    </div>
-  );
-};
diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
index de7a8e14626d79..895013317a8c7c 100644
--- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
+++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
@@ -12,6 +12,8 @@ import {
 } from '@storybook/addon-docs';
 import { makeStyles, shorthands } from '@griffel/react';
 import { Toc, nameToHash } from './Toc.stories';
+import { THEME_ID, themes } from '@fluentui/react-storybook-addon';
+import { ThemePicker } from './ThemePicker.stories';
 
 const useStyles = makeStyles({
   divider: {
@@ -40,6 +42,8 @@ const useStyles = makeStyles({
 
 export const FluentDocsPage = () => {
   const context = React.useContext(DocsContext);
+  // eslint-disable-next-line deprecation/deprecation
+  const selectedTheme = themes.find(theme => theme.id === context.globals![THEME_ID]);
   const stories = context.componentStories();
   const primaryStory = stories[0];
   const styles = useStyles();
@@ -61,6 +65,7 @@ export const FluentDocsPage = () => {
 
       <div className={styles.wrapper}>
         <div className={styles.container}>
+          <ThemePicker selectedThemeId={selectedTheme?.id} />
           <Subtitle />
           <Description />
           <hr className={styles.divider} />