Skip to content

Commit 7c6c54e

Browse files
oliviertassinarioliviertassinari
authored
[docs-infra] Fix arbitrary gap between paragraphs in callouts (#40911)
1 parent a0defde commit 7c6c54e

File tree

2 files changed

+25
-17
lines changed

2 files changed

+25
-17
lines changed

‎docs/pages/experiments/docs/callouts.md

+9
Original file line numberDiff line numberDiff line change
@@ -150,3 +150,12 @@ export default function BasicAlerts() {
150150
```
151151

152152
:::
153+
154+
## Multilines
155+
156+
:::info
157+
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.
158+
159+
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>`.
160+
See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better.
161+
:::

‎docs/src/modules/components/MarkdownElement.js

+16-17
Original file line numberDiff line numberDiff line change
@@ -284,31 +284,30 @@ const Root = styled('div')(
284284
borderRadius: `var(--muidocs-shape-borderRadius, ${
285285
theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
286286
}px)`,
287-
'&>code': {
287+
'& > code': {
288288
height: 'fit-content',
289289
backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
290290
borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
291291
},
292292
'& .MuiCallout-content': {
293293
minWidth: 0, // Allows content to shrink. Useful when callout contains code block
294294
flexGrow: 1,
295-
display: 'flex',
296-
flexDirection: 'column',
297-
gap: 6,
298-
'&>p, ul': {
295+
'& > p:last-child, & > ul:last-child': {
296+
// Avoid margin on last child
299297
marginBottom: 0,
300298
},
301299
'& .MuiCode-root': {
302-
'&>pre': {
300+
'& > pre': {
303301
margin: 0,
304302
marginTop: 4,
305303
},
306304
},
307-
'&>ul': {
305+
'& > ul': {
306+
// Because of the gap left by the icon, we visually need less padding
308307
paddingLeft: 22,
309308
},
310309
},
311-
'&>svg': {
310+
'& > svg': {
312311
marginTop: 2,
313312
width: 20,
314313
height: 20,
@@ -329,7 +328,7 @@ const Root = styled('div')(
329328
'& strong': {
330329
color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`,
331330
},
332-
'&>svg': {
331+
'& > svg': {
333332
fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`,
334333
},
335334
'& a': {
@@ -347,7 +346,7 @@ const Root = styled('div')(
347346
'& strong': {
348347
color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`,
349348
},
350-
'&>svg': {
349+
'& > svg': {
351350
fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
352351
},
353352
},
@@ -358,7 +357,7 @@ const Root = styled('div')(
358357
'& strong': {
359358
color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
360359
},
361-
'&>svg': {
360+
'& > svg': {
362361
fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`,
363362
},
364363
'& a': {
@@ -376,7 +375,7 @@ const Root = styled('div')(
376375
'& strong': {
377376
color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
378377
},
379-
'&>svg': {
378+
'& > svg': {
380379
fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
381380
},
382381
'& a': {
@@ -627,7 +626,7 @@ const Root = styled('div')(
627626
},
628627
'& .MuiCallout-root': {
629628
borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
630-
'&>code': {
629+
'& > code': {
631630
height: 'fit-content',
632631
backgroundColor: `var(--muidocs-palette-primaryDark-600, ${lightTheme.palette.primaryDark[600]})`,
633632
borderColor: `var(--muidocs-palette-primaryDark-500, ${lightTheme.palette.primaryDark[500]})`,
@@ -639,7 +638,7 @@ const Root = styled('div')(
639638
'& strong': {
640639
color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
641640
},
642-
'&>svg': {
641+
'& > svg': {
643642
fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`,
644643
},
645644
'& a': {
@@ -653,7 +652,7 @@ const Root = styled('div')(
653652
'& strong': {
654653
color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
655654
},
656-
'&>svg': {
655+
'& > svg': {
657656
fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
658657
},
659658
},
@@ -664,7 +663,7 @@ const Root = styled('div')(
664663
'& strong': {
665664
color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
666665
},
667-
'&>svg': {
666+
'& > svg': {
668667
fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`,
669668
},
670669
'& a': {
@@ -678,7 +677,7 @@ const Root = styled('div')(
678677
'& strong': {
679678
color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
680679
},
681-
'&>svg': {
680+
'& > svg': {
682681
fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
683682
},
684683
'& a': {

0 commit comments

Comments
 (0)