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] Add demo for actions in ExpansionPanelSummary #17969

Merged
merged 3 commits into from
Oct 23, 2019
Merged

[docs] Add demo for actions in ExpansionPanelSummary #17969

merged 3 commits into from
Oct 23, 2019

Conversation

ayliao
Copy link
Contributor

@ayliao ayliao commented Oct 21, 2019 •
edited by eps1lon
Loading

This PR adds an example demo for properly putting actions in the ExpansionPanelSummary as per #9427 (comment).

Hopefully this qualifies as a "reasonable example"... it was hard to think of one since I don't think it is the original intention in Material Design to allow actions to be placed inside the summary to begin with (although I understand why someone may want to do so, and may need direction!).

Fixes #9427

Edit @eps1lon:

demo preview

@ayliao ayliao mentioned this pull request Oct 21, 2019
Closed
@mui-pr-bot
Copy link

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

Details of bundle changes.

Comparing: 36a7646...bd1b989

bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +1 B (0.00% ) 348 kB ▲ +2 B (0.00% ) 95.2 kB
@material-ui/core[umd] ▲ +1 B (0.00% ) 307 kB ▲ +2 B (0.00% ) 88.3 kB
ExpansionPanelSummary ▲ +1 B (0.00% ) 77.9 kB ▲ +1 B (0.00% ) 24.5 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
docs.main -- 599 kB -- 191 kB
Drawer -- 84.4 kB -- 26 kB
ExpansionPanel -- 71.1 kB -- 22.1 kB
ExpansionPanelActions -- 62.1 kB -- 19.4 kB
ExpansionPanelDetails -- 61.9 kB -- 19.3 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.7 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 bd1b989

@eps1lon eps1lon added component: accordion This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation labels Oct 21, 2019
eps1lon
eps1lon previously requested changes Oct 21, 2019
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.

This look good. There's a minor issue with the used ids though.

docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.js Outdated Show resolved Hide resolved
oliviertassinari
oliviertassinari reviewed Oct 21, 2019
View reviewed changes
packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -134,7 +134,7 @@ const ExpansionPanelSummary = React.forwardRef(function ExpansionPanelSummary(pr
})}
edge="end"
component="div"
tabIndex={-1}
tabIndex={null}
Copy link
Member

@oliviertassinari oliviertassinari Oct 21, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Fix:

Capture d’écran 2019-10-21 à 23 14 36
https://validator.w3.org/

Prior to this change, if you click the icon, the space key action didn't trigger the expansion panel.

@oliviertassinari oliviertassinari force-pushed the 9427-actions-in-ExpansionPanelSummary branch 2 times, most recently from 56e0a6e to cbb8674 Compare October 21, 2019 21:31
@oliviertassinari oliviertassinari force-pushed the 9427-actions-in-ExpansionPanelSummary branch from cbb8674 to 46668ae Compare October 21, 2019 23:03
@ayliao
Copy link
Contributor Author

ayliao commented Oct 22, 2019 •
edited
Loading

thanks for all of the fixes @oliviertassinari ! please let me know if there's anything else I can add

oliviertassinari
oliviertassinari approved these changes Oct 22, 2019
View reviewed changes
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.

@eps1lon even better with the last commit 👍

@oliviertassinari oliviertassinari merged commit 33c1610 into mui:master Oct 23, 2019
@oliviertassinari
Copy link
Member

@ayliao Thank you

@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

@eps1lon eps1lon eps1lon left review comments

Assignees
No one assigned
Labels
component: accordion 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.

[Accordion] Additional actions in summary
4 participants
@ayliao @mui-pr-bot @oliviertassinari @eps1lon