Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add radio error demo #19599

Merged
merged 17 commits into from
Mar 4, 2020
Merged

Conversation

theswerd
Copy link
Contributor

@theswerd theswerd commented Feb 7, 2020

Following the lead of the checkbox demos, now the radio button demos show how to show an error.

@mui-pr-bot
Copy link

mui-pr-bot commented Feb 7, 2020

Details of bundle changes.

Comparing: 41fe2e2...997cf00

bundle Size Change Size Gzip Change Gzip
docs.landing -- 54.4 kB ▼ -1 B (-0.01% ) 15.7 kB
@material-ui/core -- 360 kB -- 98.8 kB
@material-ui/core[umd] -- 318 kB -- 92.1 kB
@material-ui/lab -- 199 kB -- 59 kB
@material-ui/styles -- 51.4 kB -- 15.4 kB
@material-ui/system -- 16.5 kB -- 4.31 kB
Alert -- 86.6 kB -- 27.3 kB
AlertTitle -- 67.5 kB -- 21.2 kB
AppBar -- 67.4 kB -- 21.1 kB
Autocomplete -- 134 kB -- 42.2 kB
Avatar -- 68.5 kB -- 21.7 kB
AvatarGroup -- 65.7 kB -- 20.6 kB
Backdrop -- 71.2 kB -- 22 kB
Badge -- 68.7 kB -- 21.3 kB
BottomNavigation -- 65.7 kB -- 20.6 kB
BottomNavigationAction -- 78.8 kB -- 24.9 kB
Box -- 72.3 kB -- 21.8 kB
Breadcrumbs -- 83.6 kB -- 26.5 kB
Button -- 83 kB -- 25.4 kB
ButtonBase -- 77.3 kB -- 24.2 kB
ButtonGroup -- 86.5 kB -- 26.6 kB
Card -- 66.2 kB -- 20.7 kB
CardActionArea -- 78.4 kB -- 24.8 kB
CardActions -- 65.4 kB -- 20.5 kB
CardContent -- 65.3 kB -- 20.4 kB
CardHeader -- 68.4 kB -- 21.5 kB
CardMedia -- 65.7 kB -- 20.6 kB
Checkbox -- 85.4 kB -- 27 kB
Chip -- 85.8 kB -- 26.3 kB
CircularProgress -- 67.4 kB -- 21.2 kB
ClickAwayListener -- 3.84 kB -- 1.54 kB
Collapse -- 71.3 kB -- 22.1 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 66.5 kB -- 20.8 kB
CssBaseline -- 65.3 kB -- 20.5 kB
Dialog -- 86.2 kB -- 26.9 kB
DialogActions -- 65.4 kB -- 20.5 kB
DialogContent -- 65.6 kB -- 20.5 kB
DialogContentText -- 67.4 kB -- 21.1 kB
DialogTitle -- 67.6 kB -- 21.2 kB
Divider -- 66 kB -- 20.7 kB
docs.main -- 600 kB -- 197 kB
Drawer -- 87.9 kB -- 26.8 kB
ExpansionPanel -- 74.9 kB -- 23.5 kB
ExpansionPanelActions -- 65.4 kB -- 20.5 kB
ExpansionPanelDetails -- 65.3 kB -- 20.4 kB
ExpansionPanelSummary -- 81.4 kB -- 25.7 kB
Fab -- 80.1 kB -- 24.9 kB
Fade -- 27.1 kB -- 9.05 kB
FilledInput -- 76.9 kB -- 23.9 kB
FormControl -- 67.7 kB -- 21.1 kB
FormControlLabel -- 68.8 kB -- 21.6 kB
FormGroup -- 65.4 kB -- 20.5 kB
FormHelperText -- 66.7 kB -- 20.7 kB
FormLabel -- 66.8 kB -- 20.7 kB
Grid -- 68.4 kB -- 21.4 kB
GridList -- 65.8 kB -- 20.6 kB
GridListTile -- 67.1 kB -- 21 kB
GridListTileBar -- 66.6 kB -- 20.8 kB
Grow -- 27.7 kB -- 9.26 kB
Hidden -- 69.3 kB -- 21.7 kB
Icon -- 66.1 kB -- 20.7 kB
IconButton -- 79.4 kB -- 24.8 kB
Input -- 75.9 kB -- 23.7 kB
InputAdornment -- 68.4 kB -- 21.6 kB
InputBase -- 74 kB -- 23.2 kB
InputLabel -- 68.6 kB -- 21.2 kB
LinearProgress -- 68.7 kB -- 21.2 kB
Link -- 69.9 kB -- 22.1 kB
List -- 65.7 kB -- 20.5 kB
ListItem -- 80.3 kB -- 25.1 kB
ListItemAvatar -- 65.4 kB -- 20.5 kB
ListItemIcon -- 65.5 kB -- 20.5 kB
ListItemSecondaryAction -- 65.4 kB -- 20.5 kB
ListItemText -- 68.3 kB -- 21.5 kB
ListSubheader -- 66.1 kB -- 20.8 kB
Menu -- 91.8 kB -- 28.3 kB
MenuItem -- 81.4 kB -- 25.4 kB
MenuList -- 69.3 kB -- 21.7 kB
MobileStepper -- 71.2 kB -- 22.3 kB
Modal -- 14.3 kB -- 5.04 kB
NativeSelect -- 80.1 kB -- 25.3 kB
NoSsr -- 2.17 kB -- 1.03 kB
OutlinedInput -- 77.9 kB -- 24.3 kB
Pagination -- 87.6 kB -- 27 kB
PaginationItem -- 84 kB -- 25.9 kB
Paper -- 65.7 kB -- 20.5 kB
Popover -- 86.2 kB -- 26.7 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 86.4 kB -- 27.3 kB
RadioGroup -- 67.1 kB -- 20.9 kB
Rating -- 73.7 kB -- 23.7 kB
RootRef -- 4.21 kB -- 1.64 kB
ScopedCssBaseline -- 66.2 kB -- 20.7 kB
Select -- 119 kB -- 35.3 kB
Skeleton -- 66.3 kB -- 20.9 kB
Slide -- 29.1 kB -- 9.78 kB
Slider -- 79.1 kB -- 25.2 kB
Snackbar -- 78.6 kB -- 24.5 kB
SnackbarContent -- 66.9 kB -- 21 kB
SpeedDial -- 89.4 kB -- 28.3 kB
SpeedDialAction -- 121 kB -- 38.4 kB
SpeedDialIcon -- 67.9 kB -- 21.3 kB
Step -- 66 kB -- 20.7 kB
StepButton -- 85.5 kB -- 27 kB
StepConnector -- 66.1 kB -- 20.8 kB
StepContent -- 72.5 kB -- 22.6 kB
StepIcon -- 67.9 kB -- 21.2 kB
StepLabel -- 71.9 kB -- 22.3 kB
Stepper -- 68.2 kB -- 21.5 kB
styles/createMuiTheme -- 20.9 kB -- 7.27 kB
SvgIcon -- 66.4 kB -- 20.7 kB
SwipeableDrawer -- 95.3 kB -- 29.9 kB
Switch -- 84.6 kB -- 26.6 kB
Tab -- 79.6 kB -- 25.3 kB
Table -- 65.9 kB -- 20.6 kB
TableBody -- 65.4 kB -- 20.5 kB
TableCell -- 67.4 kB -- 21.2 kB
TableContainer -- 65.3 kB -- 20.4 kB
TableFooter -- 65.5 kB -- 20.5 kB
TableHead -- 65.4 kB -- 20.5 kB
TablePagination -- 145 kB -- 42.7 kB
TableRow -- 65.8 kB -- 20.6 kB
TableSortLabel -- 80.6 kB -- 25.5 kB
Tabs -- 88.6 kB -- 28.3 kB
TextareaAutosize -- 5.19 kB -- 2.17 kB
TextField -- 127 kB -- 37.4 kB
ToggleButton -- 79.4 kB -- 25.1 kB
ToggleButtonGroup -- 66.5 kB -- 20.9 kB
Toolbar -- 65.7 kB -- 20.6 kB
Tooltip -- 105 kB -- 33.1 kB
TreeItem -- 78.5 kB -- 24.8 kB
TreeView -- 71.5 kB -- 22.4 kB
Typography -- 67 kB -- 20.9 kB
useAutocomplete -- 15 kB -- 5.39 kB
useMediaQuery -- 2.56 kB -- 1.06 kB
Zoom -- 27.1 kB -- 9.18 kB

Generated by 🚫 dangerJS against 997cf00

@oliviertassinari oliviertassinari changed the title Added Error to Radio Buttons [docs] Simplify selection control demos Feb 7, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

Thanks for your interest in these demos. I think that we should go the other way around. The selection controls demos are quite overloaded. The best proof of this is that there are few code previews (demo too long). I think that we should break most of these demos into smaller and unique concerns. Basically, as we do with the text field, one demo = one simple concept.

@oliviertassinari oliviertassinari added the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Feb 7, 2020
@mbrookes

This comment has been minimized.

@theswerd
Copy link
Contributor Author

theswerd commented Feb 7, 2020

I added a new demo for showing errors and removed the error demos I added to the other demos.

@theswerd
Copy link
Contributor Author

theswerd commented Feb 7, 2020

If this pr is good can you recommend some other demos to update?

@oliviertassinari oliviertassinari requested review from mbrookes and removed request for oliviertassinari February 8, 2020 09:56
@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation and removed PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI labels Feb 8, 2020
@mbrookes
Copy link
Member

mbrookes commented Feb 8, 2020

For the Radio Group demo, I wonder if we need the "labelPlacement start" version? There is already a separate Label Placement demo.

For the Label Placement demo, you could perhaps make the first radio selected by default. This will give us a regression test for color="primary" to replace that lost from the above change, as well as following best practice.

I would also suggest reordering them to put "End" first, and removing the labelPlacement prop, since it is the default.

  1. I'm not convinced by the error demo. If selecting an available option is an error, then that suggest there is a bug in the application, and that that option should have been disabled instead.

@theswerd
Copy link
Contributor Author

theswerd commented Feb 9, 2020

I'll make those changes tomorrow.

Showing errors was hard for me to understand at first, so I believe it should stay. A common use case for this would be to highlight an incorrect answer on a quiz.

If you want me to build that out I can add a button, and when that button is pressed it checks if the right answer is pressed, if not it will show the error.

@mbrookes
Copy link
Member

mbrookes commented Feb 9, 2020

Interesting. Thanks for the real-world use case. (It's also one of those rare instances where not having a default makes sense.)

We need to balance the simplicity of the demos with practical examples. In this case I think it's worth the trade-off of showing a more completely worked example. @oliviertassinari what do you think?

@oliviertassinari
Copy link
Member

I think that a small validation demo wouldn't harm. Bootstrap includes it: https://getbootstrap.com/docs/4.4/components/forms/#supported-elements.

The imports were in different orders
@theswerd
Copy link
Contributor Author

@mbrookes is something wrong with Argos?

@mbrookes
Copy link
Member

Yep

@theswerd
Copy link
Contributor Author

@mbrookes Is there a way to trigger a re-run of the test so this PR can get approved?

@mbrookes
Copy link
Member

@theswerd I believe we're still waiting for #19599 (comment), so when you push that, it'll be run again. (If it still fails we can merge anyway.)

@theswerd
Copy link
Contributor Author

@mbrookes it looks like its still not working

@oliviertassinari oliviertassinari changed the title [docs] Simplify selection control demos [docs] Add radio error demo Feb 21, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

I have updated the pull request to:

  • Replace the helper text Check your answer... with ' '. I was confused by the label, I thought something was wrong with my choice, I have later realized that it wanted me to click on the button. But I have no strong feeling that it's better.
  • Use an actual <form> element.
  • Leave the controlled demo unchanged.
  • Match the component name match the name of the file.
  • Lower cased the header.

@eps1lon eps1lon self-assigned this Mar 4, 2020
@mbrookes mbrookes merged commit e25e473 into mui:master Mar 4, 2020
EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Mar 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants