[docs-infra] Fix layout shift ad

oliviertassinari · Jun 25, 2023 · 002fa21 · 002fa21
1 parent 314c3d4
commit 002fa21
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 212 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -111,7 +111,7 @@ class AdErrorBoundary extends React.Component {
   }
 }
 
-function Ad() {
+export default function Ad() {
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
 
@@ -218,7 +218,8 @@ function Ad() {
       sx={{
         position: 'relative',
         display: 'block',
-        m: (theme) => theme.spacing(4, 0, 3),
+        mt: 4,
+        mb: 3,
         ...(adShape === 'image' && {
           minHeight: 126,
         }),
@@ -241,5 +242,3 @@ function Ad() {
     </Box>
   );
 }
-
-export default Ad;
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
@@ -47,15 +47,17 @@ const StyledAppContainer = styled(AppContainer, {
     ...(!disableAd && {
       ...(!hasTabs && {
         '&& .description': {
-          marginBottom: 198,
+          paddingBottom: 4 * 10 + 126,
+          marginBottom: 3 * 10,
         },
         '&& .description.ad': {
+          paddingBottom: 0,
           marginBottom: 0,
         },
       }),
       ...(hasTabs && {
         '&& .component-tabs .MuiTabs-root': {
-          marginBottom: 198,
+          marginBottom: 4 * 10 + 4 * 10 + 126,
         },
         '&& .component-tabs.ad .MuiTabs-root': {
           marginBottom: 0,
@@ -78,13 +80,16 @@ const ActionsDiv = styled('div')(({ theme }) => ({
   },
 }));
 
-function AppLayoutDocs(props) {
+export default function AppLayoutDocs(props) {
   const router = useRouter();
   const {
     BannerComponent,
     children,
     description,
     disableAd = false,
+    // TODO, disableLayout should be the default, retaining the layout between pages
+    // improves the UX. It's faster to transition, and you don't lose UI states, like scroll.
+    disableLayout = false,
     disableToc = false,
     hasTabs = false,
     location,
@@ -112,8 +117,11 @@ function AppLayoutDocs(props) {
     productName = 'Joy UI';
   }
 
+  const Layout = disableLayout ? React.Fragment : AppFrame;
+  const layoutProps = disableLayout ? {} : { BannerComponent };
+
   return (
-    <AppFrame BannerComponent={BannerComponent}>
+    <Layout {...layoutProps}>
       <GlobalStyles
         styles={{
           ':root': {
@@ -146,7 +154,7 @@ function AppLayoutDocs(props) {
         </Main>
       </AdManager>
       <BackToTop />
-    </AppFrame>
+    </Layout>
   );
 }
 
@@ -155,6 +163,7 @@ AppLayoutDocs.propTypes = {
   children: PropTypes.node.isRequired,
   description: PropTypes.string.isRequired,
   disableAd: PropTypes.bool.isRequired,
+  disableLayout: PropTypes.bool,
   disableToc: PropTypes.bool.isRequired,
   hasTabs: PropTypes.bool,
   location: PropTypes.string.isRequired,
@@ -165,5 +174,3 @@ AppLayoutDocs.propTypes = {
 if (process.env.NODE_ENV !== 'production') {
   AppLayoutDocs.propTypes = exactProp(AppLayoutDocs.propTypes);
 }
-
-export default AppLayoutDocs;
diff --git a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -4,7 +4,7 @@ import path from 'path';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/system';
 import { exactProp } from '@mui/utils';
-import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
+import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Demo from 'docs/src/modules/components/Demo';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
@@ -40,7 +40,7 @@ export default function MarkdownDocs(props) {
     disableAd = false,
     disableToc = false,
     /**
-     * Some Joy pages, e.g. Joy theme builder, should not be a nested CssVarsProvider to control its own state.
+     * Some pages, e.g. Joy theme builder, should not be a nested CssVarsProvider to control its own state.
      * This config will skip the CssVarsProvider at the root of the page.
      */
     disableCssVarsProvider = false,
@@ -57,7 +57,7 @@ export default function MarkdownDocs(props) {
   const { description, location, rendered, title, toc } = localizedDoc;
 
   const isJoy = canonicalAs.startsWith('/joy-ui/') && !disableCssVarsProvider;
-  const Provider = isJoy ? CssVarsProvider : React.Fragment;
+  const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment;
   const Wrapper = isJoy ? BrandingProvider : React.Fragment;
 
   return (
@@ -69,14 +69,14 @@ export default function MarkdownDocs(props) {
       title={title}
       toc={toc}
     >
-      <Provider>
-        {disableAd ? null : (
-          <Wrapper>
-            <AdGuest>
-              <Ad />
-            </AdGuest>
-          </Wrapper>
-        )}
+      {disableAd ? null : (
+        <BrandingProvider>
+          <AdGuest>
+            <Ad />
+          </AdGuest>
+        </BrandingProvider>
+      )}
+      <CssVarsProvider>
         {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
         {rendered.map((renderedMarkdownOrDemo, index) => {
           if (typeof renderedMarkdownOrDemo === 'string') {
@@ -154,7 +154,7 @@ export default function MarkdownDocs(props) {
             />
           );
         })}
-      </Provider>
+      </CssVarsProvider>
     </AppLayoutDocs>
   );
 }