Skip to content

Conversation

@ghost
Copy link

@ghost ghost commented Dec 27, 2019

This pull request implements changes to the src/styles/createBreakpoints.js file.
It aims to implement support for arbitrary/custom breakpoint values, for consistency purposes, as discussed in the following issue:

Closes #18652

@mui-pr-bot
Copy link

mui-pr-bot commented Dec 27, 2019

Details of bundle changes.

Comparing: 5533914...e2138cb

bundle Size Change Size Gzip Change Gzip
Snackbar ▲ +65 B (+0.09% ) 74.9 kB ▲ +62 B (+0.26% ) 23.5 kB
Stepper ▲ +65 B (+0.10% ) 64.6 kB ▲ +36 B (+0.18% ) 20.4 kB
SpeedDialIcon ▲ +65 B (+0.10% ) 64.3 kB ▲ +28 B (+0.14% ) 20.2 kB
Popover ▲ +65 B (+0.08% ) 82.5 kB ▲ +24 B (+0.09% ) 25.6 kB
ButtonBase ▲ +65 B (+0.09% ) 73.7 kB ▲ +22 B (+0.09% ) 23.2 kB
ListItem ▲ +65 B (+0.08% ) 76.8 kB ▲ +22 B (+0.09% ) 24.1 kB
MenuItem ▲ +65 B (+0.08% ) 77.9 kB ▲ +22 B (+0.09% ) 24.4 kB
AppBar ▲ +65 B (+0.10% ) 63.7 kB ▲ +21 B (+0.10% ) 20 kB
Menu ▲ +65 B (+0.07% ) 88.2 kB ▲ +21 B (+0.08% ) 27.3 kB
StepButton ▲ +65 B (+0.08% ) 82 kB ▲ +21 B (+0.08% ) 26 kB
List ▲ +65 B (+0.10% ) 62.1 kB ▲ +19 B (+0.10% ) 19.4 kB
Paper ▲ +65 B (+0.10% ) 62.1 kB ▲ +19 B (+0.10% ) 19.4 kB
BottomNavigationAction ▲ +65 B (+0.09% ) 75.2 kB ▲ +18 B (+0.08% ) 23.8 kB
ExpansionPanelSummary ▲ +65 B (+0.08% ) 77.8 kB ▲ +18 B (+0.07% ) 24.6 kB
Grid ▲ +65 B (+0.10% ) 64.9 kB ▲ +18 B (+0.09% ) 20.4 kB
SnackbarContent ▲ +65 B (+0.10% ) 63.3 kB ▲ +18 B (+0.09% ) 20 kB
Avatar ▲ +65 B (+0.10% ) 65 kB ▲ +17 B (+0.08% ) 20.6 kB
Backdrop ▲ +65 B (+0.10% ) 67.5 kB ▲ +17 B (+0.08% ) 20.9 kB
Divider ▲ +65 B (+0.10% ) 62.3 kB ▲ +17 B (+0.09% ) 19.7 kB
ListSubheader ▲ +65 B (+0.10% ) 62.5 kB ▲ +17 B (+0.09% ) 19.7 kB
MenuList ▲ +65 B (+0.10% ) 65.7 kB ▲ +17 B (+0.08% ) 20.6 kB
NativeSelect ▲ +65 B (+0.08% ) 76.6 kB ▲ +17 B (+0.07% ) 24.2 kB
Tooltip ▲ +65 B (+0.06% ) 101 kB ▲ +17 B (+0.05% ) 31.9 kB
Button ▲ +65 B (+0.08% ) 79.4 kB ▲ +16 B (+0.07% ) 24.4 kB
CardActions ▲ +65 B (+0.11% ) 61.8 kB ▲ +16 B (+0.08% ) 19.4 kB
DialogActions ▲ +65 B (+0.11% ) 61.9 kB ▲ +16 B (+0.08% ) 19.5 kB
ExpansionPanelActions ▲ +65 B (+0.11% ) 61.8 kB ▲ +16 B (+0.08% ) 19.4 kB
FilledInput ▲ +65 B (+0.09% ) 73.3 kB ▲ +16 B (+0.07% ) 22.8 kB
FormControl ▲ +65 B (+0.10% ) 64.1 kB ▲ +16 B (+0.08% ) 20 kB
FormControlLabel ▲ +65 B (+0.10% ) 65.3 kB ▲ +16 B (+0.08% ) 20.5 kB
FormGroup ▲ +65 B (+0.11% ) 61.8 kB ▲ +16 B (+0.08% ) 19.4 kB
InputBase ▲ +65 B (+0.09% ) 70.3 kB ▲ +16 B (+0.07% ) 22.1 kB
Slider ▲ +65 B (+0.09% ) 75.3 kB ▲ +16 B (+0.07% ) 23.9 kB
@material-ui/core ▲ +65 B (+0.02% ) 358 kB ▲ +15 B (+0.02% ) 97.7 kB
@material-ui/lab ▲ +65 B (+0.04% ) 177 kB ▲ +15 B (+0.03% ) 53.4 kB
Autocomplete ▲ +65 B (+0.05% ) 129 kB ▲ +15 B (+0.04% ) 40.4 kB
CardMedia ▲ +65 B (+0.10% ) 62.1 kB ▲ +15 B (+0.08% ) 19.6 kB
Chip ▲ +65 B (+0.08% ) 82.3 kB ▲ +15 B (+0.06% ) 25.3 kB
ExpansionPanelDetails ▲ +65 B (+0.11% ) 61.7 kB ▲ +15 B (+0.08% ) 19.4 kB
Fab ▲ +65 B (+0.09% ) 76.5 kB ▲ +15 B (+0.06% ) 23.9 kB
FormLabel ▲ +65 B (+0.10% ) 63.2 kB ▲ +15 B (+0.08% ) 19.7 kB
GridListTile ▲ +65 B (+0.10% ) 63.5 kB ▲ +15 B (+0.08% ) 20 kB
IconButton ▲ +65 B (+0.09% ) 75.9 kB ▲ +15 B (+0.06% ) 23.7 kB
Input ▲ +65 B (+0.09% ) 72.2 kB ▲ +15 B (+0.07% ) 22.6 kB
Select ▲ +65 B (+0.06% ) 114 kB ▲ +15 B (+0.04% ) 34 kB
StepLabel ▲ +65 B (+0.10% ) 68.3 kB ▲ +15 B (+0.07% ) 21.2 kB
styles/createMuiTheme ▲ +65 B (+0.40% ) 16.5 kB ▲ +15 B (+0.26% ) 5.84 kB
SvgIcon ▲ +65 B (+0.10% ) 62.8 kB ▲ +15 B (+0.08% ) 19.7 kB
TablePagination ▲ +65 B (+0.05% ) 141 kB ▲ +15 B (+0.04% ) 41.3 kB
TreeView ▲ +65 B (+0.10% ) 66.1 kB ▲ +15 B (+0.07% ) 20.8 kB
Typography ▲ +65 B (+0.10% ) 63.4 kB ▲ +15 B (+0.08% ) 19.9 kB
BottomNavigation ▲ +65 B (+0.10% ) 62.2 kB ▲ +14 B (+0.07% ) 19.5 kB
Breadcrumbs ▲ +65 B (+0.10% ) 67.7 kB ▲ +14 B (+0.07% ) 21.3 kB
CardActionArea ▲ +65 B (+0.09% ) 74.8 kB ▲ +14 B (+0.06% ) 23.6 kB
CardContent ▲ +65 B (+0.11% ) 61.7 kB ▲ +14 B (+0.07% ) 19.4 kB
CardHeader ▲ +65 B (+0.10% ) 64.8 kB ▲ +14 B (+0.07% ) 20.5 kB
DialogTitle ▲ +65 B (+0.10% ) 64 kB ▲ +14 B (+0.07% ) 20.1 kB
docs.main ▲ +65 B (+0.01% ) 614 kB ▲ +14 B (+0.01% ) 196 kB
Drawer ▲ +65 B (+0.08% ) 84.2 kB ▲ +14 B (+0.05% ) 25.7 kB
GridListTileBar ▲ +65 B (+0.10% ) 63 kB ▲ +14 B (+0.07% ) 19.8 kB
Hidden ▲ +65 B (+0.10% ) 65.7 kB ▲ +14 B (+0.07% ) 20.7 kB
InputLabel ▲ +65 B (+0.10% ) 65.1 kB ▲ +14 B (+0.07% ) 20.1 kB
ListItemIcon ▲ +65 B (+0.11% ) 61.9 kB ▲ +14 B (+0.07% ) 19.4 kB
ListItemText ▲ +65 B (+0.10% ) 64.7 kB ▲ +14 B (+0.07% ) 20.4 kB
MobileStepper ▲ +65 B (+0.10% ) 67.6 kB ▲ +14 B (+0.07% ) 21.3 kB
OutlinedInput ▲ +65 B (+0.09% ) 73.7 kB ▲ +14 B (+0.06% ) 23 kB
RadioGroup ▲ +65 B (+0.10% ) 63.2 kB ▲ +14 B (+0.07% ) 19.9 kB
Step ▲ +65 B (+0.10% ) 62.4 kB ▲ +14 B (+0.07% ) 19.6 kB
StepIcon ▲ +65 B (+0.10% ) 64.4 kB ▲ +14 B (+0.07% ) 20.1 kB
Tabs ▲ +65 B (+0.08% ) 85.2 kB ▲ +14 B (+0.05% ) 27.1 kB
TextField ▲ +65 B (+0.05% ) 123 kB ▲ +14 B (+0.04% ) 36.1 kB
ToggleButtonGroup ▲ +65 B (+0.10% ) 63 kB ▲ +14 B (+0.07% ) 19.9 kB
AvatarGroup ▲ +65 B (+0.10% ) 62 kB ▲ +13 B (+0.07% ) 19.5 kB
Badge ▲ +65 B (+0.10% ) 65.1 kB ▲ +13 B (+0.06% ) 20.3 kB
Box ▲ +65 B (+0.09% ) 70.5 kB ▲ +13 B (+0.06% ) 21.5 kB
ButtonGroup ▲ +65 B (+0.08% ) 82.9 kB ▲ +13 B (+0.05% ) 25.5 kB
Checkbox ▲ +65 B (+0.08% ) 81.7 kB ▲ +13 B (+0.05% ) 25.9 kB
Container ▲ +65 B (+0.10% ) 63 kB ▲ +13 B (+0.07% ) 19.8 kB
FormHelperText ▲ +65 B (+0.10% ) 63 kB ▲ +13 B (+0.07% ) 19.8 kB
GridList ▲ +65 B (+0.10% ) 62.2 kB ▲ +13 B (+0.07% ) 19.6 kB
Icon ▲ +65 B (+0.10% ) 62.5 kB ▲ +13 B (+0.07% ) 19.7 kB
LinearProgress ▲ +65 B (+0.10% ) 65.1 kB ▲ +13 B (+0.06% ) 20.4 kB
Link ▲ +65 B (+0.10% ) 66.4 kB ▲ +13 B (+0.06% ) 21 kB
Skeleton ▲ +65 B (+0.10% ) 62.7 kB ▲ +13 B (+0.07% ) 19.9 kB
SpeedDial ▲ +65 B (+0.08% ) 85.8 kB ▲ +13 B (+0.05% ) 27.1 kB
SpeedDialAction ▲ +65 B (+0.06% ) 117 kB ▲ +13 B (+0.04% ) 37 kB
StepConnector ▲ +65 B (+0.10% ) 62.5 kB ▲ +13 B (+0.07% ) 19.7 kB
SwipeableDrawer ▲ +65 B (+0.07% ) 91.6 kB ▲ +13 B (+0.05% ) 28.7 kB
Toolbar ▲ +65 B (+0.10% ) 62.1 kB ▲ +13 B (+0.07% ) 19.6 kB
Card ▲ +65 B (+0.10% ) 62.6 kB ▲ +12 B (+0.06% ) 19.6 kB
Collapse ▲ +65 B (+0.10% ) 67.6 kB ▲ +12 B (+0.06% ) 21 kB
DialogContent ▲ +65 B (+0.10% ) 62 kB ▲ +12 B (+0.06% ) 19.5 kB
Fade ▲ +65 B (+0.28% ) 23.3 kB ▲ +12 B (+0.15% ) 8 kB
Grow ▲ +65 B (+0.27% ) 23.9 kB ▲ +12 B (+0.15% ) 8.2 kB
InputAdornment ▲ +65 B (+0.10% ) 64.8 kB ▲ +12 B (+0.06% ) 20.5 kB
ListItemAvatar ▲ +65 B (+0.11% ) 61.9 kB ▲ +12 B (+0.06% ) 19.4 kB
ListItemSecondaryAction ▲ +65 B (+0.11% ) 61.8 kB ▲ +12 B (+0.06% ) 19.4 kB
Slide ▲ +65 B (+0.26% ) 25.3 kB ▲ +12 B (+0.14% ) 8.72 kB
StepContent ▲ +65 B (+0.09% ) 68.8 kB ▲ +12 B (+0.06% ) 21.6 kB
Table ▲ +65 B (+0.10% ) 62.3 kB ▲ +12 B (+0.06% ) 19.6 kB
TableBody ▲ +65 B (+0.11% ) 61.9 kB ▲ +12 B (+0.06% ) 19.4 kB
TableContainer ▲ +65 B (+0.11% ) 61.7 kB ▲ +12 B (+0.06% ) 19.4 kB
TableFooter ▲ +65 B (+0.11% ) 61.9 kB ▲ +12 B (+0.06% ) 19.4 kB
TableRow ▲ +65 B (+0.10% ) 62.3 kB ▲ +12 B (+0.06% ) 19.6 kB
TableSortLabel ▲ +65 B (+0.08% ) 77.1 kB ▲ +12 B (+0.05% ) 24.3 kB
ToggleButton ▲ +65 B (+0.09% ) 75.9 kB ▲ +12 B (+0.05% ) 24.1 kB
TreeItem ▲ +65 B (+0.09% ) 73.5 kB ▲ +12 B (+0.05% ) 23.3 kB
CircularProgress ▲ +65 B (+0.10% ) 63.9 kB ▲ +11 B (+0.05% ) 20.2 kB
CssBaseline ▲ +65 B (+0.11% ) 57.3 kB ▲ +11 B (+0.06% ) 18 kB
Dialog ▲ +65 B (+0.08% ) 82.5 kB ▲ +11 B (+0.04% ) 25.8 kB
DialogContentText ▲ +65 B (+0.10% ) 63.8 kB ▲ +11 B (+0.05% ) 20.1 kB
ExpansionPanel ▲ +65 B (+0.09% ) 71.1 kB ▲ +11 B (+0.05% ) 22.3 kB
Rating ▲ +65 B (+0.09% ) 70 kB ▲ +11 B (+0.05% ) 22.6 kB
Tab ▲ +65 B (+0.09% ) 76.1 kB ▲ +11 B (+0.05% ) 24.1 kB
TableCell ▲ +65 B (+0.10% ) 63.8 kB ▲ +11 B (+0.05% ) 20.2 kB
TableHead ▲ +65 B (+0.11% ) 61.9 kB ▲ +11 B (+0.06% ) 19.4 kB
Zoom ▲ +65 B (+0.28% ) 23.4 kB ▲ +11 B (+0.14% ) 8.11 kB
@material-ui/core[umd] ▲ +65 B (+0.02% ) 314 kB ▲ +10 B (+0.01% ) 90.6 kB
Switch ▲ +65 B (+0.08% ) 80.9 kB ▲ +10 B (+0.04% ) 25.6 kB
Radio ▲ +65 B (+0.08% ) 82.7 kB ▲ +9 B (+0.03% ) 26.2 kB
@material-ui/styles -- 50.8 kB -- 15.3 kB
@material-ui/system -- 14.5 kB -- 4.04 kB
ClickAwayListener -- 3.85 kB -- 1.55 kB
colorManipulator -- 3.85 kB -- 1.52 kB
docs.landing -- 50.7 kB -- 13.4 kB
Modal -- 14.3 kB -- 5.01 kB
NoSsr -- 2.19 kB -- 1.04 kB
Popper -- 28.7 kB -- 10.3 kB
Portal -- 2.9 kB -- 1.3 kB
RootRef -- 4.21 kB -- 1.64 kB
TextareaAutosize -- 5.09 kB -- 2.14 kB
useAutocomplete -- 12.7 kB -- 4.71 kB
useMediaQuery -- 2.5 kB -- 1.06 kB

Generated by 🚫 dangerJS against e2138cb

@oliviertassinari oliviertassinari added the type: new feature Expand the scope of the product to solve a new problem. label Dec 28, 2019
@oliviertassinari
Copy link
Member

oliviertassinari commented Dec 28, 2019

@ulises-lara Great start. Could you add a new test case? Thanks

@ghost
Copy link
Author

ghost commented Dec 28, 2019

@ulises-lara Great start. Could you add a new test case? Thanks

Sure thing, I will be working on that!

@oliviertassinari oliviertassinari changed the title [Theme] Add support for custom breakpoint values in between() function [theme] Support breakpoints.between(a, b) with number Dec 31, 2019
@oliviertassinari oliviertassinari merged commit d332339 into mui:master Dec 31, 2019
@oliviertassinari
Copy link
Member

@ulises-lara Thanks

@merceyz
Copy link
Collaborator

merceyz commented Dec 31, 2019

Should probably update the types for this as well
https://github.com/mui-org/material-ui/blob/a07f18029a5532de310f234392c18664817f0dce/packages/material-ui/src/styles/createBreakpoints.d.ts#L10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[theme] Support breakpoints.between(a, b) with number

3 participants