[docs-infra] Fix arbitrary gap between paragraphs in callouts

mui · Feb 3, 2024 · f9bed90 · f9bed90
1 parent 3f6cf04
commit f9bed90
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/docs/pages/experiments/docs/callouts.md b/docs/pages/experiments/docs/callouts.md
@@ -150,3 +150,12 @@ export default function BasicAlerts() {
 ```
 
 :::
+
+## Multilines
+
+:::info
+The `AppRouterCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is streaming chunks of the .html page to the client.
+
+While it's not required to use the `AppRouterCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `<head>` and not rendering in the `<body>`.
+See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better.
+:::
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -284,31 +284,30 @@ const Root = styled('div')(
       borderRadius: `var(--muidocs-shape-borderRadius, ${
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
       }px)`,
-      '&>code': {
+      '& > code': {
         height: 'fit-content',
         backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
         borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
       },
       '& .MuiCallout-content': {
-        minWidth: 0, // Allows content to shrink. Useful when callout contains code block
-        flexGrow: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 6,
-        '&>p, ul': {
+        // Allows content to shrink. Useful when callout contains code blocks
+        minWidth: 0,
+        '& > p:last-child, & > ul:last-child': {
+          // Avoid margin on last child
           marginBottom: 0,
         },
         '& .MuiCode-root': {
-          '&>pre': {
+          '& > pre': {
             margin: 0,
             marginTop: 4,
           },
         },
-        '&>ul': {
+        '& > ul': {
+          // Because of the gap left by the icon, we visually need less padding
           paddingLeft: 22,
         },
       },
-      '&>svg': {
+      '& > svg': {
         marginTop: 2,
         width: 20,
         height: 20,
@@ -329,7 +328,7 @@ const Root = styled('div')(
         '& strong': {
           color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`,
         },
-        '&>svg': {
+        '& > svg': {
           fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`,
         },
         '& a': {
@@ -347,7 +346,7 @@ const Root = styled('div')(
         '& strong': {
           color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`,
         },
-        '&>svg': {
+        '& > svg': {
           fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
         },
       },
@@ -358,7 +357,7 @@ const Root = styled('div')(
         '& strong': {
           color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
         },
-        '&>svg': {
+        '& > svg': {
           fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`,
         },
         '& a': {
@@ -376,7 +375,7 @@ const Root = styled('div')(
         '& strong': {
           color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
         },
-        '&>svg': {
+        '& > svg': {
           fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
         },
         '& a': {
@@ -627,7 +626,7 @@ const Root = styled('div')(
       },
       '& .MuiCallout-root': {
         borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
-        '&>code': {
+        '& > code': {
           height: 'fit-content',
           backgroundColor: `var(--muidocs-palette-primaryDark-600, ${lightTheme.palette.primaryDark[600]})`,
           borderColor: `var(--muidocs-palette-primaryDark-500, ${lightTheme.palette.primaryDark[500]})`,
@@ -639,7 +638,7 @@ const Root = styled('div')(
           '& strong': {
             color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
           },
-          '&>svg': {
+          '& > svg': {
             fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`,
           },
           '& a': {
@@ -653,7 +652,7 @@ const Root = styled('div')(
           '& strong': {
             color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
           },
-          '&>svg': {
+          '& > svg': {
             fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
           },
         },
@@ -664,7 +663,7 @@ const Root = styled('div')(
           '& strong': {
             color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
           },
-          '&>svg': {
+          '& > svg': {
             fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`,
           },
           '& a': {
@@ -678,7 +677,7 @@ const Root = styled('div')(
           '& strong': {
             color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
           },
-          '&>svg': {
+          '& > svg': {
             fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
           },
           '& a': {