[docs-infra] Improve demos toolbar (#37762)

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
mui · Jun 30, 2023 · 4887bd5 · 4887bd5
1 parent a45d46c
commit 4887bd5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 18 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,10 +230,11 @@ const DemoRootMaterial = styled('div', {
   }),
   /* Prepare the background to display an inner elevation. */
   ...(bg === true && {
-    padding: theme.spacing(4),
-    backgroundColor: (theme.vars || theme).palette.grey[100],
+    padding: theme.spacing(3),
+    backgroundColor: (theme.vars || theme).palette.grey[50],
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
     ...theme.applyDarkStyles({
-      backgroundColor: (theme.vars || theme).palette.grey[900],
+      backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
     }),
   }),
   /* Mostly meant for introduction demos. */
@@ -282,9 +280,6 @@ const DemoRootMaterial = styled('div', {
     )} 0px, transparent 50%);`,
     }),
   }),
-  ...(hiddenToolbar && {
-    paddingTop: theme.spacing(2),
-  }),
 }));
 
 const DemoRootJoy = joyStyled('div', {
@@ -296,11 +291,10 @@ const DemoRootJoy = joyStyled('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,
-      borderRadius: '12px 12px 0 0',
     }),
     /* Make no difference between the demo and the markdown. */
     ...(bg === 'inline' && {
@@ -357,9 +351,6 @@ const DemoRootJoy = joyStyled('div', {
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
     }),
   }),
-  ...(hiddenToolbar && {
-    paddingTop: theme.spacing(0),
-  }),
 }));
 
 const DemoCodeViewer = styled(HighlightedCode)(({ theme }) => ({

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"