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

[ExpansionPanel] Use context instead of cloneElement #18085

Merged
merged 4 commits into from
Oct 31, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Oct 29, 2019

Closes #15763, part of #12921

Prop removal isn't an issue since they were never document (@ignore). Code which forward rest props to the actual ExpansionPanel summary will still work the same.

@eps1lon eps1lon added new feature New feature or request component: accordion This is the name of the generic UI component, not the React module! labels Oct 29, 2019
@mui-pr-bot
Copy link

mui-pr-bot commented Oct 29, 2019

@material-ui/core: parsed: +0.05% , gzip: +0.12%

Details of bundle changes.

Comparing: c28697d...69a6b92

bundle Size Change Size Gzip Change Gzip
ExpansionPanel ▲ +181 B (+0.26% ) 69.6 kB ▲ +38 B (+0.18% ) 21.7 kB
@material-ui/core ▲ +173 B (+0.05% ) 349 kB ▲ +111 B (+0.12% ) 95.4 kB
@material-ui/core[umd] ▲ +94 B (+0.03% ) 308 kB ▲ +86 B (+0.10% ) 88.7 kB
ExpansionPanelSummary ▲ +76 B (+0.10% ) 76.3 kB ▲ +17 B (+0.07% ) 24 kB
@material-ui/lab ▲ +1 B (0.00% ) 168 kB ▲ +6 B (+0.01% ) 50.6 kB
Chip ▲ +1 B (0.00% ) 80.9 kB ▼ -1 B (-0.00% ) 24.7 kB
FormLabel ▲ +1 B (0.00% ) 61.9 kB ▲ +1 B (+0.01% ) 19.1 kB
OutlinedInput ▲ +1 B (0.00% ) 72.4 kB ▲ +1 B (0.00% ) 22.5 kB
Select ▲ +1 B (0.00% ) 112 kB ▲ +1 B (0.00% ) 33.4 kB
StepIcon ▲ +1 B (0.00% ) 63.1 kB ▲ +1 B (+0.01% ) 19.6 kB
TablePagination ▲ +1 B (0.00% ) 139 kB ▲ +1 B (0.00% ) 40.5 kB
Backdrop ▲ +1 B (0.00% ) 66.2 kB -- 20.4 kB
Collapse ▲ +1 B (0.00% ) 66.3 kB -- 20.5 kB
Fab ▲ +1 B (0.00% ) 75.1 kB -- 23.3 kB
FilledInput ▲ +1 B (0.00% ) 72 kB -- 22.3 kB
FormControl ▲ +1 B (0.00% ) 62.8 kB -- 19.5 kB
List ▲ +1 B (0.00% ) 60.8 kB -- 18.9 kB
ListItem ▲ +1 B (0.00% ) 75.4 kB -- 23.5 kB
MenuItem ▲ +1 B (0.00% ) 76.4 kB -- 23.8 kB
MenuList ▲ +1 B (0.00% ) 64.4 kB -- 20.1 kB
Popover ▲ +1 B (0.00% ) 81 kB -- 25 kB
TextField ▲ +1 B (0.00% ) 121 kB -- 35.4 kB
Tooltip ▲ +1 B (0.00% ) 97.6 kB -- 30.9 kB
StepConnector -- 61.1 kB ▼ -9 B (-0.05% ) 19.2 kB
Button -- 77.7 kB ▼ -6 B (-0.02% ) 24 kB
TreeItem -- 71.8 kB ▲ +6 B (+0.03% ) 22.6 kB
SwipeableDrawer -- 90 kB ▼ -5 B (-0.02% ) 27.9 kB
Drawer -- 82.7 kB ▼ -4 B (-0.02% ) 25.6 kB
InputLabel -- 63.7 kB ▲ +4 B (+0.02% ) 19.8 kB
SpeedDial -- 84.3 kB ▼ -4 B (-0.02% ) 26.5 kB
Stepper -- 63.2 kB ▼ -4 B (-0.02% ) 19.8 kB
TableCell -- 62.5 kB ▲ +4 B (+0.02% ) 19.6 kB
CardActionArea -- 73.3 kB ▲ +3 B (+0.01% ) 23.1 kB
DialogActions -- 60.5 kB ▼ -3 B (-0.02% ) 18.9 kB
Icon -- 61.2 kB ▲ +3 B (+0.02% ) 19.2 kB
ListItemSecondaryAction -- 60.4 kB ▼ -3 B (-0.02% ) 18.9 kB
TreeView -- 64.4 kB ▲ +3 B (+0.01% ) 20.1 kB
AppBar -- 62.2 kB ▼ -2 B (-0.01% ) 19.5 kB
Badge -- 63.8 kB ▲ +2 B (+0.01% ) 19.7 kB
BottomNavigation -- 60.8 kB ▼ -2 B (-0.01% ) 19 kB
Box -- 69.2 kB ▼ -2 B (-0.01% ) 20.9 kB
Breadcrumbs -- 66.4 kB ▼ -2 B (-0.01% ) 20.8 kB
CircularProgress -- 62.5 kB ▼ -2 B (-0.01% ) 19.7 kB
CssBaseline -- 56 kB ▼ -2 B (-0.01% ) 17.5 kB
DialogContent -- 60.6 kB ▼ -2 B (-0.01% ) 19 kB
ExpansionPanelActions -- 60.5 kB ▲ +2 B (+0.01% ) 18.9 kB
GridListTileBar -- 61.6 kB ▲ +2 B (+0.01% ) 19.3 kB
Hidden -- 64.5 kB ▼ -2 B (-0.01% ) 20.2 kB
RadioGroup -- 61.7 kB ▼ -2 B (-0.01% ) 19.3 kB
Skeleton -- 60.9 kB ▲ +2 B (+0.01% ) 19.1 kB
Slide -- 24.1 kB ▲ +2 B (+0.02% ) 8.21 kB
StepButton -- 80.5 kB ▲ +2 B (+0.01% ) 25.3 kB
Tab -- 74.6 kB ▲ +2 B (+0.01% ) 23.6 kB
TableFooter -- 60.5 kB ▲ +2 B (+0.01% ) 18.9 kB
ToggleButton -- 74.4 kB ▲ +2 B (+0.01% ) 23.5 kB
@material-ui/styles -- 50.8 kB ▼ -1 B (-0.01% ) 15.4 kB
@material-ui/system -- 14.8 kB ▲ +1 B (+0.02% ) 4.07 kB
Autocomplete -- 124 kB ▼ -1 B (-0.00% ) 39.4 kB
BottomNavigationAction -- 73.7 kB ▲ +1 B (0.00% ) 23.3 kB
CardActions -- 60.5 kB ▲ +1 B (+0.01% ) 18.9 kB
Checkbox -- 80 kB ▼ -1 B (-0.00% ) 25.1 kB
ClickAwayListener -- 3.85 kB ▲ +1 B (+0.06% ) 1.55 kB
Container -- 61.6 kB ▲ +1 B (+0.01% ) 19.2 kB
DialogTitle -- 62.7 kB ▲ +1 B (+0.01% ) 19.7 kB
docs.main -- 602 kB ▼ -1 B (-0.00% ) 192 kB
ExpansionPanelDetails -- 60.4 kB ▼ -1 B (-0.01% ) 18.9 kB
FormControlLabel -- 63.9 kB ▲ +1 B (0.00% ) 20.1 kB
FormHelperText -- 61.7 kB ▲ +1 B (+0.01% ) 19.3 kB
Grid -- 63.5 kB ▲ +1 B (+0.01% ) 19.9 kB
GridList -- 60.9 kB ▼ -1 B (-0.01% ) 19.1 kB
ListItemAvatar -- 60.5 kB ▲ +1 B (+0.01% ) 18.9 kB
ListItemIcon -- 60.6 kB ▼ -1 B (-0.01% ) 19 kB
Menu -- 86.6 kB ▲ +1 B (0.00% ) 27.2 kB
NativeSelect -- 75.1 kB ▲ +1 B (0.00% ) 23.7 kB
Rating -- 68.3 kB ▼ -1 B (-0.00% ) 21.8 kB
RootRef -- 4.43 kB ▼ -1 B (-0.06% ) 1.67 kB
Slider -- 73.7 kB ▲ +1 B (0.00% ) 23.3 kB
SpeedDialIcon -- 63 kB ▲ +1 B (+0.01% ) 19.8 kB
StepContent -- 67.4 kB ▲ +1 B (0.00% ) 21 kB
Switch -- 79.3 kB ▼ -1 B (-0.00% ) 24.7 kB
Table -- 61 kB ▼ -1 B (-0.01% ) 19.1 kB
TableBody -- 60.5 kB ▲ +1 B (+0.01% ) 18.9 kB
TableHead -- 60.5 kB ▲ +1 B (+0.01% ) 18.9 kB
TableRow -- 60.9 kB ▲ +1 B (+0.01% ) 19.1 kB
useMediaQuery -- 2.49 kB ▼ -1 B (-0.10% ) 1.05 kB
Zoom -- 22.1 kB ▼ -1 B (-0.01% ) 7.6 kB
Avatar -- 61.1 kB -- 19.2 kB
ButtonBase -- 72.2 kB -- 22.6 kB
ButtonGroup -- 62.6 kB -- 19.5 kB
Card -- 61.1 kB -- 19.1 kB
CardContent -- 60.4 kB -- 18.9 kB
CardHeader -- 63.5 kB -- 20 kB
CardMedia -- 60.8 kB -- 19.1 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Dialog -- 80.9 kB -- 25.1 kB
DialogContentText -- 62.5 kB -- 19.6 kB
Divider -- 61 kB -- 19.1 kB
docs.landing -- 56 kB -- 14.6 kB
Fade -- 22 kB -- 7.6 kB
FormGroup -- 60.4 kB -- 18.9 kB
GridListTile -- 62.1 kB -- 19.5 kB
Grow -- 22.6 kB -- 7.72 kB
IconButton -- 74.4 kB -- 23.2 kB
Input -- 70.9 kB -- 22.1 kB
InputAdornment -- 63.5 kB -- 20 kB
InputBase -- 69 kB -- 21.6 kB
LinearProgress -- 63.7 kB -- 19.8 kB
Link -- 65 kB -- 20.6 kB
ListItemText -- 63.4 kB -- 19.9 kB
ListSubheader -- 61.2 kB -- 19.2 kB
MobileStepper -- 66.1 kB -- 20.6 kB
Modal -- 14.2 kB -- 4.96 kB
NoSsr -- 2.19 kB -- 1.04 kB
Paper -- 60.6 kB -- 18.8 kB
Popper -- 28.5 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 80.9 kB -- 25.4 kB
Snackbar -- 75.5 kB -- 23.5 kB
SnackbarContent -- 64 kB -- 20.1 kB
SpeedDialAction -- 114 kB -- 36 kB
Step -- 61 kB -- 19.1 kB
StepLabel -- 67 kB -- 21 kB
styles/createMuiTheme -- 15.2 kB -- 5.36 kB
SvgIcon -- 61.5 kB -- 19.1 kB
TableSortLabel -- 75.6 kB -- 23.9 kB
Tabs -- 83.7 kB -- 26.6 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
ToggleButtonGroup -- 61.6 kB -- 19.4 kB
Toolbar -- 60.7 kB -- 19 kB
Typography -- 62.1 kB -- 19.3 kB
useAutocomplete -- 11.1 kB -- 4.21 kB

Generated by 🚫 dangerJS against 69a6b92

@eps1lon eps1lon marked this pull request as ready for review October 29, 2019 13:54
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.

Code which forward rest props to the actual ExpansionPanel summary will still work the same.

The idea sounds good on paper. I expect very few people to rely on the hidden injected props (cloneElement) to customize the component. If people do, they should be able to recover by controlling the component.

packages/material-ui/src/ExpansionPanel/Context.js Outdated Show resolved Hide resolved
eps1lon and others added 2 commits October 31, 2019 18:15
Co-Authored-By: Tim Bormans <hello@timbormans.com>
@@ -5,7 +5,7 @@ import clsx from 'clsx';
import ButtonBase from '../ButtonBase';
import IconButton from '../IconButton';
import withStyles from '../styles/withStyles';
import ExpansionPanelContext from '../ExpansionPanel/Context';
import ExpansionPanelContext from '../ExpansionPanel/ExpansionPanelContext';
Copy link
Member

Choose a reason for hiding this comment

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

The title of the commit might suggest that you prefer Context, I do agree that it's unnecessarily long. I think that we should change all the components 👌.

Copy link
Member Author

Choose a reason for hiding this comment

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

Nah it's fine for most of the tooling. In vscode you get the display of the file and dirname so it is information duplication. But as far as I know many people still have an issue with ExpansionPanel/index.js because then they only see index.js in their IDE. As long as people still rely on the filename this is fine. But as always I recommend working these issues from both ends :)

Copy link
Member

Choose a reason for hiding this comment

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

Alright, let's move to the next problem :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: accordion This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Accordion] Unable to use component with AccordionSummary inside Accordion
4 participants