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

[core] Add grid support for Box #17326

Merged
merged 3 commits into from
Feb 2, 2020

Conversation

LavaToaster
Copy link
Contributor

@LavaToaster LavaToaster commented Sep 5, 2019

This PR adds css grid support for the Box component. Resolves #15878.

@mui-pr-bot
Copy link

mui-pr-bot commented Sep 5, 2019

@material-ui/core: parsed: +0.27% , gzip: +0.17%
@material-ui/system: parsed: +10.62% , gzip: +5.70%

Details of bundle changes.

Comparing: e3952a5...7d16f09

bundle Size Change Size Gzip Change Gzip
@material-ui/system ▲ +1.57 kB (+10.62% ) 16.4 kB ▲ +232 B (+5.70% ) 4.3 kB
Box ▲ +966 B (+1.36% ) 72 kB ▲ +156 B (+0.72% ) 21.8 kB
@material-ui/core ▲ +962 B (+0.27% ) 362 kB ▲ +168 B (+0.17% ) 98.9 kB
docs.main ▲ +520 B (+0.09% ) 596 kB ▲ +121 B (+0.06% ) 194 kB
@material-ui/core[umd] ▲ +324 B (+0.10% ) 317 kB ▲ +66 B (+0.07% ) 92 kB
TablePagination ▲ +1 B (0.00% ) 144 kB ▼ -7 B (-0.02% ) 42 kB
TextField ▲ +1 B (0.00% ) 125 kB ▼ -4 B (-0.01% ) 36.6 kB
Tooltip ▲ +1 B (0.00% ) 102 kB ▲ +4 B (+0.01% ) 32.4 kB
Autocomplete ▲ +1 B (0.00% ) 132 kB ▲ +3 B (+0.01% ) 41.4 kB
@material-ui/lab ▲ +1 B (0.00% ) 185 kB ▼ -2 B (-0.00% ) 55.3 kB
Button ▲ +1 B (0.00% ) 79.9 kB ▲ +2 B (+0.01% ) 24.5 kB
Chip ▲ +1 B (0.00% ) 82.8 kB ▲ +2 B (+0.01% ) 25.4 kB
Drawer ▲ +1 B (0.00% ) 85 kB ▼ -2 B (-0.01% ) 25.8 kB
ListItem ▲ +1 B (0.00% ) 77.3 kB ▲ +2 B (+0.01% ) 24.2 kB
MenuItem ▲ +1 B (0.00% ) 78.4 kB ▲ +2 B (+0.01% ) 24.5 kB
StepIcon ▲ +1 B (0.00% ) 64.8 kB ▲ +2 B (+0.01% ) 20.2 kB
FilledInput ▲ +1 B (0.00% ) 73.7 kB ▲ +1 B (0.00% ) 22.9 kB
OutlinedInput ▲ +1 B (0.00% ) 74.7 kB ▲ +1 B (0.00% ) 23.3 kB
RadioGroup ▲ +1 B (0.00% ) 64.6 kB ▼ -1 B (-0.00% ) 20.1 kB
Select ▲ +1 B (0.00% ) 117 kB ▼ -1 B (-0.00% ) 34.6 kB
FormControl ▲ +1 B (0.00% ) 64.6 kB -- 20.2 kB
FormLabel ▲ +1 B (0.00% ) 63.6 kB -- 19.8 kB
InputLabel ▲ +1 B (0.00% ) 65.5 kB -- 20.2 kB
Menu ▲ +1 B (0.00% ) 89 kB -- 27.4 kB
FormControlLabel -- 65.7 kB ▼ -45 B (-0.22% ) 20.6 kB
Avatar -- 65.4 kB ▼ -19 B (-0.09% ) 20.6 kB
AlertTitle -- 64.3 kB ▲ +5 B (+0.02% ) 20.3 kB
CardActions -- 62.2 kB ▲ +4 B (+0.02% ) 19.5 kB
SpeedDialAction -- 119 kB ▼ -4 B (-0.01% ) 37.5 kB
CardContent -- 62.1 kB ▼ -3 B (-0.02% ) 19.5 kB
Fade -- 23.4 kB ▼ -3 B (-0.04% ) 7.97 kB
Grow -- 24 kB ▼ -3 B (-0.04% ) 8.19 kB
SnackbarContent -- 63.7 kB ▼ -3 B (-0.01% ) 20.1 kB
StepConnector -- 62.9 kB ▼ -3 B (-0.02% ) 19.8 kB
TreeItem -- 74.2 kB ▲ +3 B (+0.01% ) 23.5 kB
AvatarGroup -- 62.4 kB ▲ +2 B (+0.01% ) 19.6 kB
ButtonBase -- 74.2 kB ▲ +2 B (+0.01% ) 23.3 kB
ButtonGroup -- 83.4 kB ▲ +2 B (+0.01% ) 25.5 kB
CircularProgress -- 64.3 kB ▲ +2 B (+0.01% ) 20.3 kB
CssBaseline -- 57.7 kB ▲ +2 B (+0.01% ) 18.1 kB
DialogActions -- 62.2 kB ▼ -2 B (-0.01% ) 19.5 kB
DialogTitle -- 64.4 kB ▼ -2 B (-0.01% ) 20.2 kB
Fab -- 77 kB ▲ +2 B (+0.01% ) 24 kB
IconButton -- 76.3 kB ▲ +2 B (+0.01% ) 23.8 kB
Link -- 66.8 kB ▼ -2 B (-0.01% ) 21.1 kB
ListItemIcon -- 62.3 kB ▼ -2 B (-0.01% ) 19.5 kB
MenuList -- 66.2 kB ▼ -2 B (-0.01% ) 20.7 kB
NativeSelect -- 77 kB ▼ -2 B (-0.01% ) 24.3 kB
Radio -- 84.2 kB ▲ +2 B (+0.01% ) 26.6 kB
Rating -- 70.7 kB ▼ -2 B (-0.01% ) 22.7 kB
StepButton -- 82.5 kB ▲ +2 B (+0.01% ) 26.1 kB
StepContent -- 69.3 kB ▼ -2 B (-0.01% ) 21.7 kB
StepLabel -- 68.8 kB ▲ +2 B (+0.01% ) 21.7 kB
TableHead -- 62.3 kB ▲ +2 B (+0.01% ) 19.5 kB
TableSortLabel -- 77.6 kB ▲ +2 B (+0.01% ) 24.4 kB
@material-ui/styles -- 51.4 kB ▲ +1 B (+0.01% ) 15.4 kB
AppBar -- 64.1 kB ▼ -1 B (-0.00% ) 20.1 kB
Backdrop -- 68 kB ▼ -1 B (-0.00% ) 21 kB
BottomNavigationAction -- 75.7 kB ▲ +1 B (0.00% ) 23.9 kB
Card -- 63 kB ▼ -1 B (-0.01% ) 19.7 kB
Checkbox -- 83.2 kB ▼ -1 B (-0.00% ) 26.3 kB
ClickAwayListener -- 3.91 kB ▲ +1 B (+0.06% ) 1.55 kB
Container -- 63.4 kB ▼ -1 B (-0.01% ) 19.8 kB
ExpansionPanelActions -- 62.2 kB ▲ +1 B (+0.01% ) 19.5 kB
ExpansionPanelDetails -- 62.1 kB ▲ +1 B (+0.01% ) 19.5 kB
FormGroup -- 62.2 kB ▲ +1 B (+0.01% ) 19.5 kB
Grid -- 65.3 kB ▲ +1 B (0.00% ) 20.5 kB
GridListTile -- 63.9 kB ▲ +1 B (0.00% ) 20 kB
GridListTileBar -- 63.4 kB ▲ +1 B (+0.01% ) 19.9 kB
Icon -- 62.9 kB ▼ -1 B (-0.01% ) 19.8 kB
List -- 62.5 kB ▼ -1 B (-0.01% ) 19.5 kB
ListItemSecondaryAction -- 62.2 kB ▲ +1 B (+0.01% ) 19.5 kB
MobileStepper -- 68 kB ▲ +1 B (0.00% ) 21.4 kB
Slide -- 25.5 kB ▼ -1 B (-0.01% ) 8.71 kB
Snackbar -- 75.6 kB ▼ -1 B (-0.00% ) 23.7 kB
SpeedDialIcon -- 64.7 kB ▲ +1 B (0.00% ) 20.3 kB
Step -- 62.8 kB ▼ -1 B (-0.01% ) 19.7 kB
Stepper -- 65 kB ▼ -1 B (-0.00% ) 20.5 kB
Switch -- 82.3 kB ▲ +1 B (0.00% ) 26 kB
TableBody -- 62.3 kB ▲ +1 B (+0.01% ) 19.5 kB
TableCell -- 64.2 kB ▼ -1 B (-0.00% ) 20.2 kB
TableContainer -- 62.1 kB ▼ -1 B (-0.01% ) 19.5 kB
ToggleButton -- 76.3 kB ▼ -1 B (-0.00% ) 24.2 kB
Toolbar -- 62.5 kB ▼ -1 B (-0.01% ) 19.6 kB
TreeView -- 66.8 kB ▼ -1 B (-0.00% ) 21.1 kB
Typography -- 63.8 kB ▲ +1 B (+0.01% ) 20 kB
Alert -- 84 kB -- 26.3 kB
Badge -- 65.5 kB -- 20.4 kB
BottomNavigation -- 62.6 kB -- 19.6 kB
Breadcrumbs -- 67.9 kB -- 21.3 kB
CardActionArea -- 75.3 kB -- 23.7 kB
CardHeader -- 65.2 kB -- 20.5 kB
CardMedia -- 62.5 kB -- 19.7 kB
Collapse -- 68.2 kB -- 21.1 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Dialog -- 83.2 kB -- 25.9 kB
DialogContent -- 62.4 kB -- 19.6 kB
DialogContentText -- 64.2 kB -- 20.2 kB
Divider -- 62.7 kB -- 19.7 kB
docs.landing -- 60.5 kB -- 16.4 kB
ExpansionPanel -- 72.5 kB -- 22.7 kB
ExpansionPanelSummary -- 78.3 kB -- 24.7 kB
FormHelperText -- 63.5 kB -- 20 kB
GridList -- 62.6 kB -- 19.7 kB
Hidden -- 66.1 kB -- 20.8 kB
Input -- 72.7 kB -- 22.7 kB
InputAdornment -- 65.3 kB -- 20.5 kB
InputBase -- 70.8 kB -- 22.2 kB
LinearProgress -- 65.5 kB -- 20.5 kB
ListItemAvatar -- 62.3 kB -- 19.5 kB
ListItemText -- 65.1 kB -- 20.5 kB
ListSubheader -- 62.9 kB -- 19.8 kB
Modal -- 14.5 kB -- 5.05 kB
NoSsr -- 2.19 kB -- 1.04 kB
Paper -- 62.5 kB -- 19.5 kB
Popover -- 83.3 kB -- 25.8 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.92 kB -- 1.3 kB
RootRef -- 4.24 kB -- 1.64 kB
Skeleton -- 63.1 kB -- 20 kB
Slider -- 76.8 kB -- 24.3 kB
SpeedDial -- 86.4 kB -- 27.2 kB
styles/createMuiTheme -- 16.5 kB -- 5.81 kB
SvgIcon -- 63.2 kB -- 19.8 kB
SwipeableDrawer -- 92.4 kB -- 28.9 kB
Tab -- 76.5 kB -- 24.2 kB
Table -- 62.7 kB -- 19.7 kB
TableFooter -- 62.3 kB -- 19.5 kB
TableRow -- 62.6 kB -- 19.7 kB
Tabs -- 85.8 kB -- 27.2 kB
TextareaAutosize -- 5.12 kB -- 2.14 kB
ToggleButtonGroup -- 63.4 kB -- 20 kB
useAutocomplete -- 14.6 kB -- 5.3 kB
useMediaQuery -- 2.58 kB -- 1.07 kB
Zoom -- 23.5 kB -- 8.1 kB

Generated by 🚫 dangerJS against 7d16f09

@LavaToaster
Copy link
Contributor Author

Tests failure due to connection problem with github

@oliviertassinari
Copy link
Member

The changes are relatively small. I think that we can keep the discussion under a single place :)

@mbrookes
Copy link
Member

mbrookes commented Sep 5, 2019

Leaving us in the slightly comical situation that Grid uses (flex)box, and Box, uses grid! 😄

@LavaToaster
Copy link
Contributor Author

LavaToaster commented Oct 19, 2019

I've been waiting more than a month for feedback. If you need me to do some more work on this to get this over the line, then please ask.

@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 19, 2019

@Lavoaster I didn't answer so far because I would like to revamp the whole implementation of the system. It's been out for almost a year now. We had people playing with it. We should be able to leverage these learnings. Regarding the change, I have one concern. What's the performance implication of the changes? Regarding the need for the grid support, I think that tailwindlabs/tailwindcss#32 upvotes are a good validation.

@LavaToaster
Copy link
Contributor Author

@oliviertassinari That's a good question.

I'm not sure how to measure performance on these specific changes in comparison to the last.

Do you have any resources on how I may be able to do this?

@oliviertassinari
Copy link
Member

@Lavoaster Sure:

cd packages/material-ui-benchmark
yarn system

@ShaunWMusic
Copy link

Hey guys, my team is looking at using CSS Grid more and would love to be able to access these inside Material-UI. how far away are we from merging this PR into the Repo? @Lavoaster @oliviertassinari Any updates on performance metrics? thanks!

@davisford
Copy link

LGTM

@oliviertassinari
Copy link
Member

Thanks, we can add the documentation later on.

@popuguytheparrot
Copy link

popuguytheparrot commented Feb 3, 2020

Sorry for comment it merged PR, but we can reduce a code size to 730 bytes
image
from 782 bytes
image
created by https://try.terser.org/

@Wragdan
Copy link

Wragdan commented Feb 6, 2020

@popuguytheparrot What did you use for the terser options?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new feature New feature or request package: system Specific to @mui/system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

@material-ui/system - Add Grid support
8 participants