[docs] Show the JSX by default for small examples

[mbrookes]

• I have followed (at least) the PR section of the contributing guide.

Related to #17483 (comment)

	Position	Full code	Open by default	Playground	Live Edits
Material-UI before	Above	Yes	Configurable	Few	No
Material-UI after	Below	When fully open	Configurable, or JSX preview If short	Few	No

Before:

https://material-ui.com/components/avatars/

After:

https://deploy-preview-17831--material-ui.netlify.com/components/avatars/

[mui-pr-bot]

Details of bundle changes.

Comparing: 5c70cfc...9a13d1e

bundle	Size Change	Size	Gzip Change	Gzip
docs.main	▲ +472 B (+0.08% )	599 kB	▲ +226 B (+0.12% )	191 kB
@material-ui/core	--	348 kB	--	95.2 kB
@material-ui/core[umd]	--	307 kB	--	88.3 kB
@material-ui/lab	--	145 kB	--	45 kB
@material-ui/styles	--	51.8 kB	--	15.6 kB
@material-ui/system	--	15.7 kB	--	4.37 kB
AppBar	--	63.9 kB	--	19.9 kB
Avatar	--	62.7 kB	--	19.6 kB
Backdrop	--	67.7 kB	--	20.9 kB
Badge	--	65.4 kB	--	20.2 kB
BottomNavigation	--	62.4 kB	--	19.5 kB
BottomNavigationAction	--	75.3 kB	--	23.8 kB
Box	--	70.8 kB	--	21.4 kB
Breadcrumbs	--	68 kB	--	21.3 kB
Button	--	79.3 kB	--	24.5 kB
ButtonBase	--	73.8 kB	--	23.1 kB
ButtonGroup	--	64.2 kB	--	20 kB
Card	--	62.9 kB	--	19.6 kB
CardActionArea	--	74.9 kB	--	23.6 kB
CardActions	--	62 kB	--	19.3 kB
CardContent	--	62 kB	--	19.3 kB
CardHeader	--	65.1 kB	--	20.4 kB
CardMedia	--	62.4 kB	--	19.5 kB
Checkbox	--	81.6 kB	--	25.6 kB
Chip	--	70.6 kB	--	21.8 kB
CircularProgress	--	64.1 kB	--	20.1 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	67.8 kB	--	20.9 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	63.1 kB	--	19.6 kB
CssBaseline	--	57.6 kB	--	18 kB
Dialog	--	82.5 kB	--	25.6 kB
DialogActions	--	62.1 kB	--	19.4 kB
DialogContent	--	62.2 kB	--	19.4 kB
DialogContentText	--	64 kB	--	20 kB
DialogTitle	--	64.3 kB	--	20.1 kB
Divider	--	62.6 kB	--	19.6 kB
docs.landing	--	54.8 kB	--	14.5 kB
Drawer	--	84.3 kB	--	26 kB
ExpansionPanel	--	71.1 kB	--	22.1 kB
ExpansionPanelActions	--	62.1 kB	--	19.4 kB
ExpansionPanelDetails	--	61.9 kB	--	19.3 kB
ExpansionPanelSummary	--	77.9 kB	--	24.5 kB
Fab	--	76.7 kB	--	23.8 kB
Fade	--	23.1 kB	--	8.05 kB
FilledInput	--	73.1 kB	--	22.6 kB
FormControl	--	64.3 kB	--	19.9 kB
FormControlLabel	--	65.5 kB	--	20.5 kB
FormGroup	--	62 kB	--	19.3 kB
FormHelperText	--	63.3 kB	--	19.7 kB
FormLabel	--	63.3 kB	--	19.5 kB
Grid	--	65.1 kB	--	20.3 kB
GridList	--	62.5 kB	--	19.5 kB
GridListTile	--	63.7 kB	--	19.9 kB
GridListTileBar	--	63.2 kB	--	19.7 kB
Grow	--	23.7 kB	--	8.17 kB
Hidden	--	66.1 kB	--	20.6 kB
Icon	--	62.8 kB	--	19.6 kB
IconButton	--	76 kB	--	23.7 kB
Input	--	72 kB	--	22.4 kB
InputAdornment	--	65.1 kB	--	20.4 kB
InputBase	--	70.2 kB	--	22 kB
InputLabel	--	65.1 kB	--	20.2 kB
LinearProgress	--	65.3 kB	--	20.3 kB
Link	--	66.6 kB	--	21 kB
List	--	62.4 kB	--	19.3 kB
ListItem	--	77 kB	--	24 kB
ListItemAvatar	--	62.1 kB	--	19.4 kB
ListItemIcon	--	62.2 kB	--	19.4 kB
ListItemSecondaryAction	--	62 kB	--	19.3 kB
ListItemText	--	65 kB	--	20.4 kB
ListSubheader	--	62.8 kB	--	19.6 kB
Menu	--	88.3 kB	--	27.6 kB
MenuItem	--	78 kB	--	24.3 kB
MenuList	--	66 kB	--	20.6 kB
MobileStepper	--	67.7 kB	--	21.1 kB
Modal	--	14.3 kB	--	4.96 kB
NativeSelect	--	76.4 kB	--	24 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	73.7 kB	--	22.9 kB
Paper	--	62.4 kB	--	19.3 kB
Popover	--	82.6 kB	--	25.4 kB
Popper	--	28.3 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	82.5 kB	--	25.9 kB
RadioGroup	--	63.2 kB	--	19.7 kB
Rating	--	69.9 kB	--	22.3 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	113 kB	--	33.6 kB
Skeleton	--	62.5 kB	--	19.6 kB
Slide	--	25.1 kB	--	8.68 kB
Slider	--	75.4 kB	--	23.7 kB
Snackbar	--	77.1 kB	--	24 kB
SnackbarContent	--	65.8 kB	--	20.6 kB
SpeedDial	--	85.9 kB	--	27 kB
SpeedDialAction	--	115 kB	--	36.4 kB
SpeedDialIcon	--	64.6 kB	--	20.2 kB
Step	--	62.6 kB	--	19.6 kB
StepButton	--	82.2 kB	--	25.8 kB
StepConnector	--	62.7 kB	--	19.6 kB
StepContent	--	69 kB	--	21.4 kB
StepIcon	--	64.7 kB	--	20.1 kB
StepLabel	--	68.6 kB	--	21.4 kB
Stepper	--	64.9 kB	--	20.3 kB
styles/createMuiTheme	--	16.3 kB	--	5.79 kB
SvgIcon	--	63 kB	--	19.6 kB
SwipeableDrawer	--	90.7 kB	--	28 kB
Switch	--	80.8 kB	--	25.1 kB
Tab	--	76.2 kB	--	24.1 kB
Table	--	62.6 kB	--	19.5 kB
TableBody	--	62.1 kB	--	19.3 kB
TableCell	--	64.1 kB	--	20.1 kB
TableFooter	--	62.1 kB	--	19.3 kB
TableHead	--	62.1 kB	--	19.3 kB
TablePagination	--	140 kB	--	40.7 kB
TableRow	--	62.5 kB	--	19.5 kB
TableSortLabel	--	77.2 kB	--	24.4 kB
Tabs	--	85.3 kB	--	27.1 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	121 kB	--	35.5 kB
ToggleButton	--	76 kB	--	24 kB
ToggleButtonGroup	--	63.2 kB	--	19.8 kB
Toolbar	--	62.3 kB	--	19.5 kB
Tooltip	--	99.1 kB	--	31.4 kB
TreeItem	--	73.4 kB	--	23.1 kB
TreeView	--	66 kB	--	20.6 kB
Typography	--	63.7 kB	--	19.8 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	23.1 kB	--	8.06 kB

Generated by 🚫 dangerJS against 9a13d1e

[eps1lon]

I like the idea of displaying short demo code. Source discoverability is sometimes not as good as I'd like it to be.

[mbrookes]

"Show Full Source"

Yeah, was on my mental to-do list if everyone agreed with the basic premise of this PR.

[oliviertassinari]

I love the idea 😍, I think that this proof of concept is promising! I have looked at almost (but not all, for instance, /customization) of the demos, the things I have noticed:

• https://deploy-preview-17831--material-ui.netlify.com/components/rating/#half-ratings, we can kill the parent div
• https://deploy-preview-17831--material-ui.netlify.com/components/container/ we should keep the source collapsed, move the hardcoded code preview underneath.
• https://deploy-preview-17831--material-ui.netlify.com/components/grid-list/#advanced-grid-list I'm wondering if 15 lines shouldn't the maximum allowed
• https://deploy-preview-17831--material-ui.netlify.com/components/checkboxes/#customized-checkbox Should we remove the tabulations (4 spaces in this context)?
• https://deploy-preview-17831--material-ui.netlify.com/components/paper/#paper I think that we can remove the wrapping div.
• https://deploy-preview-17831--material-ui.netlify.com/components/snackbars/#notistack I think that we should disable this preview
• https://deploy-preview-17831--material-ui.netlify.com/components/chips/#chip-array something is off with the regexp
• https://deploy-preview-17831--material-ui.netlify.com/components/modal/#simple-modal I think that we can move the "Click to get the full Modal experience!" in the markdown, outside the demo
• https://deploy-preview-17831--material-ui.netlify.com/components/textarea-autosize/#maximum-height maybe use .repeat() on the default value to get a shorter demo
• https://deploy-preview-17831--material-ui.netlify.com/components/use-media-query/#using-material-uis-breakpoint-helpers Something is off. I think that we can stick to the previous version
• https://deploy-preview-17831--material-ui.netlify.com/components/skeleton/ I think that we should disable the previews
• https://deploy-preview-17831--material-ui.netlify.com/components/tooltips/#tooltips The Fab escapes the container (bottom right)
• https://deploy-preview-17831--material-ui.netlify.com/system/flexbox/ in the system demos, we might want to disable all the previews, and likely move the code example after the demo.

[mbrookes]

I will push a new commit to address it

Thanks.

I haven't look at the other source of the docs build fail (.match).

It should be fixed now.

[mbrookes]

CircleCI is borked.

[oliviertassinari]

@mbrookes I was eager/excited to try the new version on Netlify to be honest (so I helped a bit), I'm frustrated, we have a couple more issues to solve first 🙃

[oliviertassinari]

I still wonder if 20 lines is the right threshold, however, I really like the shape this effort is taking. It incentives us to write smaller and cleaner demos 👌.

• https://deploy-preview-17831--material-ui.netlify.com/components/progress/#circular-static We have an opportunity to make the demo easier to read and to copy and paste by using one class name on the root div vs x on each progress.
• https://deploy-preview-17831--material-ui.netlify.com/components/progress/#linear-indeterminate we could use CSS instead of <br /> for the spacing.

[mbrookes]

I still wonder if 20 lines is the right threshold

It's arbitrary, but there are some demos that are straightforward, despite being longer, for example:
http://localhost:3000/components/tree-view

We can always disable any that don't benefit from a preview.

[oliviertassinari]

@mbrookes Great job!