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

[system] Adding css grid support into style system #18023

Closed
wants to merge 1 commit into from
Closed

[system] Adding css grid support into style system #18023

wants to merge 1 commit into from

Conversation

stuarthendren
Copy link

This would allow users to simply create declarative
css based grid components, as currently supported for flexbox.

The container and item properties are separated to allow the use to choose
if the component will support one of both elements of the grid system.

Added to the Box component to remain consistent.

see #9513 CSS Grid Support

This would allow users to simply create declarative
css based grid components, as currently supported for flexbox.

The container and item properties are separated to allow the use to choose
if the component will support one of both elements of the grid system.

Added to the Box component to remain consistent.

see #9513
@stuarthendren
Copy link
Author

I'm willing to do the associated documentation additions/changes but want to check first that the code is correct and acceptable.

@mui-pr-bot
Copy link

@material-ui/core: parsed: +0.37% , gzip: +0.27%
@material-ui/system: parsed: +9.21% , gzip: +5.71%

Details of bundle changes.

Comparing: 77774ef...5904e6c

bundle Size Change Size Gzip Change Gzip
@material-ui/system ▲ +1.36 kB (+9.21% ) 16.1 kB ▲ +232 B (+5.71% ) 4.3 kB
Box ▲ +1.27 kB (+1.84% ) 70.5 kB ▲ +219 B (+1.05% ) 21.1 kB
@material-ui/core ▲ +1.26 kB (+0.37% ) 348 kB ▲ +253 B (+0.27% ) 95.1 kB
docs.main ▲ +1.2 kB (+0.20% ) 601 kB ▲ +250 B (+0.13% ) 191 kB
@material-ui/core[umd] ▲ +766 B (+0.25% ) 306 kB ▲ +174 B (+0.20% ) 88.2 kB
ListItem ▲ +2 B (0.00% ) 75.4 kB ▲ +5 B (+0.02% ) 23.5 kB
TextField ▲ +2 B (0.00% ) 120 kB ▲ +4 B (+0.01% ) 35.1 kB
MenuItem ▲ +2 B (0.00% ) 76.4 kB ▲ +3 B (+0.01% ) 23.8 kB
TablePagination ▲ +2 B (0.00% ) 138 kB ▼ -3 B (-0.01% ) 40.3 kB
StepIcon ▲ +2 B (0.00% ) 63.1 kB ▲ +2 B (+0.01% ) 19.6 kB
FormControl ▲ +2 B (0.00% ) 62.7 kB ▼ -1 B (-0.01% ) 19.4 kB
FormLabel ▲ +2 B (0.00% ) 61.7 kB ▲ +1 B (+0.01% ) 19.1 kB
Tooltip ▲ +2 B (0.00% ) 97.5 kB ▼ -1 B (-0.00% ) 30.9 kB
Slider -- 73.7 kB ▼ -12 B (-0.05% ) 23.2 kB
Radio -- 80.9 kB ▼ -11 B (-0.04% ) 25.4 kB
StepButton -- 80.6 kB ▼ -10 B (-0.04% ) 25.3 kB
BottomNavigationAction -- 73.8 kB ▼ -9 B (-0.04% ) 23.3 kB
Divider -- 61 kB ▼ -9 B (-0.05% ) 19.1 kB
FormGroup -- 60.4 kB ▼ -9 B (-0.05% ) 18.9 kB
ExpansionPanelActions -- 60.5 kB ▼ -8 B (-0.04% ) 18.9 kB
ExpansionPanelSummary -- 76.3 kB ▼ -8 B (-0.03% ) 24 kB
GridListTileBar -- 61.6 kB ▼ -8 B (-0.04% ) 19.3 kB
ToggleButton -- 74.4 kB ▼ -8 B (-0.03% ) 23.5 kB
Checkbox -- 80 kB ▼ -7 B (-0.03% ) 25.1 kB
Switch -- 79.2 kB ▼ -7 B (-0.03% ) 24.7 kB
Avatar -- 61.1 kB ▼ -6 B (-0.03% ) 19.2 kB
Badge -- 63.8 kB ▼ -6 B (-0.03% ) 19.7 kB
Button -- 77.7 kB ▼ -6 B (-0.02% ) 24.1 kB
Chip -- 69 kB ▼ -6 B (-0.03% ) 21.3 kB
Container -- 61.6 kB ▼ -6 B (-0.03% ) 19.2 kB
Dialog -- 80.8 kB ▲ +6 B (+0.02% ) 25.1 kB
FormHelperText -- 61.7 kB ▼ -6 B (-0.03% ) 19.3 kB
Popover -- 81 kB ▲ +6 B (+0.02% ) 25 kB
RadioGroup -- 61.7 kB ▼ -6 B (-0.03% ) 19.3 kB
TableSortLabel -- 75.6 kB ▼ -6 B (-0.03% ) 23.9 kB
Toolbar -- 60.7 kB ▼ -6 B (-0.03% ) 19 kB
CardActionArea -- 73.3 kB ▼ -5 B (-0.02% ) 23.1 kB
CardContent -- 60.4 kB ▼ -5 B (-0.03% ) 18.9 kB
DialogActions -- 60.5 kB ▼ -5 B (-0.03% ) 18.9 kB
DialogContent -- 60.6 kB ▼ -5 B (-0.03% ) 19 kB
DialogTitle -- 62.7 kB ▼ -5 B (-0.03% ) 19.7 kB
FormControlLabel -- 63.9 kB ▼ -5 B (-0.02% ) 20.1 kB
InputAdornment -- 63.5 kB ▼ -5 B (-0.03% ) 20 kB
Link -- 65 kB ▼ -5 B (-0.02% ) 20.6 kB
Modal -- 14.2 kB ▼ -5 B (-0.10% ) 4.96 kB
Step -- 61 kB ▼ -5 B (-0.03% ) 19.1 kB
StepLabel -- 67 kB ▼ -5 B (-0.02% ) 21 kB
Table -- 61 kB ▼ -5 B (-0.03% ) 19.1 kB
TableBody -- 60.5 kB ▼ -5 B (-0.03% ) 18.9 kB
Tabs -- 83.7 kB ▼ -5 B (-0.02% ) 26.7 kB
Zoom -- 22.1 kB ▼ -5 B (-0.07% ) 7.6 kB
@material-ui/styles -- 50.8 kB ▼ -4 B (-0.03% ) 15.4 kB
Breadcrumbs -- 66.4 kB ▼ -4 B (-0.02% ) 20.8 kB
ButtonGroup -- 62.6 kB ▼ -4 B (-0.02% ) 19.5 kB
CircularProgress -- 62.5 kB ▼ -4 B (-0.02% ) 19.7 kB
Fab -- 75.1 kB ▼ -4 B (-0.02% ) 23.3 kB
GridListTile -- 62.1 kB ▼ -4 B (-0.02% ) 19.5 kB
Icon -- 61.2 kB ▼ -4 B (-0.02% ) 19.1 kB
LinearProgress -- 63.7 kB ▼ -4 B (-0.02% ) 19.8 kB
ListItemAvatar -- 60.5 kB ▼ -4 B (-0.02% ) 18.9 kB
ListItemIcon -- 60.6 kB ▼ -4 B (-0.02% ) 18.9 kB
ListItemText -- 63.4 kB ▼ -4 B (-0.02% ) 19.9 kB
NativeSelect -- 74.8 kB ▼ -4 B (-0.02% ) 23.5 kB
Skeleton -- 60.9 kB ▼ -4 B (-0.02% ) 19.1 kB
Snackbar -- 75.6 kB ▲ +4 B (+0.02% ) 23.5 kB
StepContent -- 67.4 kB ▼ -4 B (-0.02% ) 21 kB
TableHead -- 60.5 kB ▼ -4 B (-0.02% ) 18.9 kB
ToggleButtonGroup -- 61.6 kB ▼ -4 B (-0.02% ) 19.3 kB
useMediaQuery -- 2.49 kB ▲ +4 B (+0.38% ) 1.05 kB
AppBar -- 62.3 kB ▼ -3 B (-0.02% ) 19.5 kB
BottomNavigation -- 60.8 kB ▼ -3 B (-0.02% ) 19 kB
CardActions -- 60.5 kB ▼ -3 B (-0.02% ) 18.9 kB
CardHeader -- 63.5 kB ▼ -3 B (-0.02% ) 20 kB
ClickAwayListener -- 3.85 kB ▼ -3 B (-0.19% ) 1.55 kB
DialogContentText -- 62.5 kB ▼ -3 B (-0.02% ) 19.6 kB
ExpansionPanelDetails -- 60.4 kB ▼ -3 B (-0.02% ) 18.9 kB
Fade -- 22 kB ▼ -3 B (-0.04% ) 7.6 kB
Grow -- 22.6 kB ▲ +3 B (+0.04% ) 7.72 kB
InputBase -- 68.6 kB ▲ +3 B (+0.01% ) 21.5 kB
ListSubheader -- 61.2 kB ▼ -3 B (-0.02% ) 19.2 kB
Rating -- 68.3 kB ▼ -3 B (-0.01% ) 21.8 kB
Select -- 112 kB ▲ +3 B (+0.01% ) 33.2 kB
SpeedDialAction -- 113 kB ▼ -3 B (-0.01% ) 35.9 kB
StepConnector -- 61.1 kB ▼ -3 B (-0.02% ) 19.2 kB
Stepper -- 63.3 kB ▼ -3 B (-0.02% ) 19.9 kB
Tab -- 74.6 kB ▼ -3 B (-0.01% ) 23.6 kB
TableRow -- 60.9 kB ▼ -3 B (-0.02% ) 19.1 kB
TreeView -- 64.4 kB ▼ -3 B (-0.01% ) 20.2 kB
Backdrop -- 66.2 kB ▼ -2 B (-0.01% ) 20.4 kB
Card -- 61.3 kB ▼ -2 B (-0.01% ) 19.1 kB
CardMedia -- 60.8 kB ▲ +2 B (+0.01% ) 19.1 kB
Grid -- 63.5 kB ▼ -2 B (-0.01% ) 19.9 kB
GridList -- 60.9 kB ▼ -2 B (-0.01% ) 19.1 kB
Input -- 70.5 kB ▲ +2 B (+0.01% ) 22 kB
Menu -- 86.6 kB ▲ +2 B (+0.01% ) 27.2 kB
NoSsr -- 2.19 kB ▼ -2 B (-0.19% ) 1.03 kB
Portal -- 2.87 kB ▲ +2 B (+0.15% ) 1.29 kB
SpeedDialIcon -- 63 kB ▼ -2 B (-0.01% ) 19.8 kB
TableCell -- 62.5 kB ▼ -2 B (-0.01% ) 19.6 kB
TableFooter -- 60.5 kB ▼ -2 B (-0.01% ) 18.9 kB
@material-ui/lab -- 143 kB ▲ +1 B (0.00% ) 44.6 kB
ExpansionPanel -- 69.5 kB ▲ +1 B (0.00% ) 21.7 kB
FilledInput -- 71.5 kB ▲ +1 B (0.00% ) 22.2 kB
Hidden -- 64.5 kB ▲ +1 B (0.00% ) 20.2 kB
IconButton -- 74.4 kB ▼ -1 B (-0.00% ) 23.2 kB
InputLabel -- 63.5 kB ▼ -1 B (-0.01% ) 19.8 kB
ListItemSecondaryAction -- 60.4 kB ▼ -1 B (-0.01% ) 18.9 kB
MobileStepper -- 66.2 kB ▼ -1 B (-0.00% ) 20.6 kB
OutlinedInput -- 72.1 kB ▲ +1 B (0.00% ) 22.4 kB
Paper -- 60.8 kB ▲ +1 B (+0.01% ) 18.9 kB
RootRef -- 4.43 kB ▼ -1 B (-0.06% ) 1.66 kB
Slide -- 24.1 kB ▼ -1 B (-0.01% ) 8.21 kB
SnackbarContent -- 64.2 kB ▼ -1 B (-0.00% ) 20.1 kB
SpeedDial -- 84.3 kB ▲ +1 B (0.00% ) 26.5 kB
SwipeableDrawer -- 89 kB ▼ -1 B (-0.00% ) 27.6 kB
TextareaAutosize -- 5.06 kB ▼ -1 B (-0.05% ) 2.11 kB
Typography -- 62.1 kB ▲ +1 B (+0.01% ) 19.3 kB
ButtonBase -- 72.2 kB -- 22.6 kB
Collapse -- 66.3 kB -- 20.5 kB
colorManipulator -- 3.83 kB -- 1.52 kB
CssBaseline -- 56 kB -- 17.5 kB
docs.landing -- 54.8 kB -- 14.5 kB
Drawer -- 82.7 kB -- 25.6 kB
List -- 60.8 kB -- 18.9 kB
MenuList -- 64.4 kB -- 20.1 kB
Popper -- 28.3 kB -- 10.2 kB
styles/createMuiTheme -- 15.2 kB -- 5.36 kB
SvgIcon -- 61.5 kB -- 19.1 kB
TreeItem -- 71.8 kB -- 22.6 kB

Generated by 🚫 dangerJS against 5904e6c

@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 24, 2019

Closing as a duplicate of #17326. @stuarthendren Thank you for taking the time.

Regarding #9513, it's about modernizing our Grid component (I think).

@zannager zannager added the package: system Specific to @mui/system label Feb 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: system Specific to @mui/system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants