[docs-infra] Improve demos toolbar

mui · Jun 30, 2023 · 36b3c77 · 36b3c77
1 parent 948b662
commit 36b3c77
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 11 deletions.
diff --git a/docs/pages/experiments/docs/DemoInDocs.js b/docs/pages/experiments/docs/DemoInDocs.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Alert from '@mui/material/Alert';
+import Stack from '@mui/material/Stack';
+
+export default function DemoInDocs() {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      <Alert severity="error">This is an error alert — check it out!</Alert>
+      <Alert severity="warning">This is a warning alert — check it out!</Alert>
+      <Alert severity="info">This is an info alert — check it out!</Alert>
+      <Alert severity="success">This is a success alert — check it out!</Alert>
+    </Stack>
+  );
+}
diff --git a/docs/pages/experiments/docs/DemoInDocs.tsx.preview b/docs/pages/experiments/docs/DemoInDocs.tsx.preview
@@ -0,0 +1,4 @@
+<Alert severity="error">This is an error alert — check it out!</Alert>
+<Alert severity="warning">This is a warning alert — check it out!</Alert>
+<Alert severity="info">This is an info alert — check it out!</Alert>
+<Alert severity="success">This is a success alert — check it out!</Alert>
diff --git a/docs/pages/experiments/docs/demos.js b/docs/pages/experiments/docs/demos.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from './demos.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/pages/experiments/docs/demos.md b/docs/pages/experiments/docs/demos.md
@@ -0,0 +1,27 @@
+# Demos
+
+<p class="description">Demos</p>
+
+## Standard demo
+
+{{"demo": "DemoInDocs.js"}}
+
+## "bg": "inline" demo
+
+{{"demo": "DemoInDocs.js", "bg": "inline"}}
+
+## "bg": true
+
+{{"demo": "DemoInDocs.js", "bg": true}}
+
+## "hideToolbar": true
+
+{{"demo": "DemoInDocs.js", "hideToolbar": true}}
+
+## "hideToolbar": true, "bg": true
+
+{{"demo": "DemoInDocs.js", "hideToolbar": true, "bg": true}}
+
+## "hideToolbar": true, "bg": "inline"
+
+{{"demo": "DemoInDocs.js", "hideToolbar": true, "bg": "inline"}}
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -210,7 +210,7 @@ const DemoRootMaterial = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   [theme.breakpoints.up('sm')]: {
-    borderRadius: '12px 12px 0 0',
+    borderRadius: hiddenToolbar ? 12 : '12px 12px 0 0',
     ...(bg === 'outlined' && {
       borderLeftWidth: 1,
       borderRightWidth: 1,
@@ -219,9 +219,6 @@ const DemoRootMaterial = styled('div', {
     ...(bg === 'inline' && {
       padding: theme.spacing(0),
     }),
-    ...(hiddenToolbar && {
-      paddingTop: theme.spacing(1),
-    }),
   },
   /* Isolate the demo with an outline. */
   ...(bg === 'outlined' && {
@@ -233,7 +230,7 @@ const DemoRootMaterial = styled('div', {
   }),
   /* Prepare the background to display an inner elevation. */
   ...(bg === true && {
-    padding: theme.spacing(4),
+    padding: theme.spacing(3),
     backgroundColor: (theme.vars || theme).palette.grey[100],
     ...theme.applyDarkStyles({
       backgroundColor: (theme.vars || theme).palette.grey[900],
@@ -282,9 +279,6 @@ const DemoRootMaterial = styled('div', {
     )} 0px, transparent 50%);`,
     }),
   }),
-  ...(hiddenToolbar && {
-    paddingTop: theme.spacing(2),
-  }),
 }));
 
 const DemoRootJoy = joyStyled('div', {

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -32,11 +32,13 @@ import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMappin
 import codeSandbox from '../sandbox/CodeSandbox';
 import stackBlitz from '../sandbox/StackBlitz';
 
-const Root = styled('div')(({ theme }) => [
+const Root = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'demoOptions',
+})(({ theme, demoOptions }) => [
   {
     display: 'none',
     border: `1px solid ${(theme.vars || theme).palette.divider}`,
-    marginTop: -1,
+    marginTop: demoOptions.bg === 'inline' ? 8 : -1,
     marginBottom: 16,
     [theme.breakpoints.up('sm')]: {
       display: 'flex',
@@ -538,7 +540,7 @@ export default function DemoToolbar(props) {
 
   return (
     <React.Fragment>
-      <Root aria-label={t('demoToolbarLabel')} {...toolbarProps}>
+      <Root aria-label={t('demoToolbarLabel')} {...toolbarProps} demoOptions={demoOptions}>
         {hasNonSystemDemos && (
           <Button
             id="styling-solution"