From 36b3c774d8de0ed4a075b07483f99cb4de05e978 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 30 Jun 2023 02:03:36 +0200
Subject: [PATCH] [docs-infra] Improve demos toolbar

---
 docs/pages/experiments/docs/DemoInDocs.js     | 14 ++++++++++
 .../experiments/docs/DemoInDocs.tsx.preview   |  4 +++
 docs/pages/experiments/docs/demos.js          |  7 +++++
 docs/pages/experiments/docs/demos.md          | 27 +++++++++++++++++++
 docs/src/modules/components/Demo.js           | 10 ++-----
 docs/src/modules/components/DemoToolbar.js    |  8 +++---
 6 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 docs/pages/experiments/docs/DemoInDocs.js
 create mode 100644 docs/pages/experiments/docs/DemoInDocs.tsx.preview
 create mode 100644 docs/pages/experiments/docs/demos.js
 create mode 100644 docs/pages/experiments/docs/demos.md

diff --git a/docs/pages/experiments/docs/DemoInDocs.js b/docs/pages/experiments/docs/DemoInDocs.js
new file mode 100644
index 00000000000000..fb2cb617cde09d
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..7b26ce399bd8f5
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/docs/pages/experiments/docs/demos.js b/docs/pages/experiments/docs/demos.js
new file mode 100644
index 00000000000000..1f9fa6d0b9c033
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..9334e1a03b1097
--- /dev/null
+++ 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
index d7a1fddbffa2f0..7c14cb234bb467 100644
--- 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
index c9a7b031c40a91..a87a3ba347671d 100644
--- 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"