[docs-infra] Adjust demo container to be glued to the toolbar (mui#37744

) Signed-off-by: Olivier Tassinari <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
andriy-shymkiv · Jul 3, 2023 · 28d1cc2 · 28d1cc2
1 parent b59e53c
commit 28d1cc2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 32 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -39,12 +39,14 @@ const DemoToolbarFallbackRoot = styled('div')(({ theme }) => {
   return {
     display: 'none',
     [theme.breakpoints.up('sm')]: {
-      display: 'flex',
-      height: theme.spacing(8),
+      display: 'block',
+      height: 40 + 5 * 2 + 1 * 2,
+      marginTop: -1,
     },
   };
 });
-export function DemoToolbarFallback() {
+
+function DemoToolbarFallback() {
   const t = useTranslate();
 
   return <DemoToolbarFallbackRoot aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
@@ -304,7 +306,6 @@ const DemoRootJoy = joyStyled('div', {
   /* Isolate the demo with an outline. */
   ...(bg === 'outlined' && {
     padding: theme.spacing(3),
-    borderRadius: 0,
     border: `1px solid`,
     borderColor: grey[100],
     borderLeftWidth: 0,
@@ -323,7 +324,7 @@ const DemoRootJoy = joyStyled('div', {
   /* Mostly meant for introduction demos. */
   ...(bg === 'gradient' && {
     [theme.breakpoints.up('sm')]: {
-      borderRadius: '12px',
+      borderRadius: 12,
     },
     borderRadius: 0,
     padding: theme.spacing(0),
@@ -353,15 +354,12 @@ const DemoRootJoy = joyStyled('div', {
   }),
 }));
 
-const DemoCodeViewer = styled(HighlightedCode)(({ theme }) => ({
+const DemoCodeViewer = styled(HighlightedCode)(() => ({
   '& pre': {
     margin: 0,
     maxHeight: 'min(68vh, 1000px)',
     maxWidth: 'initial',
     borderRadius: 0,
-    [theme.breakpoints.up('sm')]: {
-      borderRadius: theme.shape.borderRadius,
-    },
   },
 }));
 
@@ -548,7 +546,8 @@ export default function Demo(props) {
       ))}
       <AnchorLink id={`${demoName}.js`} />
       <AnchorLink id={`${demoName}.tsx`} />
-      <Wrapper {...(demoData.productId === 'joy-ui' ? { mode } : {})}>
+      {/* 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 />}>
@@ -575,7 +574,7 @@ export default function Demo(props) {
             </React.Suspense>
           </NoSsr>
         )}
-        <Collapse in={openDemoSource} unmountOnExit>
+        <Collapse in={openDemoSource} unmountOnExit timeout={150}>
           {/* A limitation from https://github.com/nihgwu/react-runner,
             we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
           {demoOptions.disableLiveEdit ? (
@@ -616,7 +615,7 @@ export default function Demo(props) {
           )}
         </Collapse>
         {adVisibility ? <AdCarbonInline /> : null}
-      </Wrapper>
+      </BrandingProvider>
     </Root>
   );
 }

diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
@@ -16,6 +16,8 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxHeight: 'min(68vh, 1000px)',
       overflow: 'auto',
       backgroundColor: blueDark[800],
+      marginTop: -1,
+      border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {
         boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary.light}`,
@@ -24,7 +26,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
         boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primary.main}`,
       },
       [theme.breakpoints.up('sm')]: {
-        borderRadius: (theme.vars || theme).shape.borderRadius,
+        borderRadius: '0 0 12px 12px',
       },
     },
     '& pre': {

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -33,31 +33,28 @@ import codeSandbox from '../sandbox/CodeSandbox';
 import stackBlitz from '../sandbox/StackBlitz';
 
 const Root = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'demoOptions',
-})(({ theme, demoOptions }) => [
+  shouldForwardProp: (prop) => prop !== 'demoOptions' && prop !== 'openDemoSource',
+})(({ theme, demoOptions, openDemoSource }) => [
   {
     display: 'none',
-    border: `1px solid ${(theme.vars || theme).palette.divider}`,
-    marginTop: demoOptions.bg === 'inline' ? 8 : -1,
-    marginBottom: 16,
     [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,
-      paddingTop: theme.spacing(0.5),
-      paddingBottom: theme.spacing(0.5),
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(0.5),
+      padding: theme.spacing(0.5, 1),
       backgroundColor: alpha(theme.palette.grey[50], 0.2),
-      borderRadius: '0 0 12px 12px',
+      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),
       }),
     },
-    justifyContent: 'space-between',
-    alignItems: 'center',
     '& .MuiSvgIcon-root': {
       fontSize: 16,
       color: (theme.vars || theme).palette.grey[800],
@@ -106,12 +103,6 @@ ToggleCodeTooltip.propTypes = {
   showSourceHint: PropTypes.bool,
 };
 
-export function DemoToolbarFallback() {
-  const t = useTranslate();
-
-  return <Root aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
-}
-
 const alwaysTrue = () => true;
 
 const ToggleButtonGroup = styled(MDToggleButtonGroup)(({ theme }) => [
@@ -540,7 +531,12 @@ export default function DemoToolbar(props) {
 
   return (
     <React.Fragment>
-      <Root aria-label={t('demoToolbarLabel')} {...toolbarProps} demoOptions={demoOptions}>
+      <Root
+        aria-label={t('demoToolbarLabel')}
+        {...toolbarProps}
+        demoOptions={demoOptions}
+        openDemoSource={openDemoSource}
+      >
         {hasNonSystemDemos && (
           <Button
             id="styling-solution"