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.

Sign up for GitHub

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

Jump to bottom

[docs] Document the onClick handler on Button #21234

Merged
merged 4 commits into from
May 31, 2020
Merged

[docs] Document the onClick handler on Button #21234

merged 4 commits into from
May 31, 2020

Conversation

hoop71
Copy link
Contributor

@hoop71 hoop71 commented May 28, 2020 •
edited by oliviertassinari

This PR beings to address the documentation update in #21086

I have been following the conversation and I think there is value is this type of documentation. I started a WIP PR and would love feedback on making it better and what other examples might be useful.

I based this PR on components/snackbars/snackbar

Happy to help how I can!

Closes #21086

@mui-pr-bot
Copy link

mui-pr-bot commented May 28, 2020 •
edited

Details of bundle changes.

Comparing: 4cbc014...be2de45

Details of page changes
bundle Size Change Size Gzip Change Gzip
/components/buttons ▲ +100 B (+0.38% ) 26.1 kB -- -1 B
/components/hidden ▼ -100 B (-0.94% ) 10.5 kB -- -1 B
/components/transfer-list ▼ -10 B (-0.10% ) 9.67 kB -- -1 B
/discover-more/team ▼ -10 B (-0.15% ) 6.67 kB -- -1 B
/getting-started/templates/blog ▼ -10 B (-0.13% ) 7.44 kB -- -1 B
/getting-started/templates/pricing ▼ -10 B (-0.13% ) 7.78 kB -- -1 B
/getting-started/templates/sign-in ▼ -10 B (-0.12% ) 8.41 kB -- -1 B
/getting-started/templates/sign-up ▼ -10 B (-0.12% ) 8.51 kB -- -1 B
/performance/table-emotion ▼ -10 B (-0.12% ) 8.49 kB -- -1 B
/_app -- 37.3 kB -- -1 B
/api-docs/alert-title -- 1.4 kB -- -1 B
/api-docs/alert -- 2.4 kB -- -1 B
/api-docs/app-bar -- 1.94 kB -- -1 B
/api-docs/autocomplete -- 4.61 kB -- -1 B
/api-docs/avatar-group -- 1.51 kB -- -1 B
/api-docs/avatar -- 1.86 kB -- -1 B
/api-docs/backdrop -- 1.72 kB -- -1 B
/api-docs/badge -- 2.13 kB -- -1 B
/api-docs/bottom-navigation-action -- 1.81 kB -- -1 B
/api-docs/bottom-navigation -- 1.7 kB -- -1 B
/api-docs/breadcrumbs -- 1.84 kB -- -1 B
/api-docs/button-base -- 2.32 kB -- -1 B
/api-docs/button-group -- 2.23 kB -- -1 B
/api-docs/button -- 2.55 kB -- -1 B
/api-docs/card-action-area -- 1.58 kB -- -1 B
/api-docs/card-actions -- 1.47 kB -- -1 B
/api-docs/card-content -- 1.45 kB -- -1 B
/api-docs/card-header -- 1.78 kB -- -1 B
/api-docs/card-media -- 1.69 kB -- -1 B
/api-docs/card -- 1.5 kB -- -1 B
/api-docs/checkbox -- 2.3 kB -- -1 B
/api-docs/chip -- 2.46 kB -- -1 B
/api-docs/circular-progress -- 2.07 kB -- -1 B
/api-docs/click-away-listener -- 1.44 kB -- -1 B
/api-docs/collapse -- 2.13 kB -- -1 B
/api-docs/container -- 1.86 kB -- -1 B
/api-docs/css-baseline -- 1.4 kB -- -1 B
/api-docs/dialog-actions -- 1.47 kB -- -1 B
/api-docs/dialog-content-text -- 1.48 kB -- -1 B
/api-docs/dialog-content -- 1.45 kB -- -1 B
/api-docs/dialog-title -- 1.49 kB -- -1 B
/api-docs/dialog -- 2.73 kB -- -1 B
/api-docs/divider -- 1.81 kB -- -1 B
/api-docs/drawer -- 2.13 kB -- -1 B
/api-docs/expansion-panel-actions -- 1.49 kB -- -1 B
/api-docs/expansion-panel-details -- 1.41 kB -- -1 B
/api-docs/expansion-panel-summary -- 1.72 kB -- -1 B
/api-docs/expansion-panel -- 1.97 kB -- -1 B
/api-docs/fab -- 2.09 kB -- -1 B
/api-docs/fade -- 1.5 kB -- -1 B
/api-docs/filled-input -- 2.87 kB -- -1 B
/api-docs/form-control-label -- 1.98 kB -- -1 B
/api-docs/form-control -- 2.36 kB -- -1 B
/api-docs/form-group -- 1.55 kB -- -1 B
/api-docs/form-helper-text -- 1.91 kB -- -1 B
/api-docs/form-label -- 1.84 kB -- -1 B
/api-docs/grid-list-tile-bar -- 1.8 kB -- -1 B
/api-docs/grid-list-tile -- 1.72 kB -- -1 B
/api-docs/grid-list -- 1.62 kB -- -1 B
/api-docs/grid -- 2.56 kB -- -1 B
/api-docs/grow -- 1.55 kB -- -1 B
/api-docs/hidden -- 1.53 kB -- -1 B
/api-docs/icon-button -- 2.08 kB -- -1 B
/api-docs/icon -- 1.78 kB -- -1 B
/api-docs/input-adornment -- 1.93 kB -- -1 B
/api-docs/input-base -- 2.95 kB -- -1 B
/api-docs/input-label -- 2.07 kB -- -1 B
/api-docs/input -- 2.83 kB -- -1 B
/api-docs/linear-progress -- 2.03 kB -- -1 B
/api-docs/link -- 1.93 kB -- -1 B
/api-docs/list-item-avatar -- 1.5 kB -- -1 B
/api-docs/list-item-icon -- 1.51 kB -- -1 B
/api-docs/list-item-secondary-action -- 1.47 kB -- -1 B
/api-docs/list-item-text -- 1.79 kB -- -1 B
/api-docs/list-item -- 2.25 kB -- -1 B
/api-docs/list-subheader -- 1.77 kB -- -1 B
/api-docs/list -- 1.68 kB -- -1 B
/api-docs/menu-item -- 1.74 kB -- -1 B
/api-docs/menu-list -- 1.57 kB -- -1 B
/api-docs/menu -- 2.4 kB -- -1 B
/api-docs/mobile-stepper -- 1.93 kB -- -1 B
/api-docs/modal -- 2.42 kB -- -1 B
/api-docs/native-select -- 2.08 kB -- -1 B
/api-docs/no-ssr -- 1.3 kB -- -1 B
/api-docs/outlined-input -- 2.98 kB -- -1 B
/api-docs/pagination-item -- 1.97 kB -- -1 B
/api-docs/pagination -- 2.24 kB -- -1 B
/api-docs/paper -- 1.87 kB -- -1 B
/api-docs/popover -- 2.69 kB -- -1 B
/api-docs/popper -- 1.91 kB -- -1 B
/api-docs/portal -- 1.34 kB -- -1 B
/api-docs/radio-group -- 1.45 kB -- -1 B
/api-docs/radio -- 2.12 kB -- -1 B
/api-docs/rating -- 2.49 kB -- -1 B
/api-docs/root-ref -- 1.41 kB -- -1 B
/api-docs/scoped-css-baseline -- 1.4 kB -- -1 B
/api-docs/select -- 2.94 kB -- -1 B
/api-docs/skeleton -- 1.87 kB -- -1 B
/api-docs/slide -- 1.54 kB -- -1 B
/api-docs/slider -- 3.11 kB -- -1 B
/api-docs/snackbar-content -- 1.61 kB -- -1 B
/api-docs/snackbar -- 2.71 kB -- -1 B
/api-docs/speed-dial-action -- 2.04 kB -- -1 B
/api-docs/speed-dial-icon -- 1.55 kB -- -1 B
/api-docs/speed-dial -- 2.3 kB -- -1 B
/api-docs/step-button -- 1.63 kB -- -1 B
/api-docs/step-connector -- 1.54 kB -- -1 B
/api-docs/step-content -- 1.72 kB -- -1 B
/api-docs/step-icon -- 1.57 kB -- -1 B
/api-docs/step-label -- 1.9 kB -- -1 B
/api-docs/step -- 1.64 kB -- -1 B
/api-docs/stepper -- 1.84 kB -- -1 B
/api-docs/svg-icon -- 2.26 kB -- -1 B
/api-docs/swipeable-drawer -- 2 kB -- -1 B
/api-docs/switch -- 2.46 kB -- -1 B
/api-docs/tab-context -- 1.05 kB -- -1 B
/api-docs/tab-list -- 1.08 kB -- -1 B
/api-docs/tab-panel -- 1.45 kB -- -1 B
/api-docs/tab-scroll-button -- 1.61 kB -- -1 B
/api-docs/tab -- 1.97 kB -- -1 B
/api-docs/table-body -- 1.47 kB -- -1 B
/api-docs/table-cell -- 2.13 kB -- -1 B
/api-docs/table-container -- 1.48 kB -- -1 B
/api-docs/table-footer -- 1.47 kB -- -1 B
/api-docs/table-head -- 1.46 kB -- -1 B
/api-docs/table-pagination -- 2.46 kB -- -1 B
/api-docs/table-row -- 1.69 kB -- -1 B
/api-docs/table-sort-label -- 1.83 kB -- -1 B
/api-docs/table -- 1.68 kB -- -1 B
/api-docs/tabs -- 2.68 kB -- -1 B
/api-docs/text-field -- 3.18 kB -- -1 B
/api-docs/textarea-autosize -- 1.13 kB -- -1 B
/api-docs/toggle-button-group -- 1.92 kB -- -1 B
/api-docs/toggle-button -- 1.78 kB -- -1 B
/api-docs/toolbar -- 1.65 kB -- -1 B
/api-docs/tooltip -- 2.56 kB -- -1 B
/api-docs/tree-item -- 1.88 kB -- -1 B
/api-docs/tree-view -- 1.92 kB -- -1 B
/api-docs/typography -- 2.59 kB -- -1 B
/api-docs/unstable-trap-focus -- 1.44 kB -- -1 B
/api-docs/zoom -- 1.52 kB -- -1 B
/blog/2019-developer-survey-results -- 6.35 kB -- -1 B
/blog/2019 -- 4.24 kB -- -1 B
/blog/2020-introducing-sketch -- 3.51 kB -- -1 B
/blog/2020-q1-update -- 4.33 kB -- -1 B
/blog/april-2019-update -- 3.13 kB -- -1 B
/blog/august-2019-update -- 2.24 kB -- -1 B
/blog/december-2019-update -- 2.37 kB -- -1 B
/blog/july-2019-update -- 2.13 kB -- -1 B
/blog/june-2019-update -- 2 kB -- -1 B
/blog/march-2019-update -- 2.53 kB -- -1 B
/blog/material-ui-v1-is-out -- 6.66 kB -- -1 B
/blog/material-ui-v4-is-out -- 9.68 kB -- -1 B
/blog/may-2019-update -- 2.35 kB -- -1 B
/blog/november-2019-update -- 2.75 kB -- -1 B
/blog/october-2019-update -- 2.5 kB -- -1 B
/blog/september-2019-update -- 2.68 kB -- -1 B
/company/about -- 1.74 kB -- -1 B
/company/contact -- 1.33 kB -- -1 B
/company/jobs -- 1.34 kB -- -1 B
/components/about-the-lab -- 6.8 kB -- -1 B
/components/alert -- 12.9 kB -- -1 B
/components/app-bar -- 30.2 kB -- -1 B
/components/autocomplete -- 109 kB -- -1 B
/components/avatars -- 9.18 kB -- -1 B
/components/backdrop -- 2.68 kB -- -1 B
/components/badges -- 15.4 kB -- -1 B
/components/bottom-navigation -- 6.27 kB -- -1 B
/components/box -- 8.05 kB -- -1 B
/components/breadcrumbs -- 14.7 kB -- -1 B
/components/button-group -- 7.59 kB -- -1 B
/components/cards -- 17.1 kB -- -1 B
/components/checkboxes -- 16.5 kB -- -1 B
/components/chips -- 21.8 kB -- -1 B
/components/click-away-listener -- 4.91 kB -- -1 B
/components/container -- 3.78 kB -- -1 B
/components/css-baseline -- 6.95 kB -- -1 B
/components/dialogs -- 43.1 kB -- -1 B
/components/dividers -- 12.8 kB -- -1 B
/components/drawers -- 31.5 kB -- -1 B
/components/expansion-panels -- 20.7 kB -- -1 B
/components/floating-action-button -- 10.8 kB -- -1 B
/components/grid-list -- 12 kB -- -1 B
/components/grid -- 32.4 kB -- -1 B
/components/icons -- 27.6 kB -- -1 B
/components/links -- 6.99 kB -- -1 B
/components/lists -- 26.5 kB -- -1 B
/components/material-icons -- 729 kB -- -1 B
/components/menus -- 25.1 kB -- -1 B
/components/modal -- 12.9 kB -- -1 B
/components/no-ssr -- 5.33 kB -- -1 B
/components/pagination -- 7.77 kB -- -1 B
/components/paper -- 3.49 kB -- -1 B
/components/pickers -- 39.3 kB -- -1 B
/components/popover -- 17.6 kB -- -1 B
/components/popper -- 22.4 kB -- -1 B
/components/portal -- 3.16 kB -- -1 B
/components/progress -- 21.1 kB -- -1 B
/components/radio-buttons -- 15 kB -- -1 B
/components/rating -- 11 kB -- -1 B
/components/selects -- 32.9 kB -- -1 B
/components/skeleton -- 12.3 kB -- -1 B
/components/slider -- 16.1 kB -- -1 B
/components/snackbars -- 22.1 kB -- -1 B
/components/speed-dial -- 14.6 kB -- -1 B
/components/steppers -- 36.9 kB -- -1 B
/components/switches -- 16.9 kB -- -1 B
/components/tables -- 174 kB -- -1 B
/components/tabs -- 24.4 kB -- -1 B
/components/text-fields -- 56.6 kB -- -1 B
/components/textarea-autosize -- 3.03 kB -- -1 B
/components/toggle-button -- 11.7 kB -- -1 B
/components/tooltips -- 17.5 kB -- -1 B
/components/transitions -- 12.6 kB -- -1 B
/components/tree-view -- 11.3 kB -- -1 B
/components/typography -- 9.93 kB -- -1 B
/components/use-media-query -- 12.9 kB -- -1 B
/customization/breakpoints -- 16.3 kB -- -1 B
/customization/color -- 20.9 kB -- -1 B
/customization/components -- 38.5 kB -- -1 B
/customization/default-theme -- 8.79 kB -- -1 B
/customization/density -- 9.75 kB -- -1 B
/customization/globals -- 5.13 kB -- -1 B
/customization/palette -- 14.2 kB -- -1 B
/customization/spacing -- 2.61 kB -- -1 B
/customization/theming -- 18.2 kB -- -1 B
/customization/typography -- 12.5 kB -- -1 B
/customization/z-index -- 3.13 kB -- -1 B
/discover-more/backers -- 3.05 kB -- -1 B
/discover-more/changelog -- 1.45 kB -- -1 B
/discover-more/languages -- 3.44 kB -- -1 B
/discover-more/related-projects -- 8.02 kB -- -1 B
/discover-more/roadmap -- 3.72 kB -- -1 B
/discover-more/showcase -- 15 kB -- -1 B
/discover-more/vision -- 6.68 kB -- -1 B
/getting-started/example-projects -- 7.11 kB -- -1 B
/getting-started/faq -- 33.6 kB -- -1 B
/getting-started/installation -- 7.85 kB -- -1 B
/getting-started/learn -- 8.98 kB -- -1 B
/getting-started/support -- 9.15 kB -- -1 B
/getting-started/supported-components -- 6.7 kB -- -1 B
/getting-started/supported-platforms -- 5.84 kB -- -1 B
/getting-started/templates -- 8.92 kB -- -1 B
/getting-started/templates/album -- 5.57 kB -- -1 B
/getting-started/templates/checkout -- 10.2 kB -- -1 B
/getting-started/templates/dashboard -- 8.86 kB -- -1 B
/getting-started/templates/sign-in-side -- 8.18 kB -- -1 B
/getting-started/templates/sticky-footer -- 1.54 kB -- -1 B
/getting-started/usage -- 9.58 kB -- -1 B
/guides/api -- 15.9 kB -- -1 B
/guides/composition -- 14.9 kB -- -1 B
/guides/flow -- 2.26 kB -- -1 B
/guides/interoperability -- 16.3 kB -- -1 B
/guides/localization -- 18.8 kB -- -1 B
/guides/migration-v0x -- 7.39 kB -- -1 B
/guides/migration-v3 -- 19.2 kB -- -1 B
/guides/minimizing-bundle-size -- 10 kB -- -1 B
/guides/responsive-ui -- 4.27 kB -- -1 B
/guides/right-to-left -- 5.24 kB -- -1 B
/guides/server-rendering -- 8.75 kB -- -1 B
/guides/testing -- 8.61 kB -- -1 B
/guides/typescript -- 15.1 kB -- -1 B
/performance/table-component -- 1.44 kB -- -1 B
/performance/table-hook -- 2.24 kB -- -1 B
/performance/table-mui -- 4.49 kB -- -1 B
/performance/table-raw -- 612 B -- -1 B
/performance/table-styled-components -- 2.6 kB -- -1 B
/premium-themes/onepirate -- 7.34 kB -- -1 B
/premium-themes/onepirate/forgot-password -- 1.01 kB -- -1 B
/premium-themes/onepirate/privacy -- 4.44 kB -- -1 B
/premium-themes/onepirate/sign-in -- 1.07 kB -- -1 B
/premium-themes/onepirate/sign-up -- 1.12 kB -- -1 B
/premium-themes/onepirate/terms -- 11.8 kB -- -1 B
/premium-themes/paperbase -- 7.67 kB -- -1 B
/styles/advanced -- 31.7 kB -- -1 B
/styles/api -- 16.9 kB -- -1 B
/styles/basics -- 16.5 kB -- -1 B
/system/api -- 5.96 kB -- -1 B
/system/basics -- 27.4 kB -- -1 B
/system/borders -- 4.1 kB -- -1 B
/system/display -- 6.55 kB -- -1 B
/system/flexbox -- 5.85 kB -- -1 B
/system/palette -- 4.35 kB -- -1 B
/system/positions -- 2.53 kB -- -1 B
/system/shadows -- 3.85 kB -- -1 B
/system/sizing -- 3.53 kB -- -1 B
/system/spacing -- 6.01 kB -- -1 B
/system/typography -- 4.42 kB -- -1 B
/versions -- 23 kB -- -1 B
docs:chunk:shared -- 65.9 kB -- -1 B
docs:shared:chunk/commons -- 5.99 kB -- -1 B
docs:shared:chunk/framework -- 42.3 kB -- -1 B
docs:shared:runtime/main -- 6.78 kB -- -1 B
docs:shared:runtime/webpack -- 1.24 kB -- -1 B
bundle Size Change Size Gzip Change Gzip
@material-ui/core -- 371 kB -- 102 kB
@material-ui/lab -- 218 kB -- 64.9 kB
@material-ui/styles -- 52.1 kB -- 15.6 kB
@material-ui/system -- 17.2 kB -- 4.52 kB
@material-ui/utils -- 6.83 kB -- 2.45 kB
Alert -- 87.8 kB -- 27.8 kB
AlertTitle -- 69.1 kB -- 21.8 kB
AppBar -- 68.9 kB -- 21.6 kB
Autocomplete -- 136 kB -- 42.9 kB
Avatar -- 70.1 kB -- 22 kB
AvatarGroup -- 71.1 kB -- 22.6 kB
Backdrop -- 73.6 kB -- 22.8 kB
Badge -- 70.2 kB -- 21.9 kB
BottomNavigation -- 67.3 kB -- 21.2 kB
BottomNavigationAction -- 80 kB -- 25.5 kB
Box -- 73.8 kB -- 22.4 kB
Breadcrumbs -- 85 kB -- 27 kB
Button -- 84.3 kB -- 25.9 kB
ButtonBase -- 78.5 kB -- 24.7 kB
ButtonGroup -- 87.9 kB -- 27.2 kB
Card -- 67.8 kB -- 21.3 kB
CardActionArea -- 79.6 kB -- 25.3 kB
CardActions -- 67 kB -- 21 kB
CardContent -- 66.9 kB -- 21 kB
CardHeader -- 70 kB -- 22.1 kB
CardMedia -- 67.3 kB -- 21.2 kB
Checkbox -- 86.7 kB -- 27.5 kB
Chip -- 87.2 kB -- 26.8 kB
CircularProgress -- 69 kB -- 21.8 kB
ClickAwayListener -- 4.13 kB -- 1.66 kB
Collapse -- 74 kB -- 22.9 kB
colorManipulator -- 3.96 kB -- 1.55 kB
Container -- 68.1 kB -- 21.3 kB
CssBaseline -- 66.9 kB -- 21 kB
Dialog -- 88.8 kB -- 27.9 kB
DialogActions -- 67 kB -- 21 kB
DialogContent -- 67.1 kB -- 21.1 kB
DialogContentText -- 68.9 kB -- 21.7 kB
DialogTitle -- 69.2 kB -- 21.8 kB
Divider -- 67.6 kB -- 21.3 kB
docs:/ -- 12.6 kB -- -1 B
docs:/_app -- 37.3 kB -- -1 B
Drawer -- 91 kB -- 27.7 kB
ExpansionPanel -- 77.6 kB -- 24.5 kB
ExpansionPanelActions -- 67 kB -- 21 kB
ExpansionPanelDetails -- 66.9 kB -- 21 kB
ExpansionPanelSummary -- 82.6 kB -- 26.2 kB
Fab -- 81.3 kB -- 25.4 kB
Fade -- 29.4 kB -- 9.85 kB
FilledInput -- 78.7 kB -- 24.5 kB
FormControl -- 69.3 kB -- 21.6 kB
FormControlLabel -- 70.4 kB -- 22.2 kB
FormGroup -- 66.9 kB -- 21 kB
FormHelperText -- 68.3 kB -- 21.3 kB
FormLabel -- 68.4 kB -- 21.2 kB
Grid -- 70 kB -- 22 kB
GridList -- 67.4 kB -- 21.2 kB
GridListTile -- 68.6 kB -- 21.6 kB
GridListTileBar -- 68.1 kB -- 21.4 kB
Grow -- 30 kB -- 10.1 kB
Hidden -- 70.9 kB -- 22.3 kB
Icon -- 67.7 kB -- 21.2 kB
IconButton -- 80.6 kB -- 25.3 kB
Input -- 77.6 kB -- 24.3 kB
InputAdornment -- 70 kB -- 22.1 kB
InputBase -- 75.7 kB -- 23.8 kB
InputLabel -- 70.2 kB -- 21.7 kB
LinearProgress -- 70.3 kB -- 21.8 kB
Link -- 71.5 kB -- 22.7 kB
List -- 67.2 kB -- 21 kB
ListItem -- 81.6 kB -- 25.6 kB
ListItemAvatar -- 67 kB -- 21 kB
ListItemIcon -- 67.1 kB -- 21.1 kB
ListItemSecondaryAction -- 66.9 kB -- 21 kB
ListItemText -- 69.9 kB -- 22 kB
ListSubheader -- 67.7 kB -- 21.3 kB
Menu -- 94.5 kB -- 29.2 kB
MenuItem -- 82.7 kB -- 26 kB
MenuList -- 70.9 kB -- 22.2 kB
MobileStepper -- 72.8 kB -- 22.9 kB
Modal -- 15.1 kB -- 5.27 kB
NativeSelect -- 82 kB -- 26 kB
NoSsr -- 2.18 kB -- 1.03 kB
OutlinedInput -- 79.7 kB -- 24.8 kB
packages/material-ui/material-ui.production.min.js -- 326 kB -- 95 kB
Pagination -- 89 kB -- 27.5 kB
PaginationItem -- 85.4 kB -- 26.4 kB
Paper -- 67.3 kB -- 21 kB
Popover -- 88.8 kB -- 27.5 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 87.7 kB -- 27.8 kB
RadioGroup -- 68.8 kB -- 21.4 kB
Rating -- 75.8 kB -- 24.4 kB
RootRef -- 4.64 kB -- 1.76 kB
ScopedCssBaseline -- 67.8 kB -- 21.3 kB
Select -- 122 kB -- 36.4 kB
Skeleton -- 68.1 kB -- 21.6 kB
Slide -- 31.2 kB -- 10.3 kB
Slider -- 80.9 kB -- 25.9 kB
Snackbar -- 81.5 kB -- 25.7 kB
SnackbarContent -- 68.4 kB -- 21.6 kB
SpeedDial -- 91.6 kB -- 29.1 kB
SpeedDialAction -- 123 kB -- 39.3 kB
SpeedDialIcon -- 69.4 kB -- 21.9 kB
Step -- 67.6 kB -- 21.2 kB
StepButton -- 86.8 kB -- 27.5 kB
StepConnector -- 67.6 kB -- 21.3 kB
StepContent -- 75.2 kB -- 23.6 kB
StepIcon -- 69.5 kB -- 21.7 kB
StepLabel -- 73.4 kB -- 22.8 kB
Stepper -- 69.8 kB -- 22 kB
styles/createMuiTheme -- 22.4 kB -- 7.75 kB
SvgIcon -- 67.9 kB -- 21.2 kB
SwipeableDrawer -- 98.4 kB -- 31 kB
Switch -- 85.9 kB -- 27 kB
Tab -- 81 kB -- 25.8 kB
TabContext -- 2.65 kB -- 1.15 kB
Table -- 67.5 kB -- 21.2 kB
TableBody -- 67 kB -- 21 kB
TableCell -- 69 kB -- 21.7 kB
TableContainer -- 66.9 kB -- 21 kB
TableFooter -- 67 kB -- 21 kB
TableHead -- 67 kB -- 21 kB
TablePagination -- 149 kB -- 43.9 kB
TableRow -- 67.4 kB -- 21.2 kB
TableSortLabel -- 81.9 kB -- 26 kB
TabList -- 91.8 kB -- 29.4 kB
TabPanel -- 67.8 kB -- 21.3 kB
Tabs -- 90.6 kB -- 28.4 kB
TabScrollButton -- 81.5 kB -- 25.6 kB
TextareaAutosize -- 5.24 kB -- 2.19 kB
TextField -- 131 kB -- 38.5 kB
ToggleButton -- 80.6 kB -- 25.6 kB
ToggleButtonGroup -- 68.3 kB -- 21.5 kB
Toolbar -- 67.2 kB -- 21.1 kB
Tooltip -- 107 kB -- 34 kB
TreeItem -- 80.9 kB -- 25.8 kB
TreeView -- 73.3 kB -- 23.1 kB
Typography -- 68.5 kB -- 21.4 kB
Unstable_TrapFocus -- 3.85 kB -- 1.59 kB
useAutocomplete -- 14.5 kB -- 5.2 kB
useMediaQuery -- 2.57 kB -- 1.06 kB
useScrollTrigger -- 2.66 kB -- 1.08 kB
Zoom -- 29.5 kB -- 9.98 kB

Generated by 🚫 dangerJS against be2de45

eps1lon
eps1lon reviewed May 29, 2020
View reviewed changes
Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

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

If we want to target beginners then including all this Snackbar related logic is likely too distracting.

I was thinking about simply adding onClick={() => alert('button clicked')}. But I'm not a big fan of alert since it disrupts the experience. I'd hope we could leverage babel to transpile this into our own implementation of alert that would display a Snackbar that doesn't interrupt.

@hoop71
Copy link
Contributor Author

hoop71 commented May 29, 2020

If we want to target beginners then including all this Snackbar related logic is likely too distracting.

I was thinking about simply adding onClick={() => alert('button clicked')}. But I'm not a big fan of alert since it disrupts the experience. I'd hope we could leverage babel to transpile this into our own implementation of alert that would display a Snackbar that doesn't interrupt.

If we want to target beginners then including all this Snackbar related logic is likely too distracting.

I was thinking about simply adding onClick={() => alert('button clicked')}. But I'm not a big fan of alert since it disrupts the experience. I'd hope we could leverage babel to transpile this into our own implementation of alert that would display a Snackbar that doesn't interrupt.

Sounds good. I will take a look at doing this with Babel.

@oliviertassinari
Copy link
Member

oliviertassinari commented May 29, 2020 •
edited

Sounds good. I will take a look at doing this with Babel.

Maybe for a second pull request (it might require multiple)? I imagine using an alert() would already be delivering value?

@oliviertassinari oliviertassinari added component: button This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation labels May 29, 2020
@hoop71
Copy link
Contributor Author

hoop71 commented May 29, 2020

Sounds good. I will take a look at doing this with Babel.

Maybe for a second pull request (it might require multiple)? I imagine using an alert() would already be delivering value?

OK. I tried to implement what @eps1lon was asking with Babel and was running into some challenges. Would love to see how this might work or how you would approach this.

I just pushed a super simple version of this PR.

  • How would you like to handle the linting issue with eslint/no-alert?
  • Is there value in adding the below to show how to access the event?
<Button onClick={(e) => alert(e.currentTarget.textContent)} variant="outlined">
   Use Button Content
</Button>

@oliviertassinari oliviertassinari changed the title Button onClick handler docs [Button] Document the onClick handler May 30, 2020
@oliviertassinari
Copy link
Member

@hoop71 I have tried to push further the pull request. Assuming that the issue we try to solve is closing the gap between the DOM events and how to listen to them in JSX, I think that we can go with a simpler approach:

Capture d’écran 2020-05-30 à 15 31 49

Basically, no demo, only a few lines to make the connection in new developers' minds. Let me know what you think :).

Regarding the Babel topic, I think that it will need further discussion. From what I understand:

  • We need to make sure the generated code of the demos can be copy and paste in codesandbox and behave identically.
  • In order to have this working, we need to Introduce a new imperative API to display snackbar (something we have already discussed in the past)
  • At things point, do we even need a babel transformation? Not sure.

@hoop71
Copy link
Contributor Author

hoop71 commented May 31, 2020

@hoop71 I have tried to push further the pull request. Assuming that the issue we try to solve is closing the gap between the DOM events and how to listen to them in JSX, I think that we can go with a simpler approach:

Capture d’écran 2020-05-30 à 15 31 49

Basically, no demo, only a few lines to make the connection in new developers' minds. Let me know what you think :).

Regarding the Babel topic, I think that it will need further discussion. From what I understand:

  • We need to make sure the generated code of the demos can be copy and paste in codesandbox and behave identically.
  • In order to have this working, we need to Introduce a new imperative API to display snackbar (something we have already discussed in the past)
  • At things point, do we even need a babel transformation? Not sure.

Works for me! Simple is normally better. I will defer to you and @eps1lon on the best approach moving forward. Happy to help where I can!

@eps1lon eps1lon changed the title [Button] Document the onClick handler [docs] Document the onClick handler on Button May 31, 2020
@eps1lon eps1lon merged commit 4290ba1 into mui:master May 31, 2020
@eps1lon
Copy link
Member

eps1lon commented May 31, 2020

@hoop71 That is a good starter, thanks!

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

Assignees
No one assigned
Labels
component: button This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Make Button examples run a user-defined function
4 participants
@hoop71 @mui-pr-bot @oliviertassinari @eps1lon