Skip to content

[docs] Show the JSX by default for small examples#17831

Merged
oliviertassinari merged 27 commits into
mui:masterfrom
mbrookes:docs-show-code
Oct 19, 2019
Merged

[docs] Show the JSX by default for small examples#17831
oliviertassinari merged 27 commits into
mui:masterfrom
mbrookes:docs-show-code

Conversation

@mbrookes

@mbrookes mbrookes commented Oct 10, 2019 •
edited
Loading

Copy link
Copy Markdown
Member

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

image

Before:

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

After:

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

@mui-pr-bot

mui-pr-bot commented Oct 10, 2019 •
edited
Loading

Copy link
Copy Markdown
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

@mbrookes

This comment has been minimized.

Sign in to view
@eps1lon

This comment has been minimized.

Sign in to view
eps1lon
eps1lon reviewed Oct 11, 2019
View reviewed changes

@eps1lon eps1lon left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread docs/src/modules/components/Demo.js Outdated
@mbrookes

This comment has been minimized.

Sign in to view
@mbrookes mbrookes added the docs Improvements or additions to the documentation. label Oct 11, 2019
@mbrookes
mbrookes marked this pull request as ready for review October 11, 2019 16:10
joshwooding
joshwooding reviewed Oct 11, 2019
View reviewed changes
Comment thread docs/src/modules/components/Demo.js Outdated
@mbrookes

mbrookes commented Oct 12, 2019

Copy link
Copy Markdown
Member Author

"Show Full Source"

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

oliviertassinari
oliviertassinari reviewed Oct 13, 2019
View reviewed changes

@oliviertassinari oliviertassinari left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

@mbrookes

mbrookes commented Oct 14, 2019 •
edited
Loading

Copy link
Copy Markdown
Member Author

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

"previous version"?

oliviertassinari
oliviertassinari reviewed Oct 15, 2019
View reviewed changes
Comment thread docs/src/pages/components/textarea-autosize/MaxHeightTextarea.tsx Outdated
Comment thread docs/src/modules/components/Demo.js Outdated
@oliviertassinari

oliviertassinari commented Oct 15, 2019 •
edited
Loading

Copy link
Copy Markdown
Member

@mbrookes I have found one source of the docs build fail (JSON.parse). I will push a new commit to address it, I improve the failing message at the same time, it's too hard to find the origin right now :).

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

@mbrookes

mbrookes commented Oct 15, 2019 •
edited
Loading

Copy link
Copy Markdown
Member Author

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

mbrookes commented Oct 15, 2019

Copy link
Copy Markdown
Member Author

CircleCI is borked.

@oliviertassinari

oliviertassinari commented Oct 15, 2019 •
edited
Loading

Copy link
Copy Markdown
Member

@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
oliviertassinari reviewed Oct 15, 2019
View reviewed changes

@oliviertassinari oliviertassinari left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 👌.

@mbrookes

mbrookes commented Oct 16, 2019

Copy link
Copy Markdown
Member Author

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
oliviertassinari merged commit f8080a6 into mui:master Oct 19, 2019
@oliviertassinari

oliviertassinari commented Oct 19, 2019

Copy link
Copy Markdown
Member

@mbrookes Great job!

@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@mbrookes
mbrookes deleted the docs-show-code branch March 15, 2020 23:03
@oliviertassinari oliviertassinari mentioned this pull request Sep 4, 2020
Open
1 task
@eps1lon eps1lon mentioned this pull request Sep 25, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@eps1lon eps1lon eps1lon left review comments
@oliviertassinari oliviertassinari oliviertassinari approved these changes
+1 more reviewer
@joshwooding joshwooding joshwooding left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

docs Improvements or additions to the documentation.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@mbrookes @mui-pr-bot @eps1lon @oliviertassinari @joshwooding