[docs-infra] Fix layout shift on xGrid (mui#37954)

oliviertassinari · Jul 14, 2023 · 87c9a6d · 87c9a6d
1 parent 5dbf034
commit 87c9a6d
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 65 deletions.
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -60,7 +60,7 @@ const StyledSlider = styled(Slider)(
   &:hover {
     opacity: 1;
   }
-  &.${sliderClasses.disabled} { 
+  &.${sliderClasses.disabled} {
     pointer-events: none;
     cursor: default;
     color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};

diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -59,7 +59,7 @@ const StyledSlider = styled(Slider)(
   &:hover {
     opacity: 1;
   }
-  &.${sliderClasses.disabled} { 
+  &.${sliderClasses.disabled} {
     pointer-events: none;
     cursor: default;
     color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -6,6 +6,7 @@ import { alpha, styled } from '@mui/material/styles';
 import { styled as joyStyled } from '@mui/joy/styles';
 import { unstable_useId as useId } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import NoSsr from '@mui/material/NoSsr';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
@@ -21,6 +22,7 @@ import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
 import BrandingProvider from 'docs/src/BrandingProvider';
+import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
 import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme';
 
 /**
@@ -33,23 +35,12 @@ function trimLeadingSpaces(input = '') {
 }
 
 const DemoToolbar = React.lazy(() => import('./DemoToolbar'));
-// Sync with styles from DemoToolbar
-// Importing the styles results in no bundle size reduction
-const DemoToolbarFallbackRoot = styled('div')(({ theme }) => {
-  return {
-    display: 'none',
-    [theme.breakpoints.up('sm')]: {
-      display: 'block',
-      height: 40 + 5 * 2 + 1 * 2,
-      marginTop: -1,
-    },
-  };
-});
 
 function DemoToolbarFallback() {
   const t = useTranslate();
 
-  return <DemoToolbarFallbackRoot aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
+  // Sync with styles from DemoToolbar, we can't import the styles
+  return <Box sx={{ height: 40 }} aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
 }
 
 function getDemoName(location) {
@@ -549,30 +540,32 @@ export default function Demo(props) {
       {/* TODO: BrandingProvider shouldn't be needed, it should already be at the top of the docs page */}
       <BrandingProvider {...(demoData.productId === 'joy-ui' ? { mode } : {})}>
         {demoOptions.hideToolbar ? null : (
-          <NoSsr defer fallback={<DemoToolbarFallback />}>
-            <React.Suspense fallback={<DemoToolbarFallback />}>
-              <DemoToolbar
-                codeOpen={codeOpen}
-                codeVariant={codeVariant}
-                hasNonSystemDemos={hasNonSystemDemos}
-                demo={demo}
-                demoData={demoData}
-                demoHovered={demoHovered}
-                demoId={demoId}
-                demoName={demoName}
-                demoOptions={demoOptions}
-                demoSourceId={demoSourceId}
-                initialFocusRef={initialFocusRef}
-                onCodeOpenChange={() => {
-                  setCodeOpen((open) => !open);
-                  setShowAd(true);
-                }}
-                onResetDemoClick={resetDemo}
-                openDemoSource={openDemoSource}
-                showPreview={showPreview}
-              />
-            </React.Suspense>
-          </NoSsr>
+          <DemoToolbarRoot demoOptions={demoOptions} openDemoSource={openDemoSource}>
+            <NoSsr defer fallback={<DemoToolbarFallback />}>
+              <React.Suspense fallback={<DemoToolbarFallback />}>
+                <DemoToolbar
+                  codeOpen={codeOpen}
+                  codeVariant={codeVariant}
+                  hasNonSystemDemos={hasNonSystemDemos}
+                  demo={demo}
+                  demoData={demoData}
+                  demoHovered={demoHovered}
+                  demoId={demoId}
+                  demoName={demoName}
+                  demoOptions={demoOptions}
+                  demoSourceId={demoSourceId}
+                  initialFocusRef={initialFocusRef}
+                  onCodeOpenChange={() => {
+                    setCodeOpen((open) => !open);
+                    setShowAd(true);
+                  }}
+                  onResetDemoClick={resetDemo}
+                  openDemoSource={openDemoSource}
+                  showPreview={showPreview}
+                />
+              </React.Suspense>
+            </NoSsr>
+          </DemoToolbarRoot>
         )}
         <Collapse in={openDemoSource} unmountOnExit timeout={150}>
           {/* A limitation from https://github.com/nihgwu/react-runner,

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -32,38 +32,19 @@ import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMappin
 import codeSandbox from '../sandbox/CodeSandbox';
 import stackBlitz from '../sandbox/StackBlitz';
 
-const Root = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'demoOptions' && prop !== 'openDemoSource',
-})(({ theme, demoOptions, openDemoSource }) => [
+const Root = styled('div')(({ theme }) => [
   {
-    display: 'none',
     [theme.breakpoints.up('sm')]: {
       justifyContent: 'space-between',
       alignItems: 'center',
-      border: `1px solid ${(theme.vars || theme).palette.divider}`,
-      marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
       display: 'flex',
-      top: 0,
-      padding: theme.spacing(0.5, 1),
-      backgroundColor: alpha(theme.palette.grey[50], 0.2),
-      borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
-      transition: theme.transitions.create('border-radius'),
-      ...(theme.direction === 'rtl' && {
-        left: theme.spacing(1),
-      }),
-      ...(theme.direction !== 'rtl' && {
-        right: theme.spacing(1),
-      }),
     },
     '& .MuiSvgIcon-root': {
       fontSize: 16,
       color: (theme.vars || theme).palette.grey[800],
     },
   },
   theme.applyDarkStyles({
-    [theme.breakpoints.up('sm')]: {
-      backgroundColor: alpha(theme.palette.primaryDark[800], 0.2),
-    },
     '& .MuiSvgIcon-root': {
       color: (theme.vars || theme).palette.grey[400],
     },
@@ -531,12 +512,7 @@ export default function DemoToolbar(props) {
 
   return (
     <React.Fragment>
-      <Root
-        aria-label={t('demoToolbarLabel')}
-        {...toolbarProps}
-        demoOptions={demoOptions}
-        openDemoSource={openDemoSource}
-      >
+      <Root aria-label={t('demoToolbarLabel')} {...toolbarProps}>
         {hasNonSystemDemos && (
           <Button
             id="styling-solution"

diff --git a/docs/src/modules/components/DemoToolbarRoot.ts b/docs/src/modules/components/DemoToolbarRoot.ts
@@ -0,0 +1,37 @@
+import { styled, alpha } from '@mui/material/styles';
+
+interface DemoToolbarRootProps {
+  demoOptions: any;
+  openDemoSource: any;
+}
+
+const DemoToolbarRoot = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'demoOptions' && prop !== 'openDemoSource',
+})<DemoToolbarRootProps>(({ theme, demoOptions, openDemoSource }) => [
+  {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+      border: `1px solid ${(theme.vars || theme).palette.divider}`,
+      marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
+      top: 0,
+      padding: theme.spacing(0.5, 1),
+      backgroundColor: alpha(theme.palette.grey[50], 0.2),
+      borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
+      transition: theme.transitions.create('border-radius'),
+      ...(theme.direction === 'rtl' && {
+        left: theme.spacing(1),
+      }),
+      ...(theme.direction !== 'rtl' && {
+        right: theme.spacing(1),
+      }),
+    },
+  },
+  theme.applyDarkStyles({
+    [theme.breakpoints.up('sm')]: {
+      backgroundColor: alpha(theme.palette.primaryDark[800], 0.2),
+    },
+  }),
+]);
+
+export default DemoToolbarRoot;