Skip to content

[Modal] Improve Gatsby support #17972

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
Merged
merged 2 commits into from
Oct 22, 2019
Merged

[Modal] Improve Gatsby support #17972

merged 2 commits into from
Oct 22, 2019

Conversation

@sreetej1998
Copy link
Contributor

@sreetej1998 sreetej1998 commented Oct 21, 2019 •
edited
Loading

fixes #17812 [Modal] Improve Gatsby support
@mui-pr-bot
Copy link

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

Details of bundle changes.

Comparing: 1e4d2db...231b922

bundle Size Change Size Gzip Change Gzip
@material-ui/core[umd] ▼ -88 B (-0.03% ) 307 kB ▲ +12 B (+0.01% ) 88.4 kB
SwipeableDrawer ▼ -84 B (-0.09% ) 90.6 kB ▲ +33 B (+0.12% ) 28.1 kB
Dialog ▼ -84 B (-0.10% ) 82.4 kB ▲ +27 B (+0.11% ) 25.6 kB
Menu ▼ -84 B (-0.10% ) 88.2 kB ▲ +26 B (+0.09% ) 27.6 kB
Drawer ▼ -84 B (-0.10% ) 84.3 kB ▲ +25 B (+0.10% ) 26.1 kB
Select ▼ -84 B (-0.07% ) 113 kB ▲ +25 B (+0.07% ) 33.6 kB
TextField ▼ -84 B (-0.07% ) 121 kB ▲ +20 B (+0.06% ) 35.5 kB
TablePagination ▼ -84 B (-0.06% ) 140 kB ▲ +19 B (+0.05% ) 40.8 kB
Popover ▼ -84 B (-0.10% ) 82.6 kB ▲ +17 B (+0.07% ) 25.5 kB
Modal ▼ -84 B (-0.59% ) 14.2 kB ▲ +11 B (+0.22% ) 4.97 kB
@material-ui/core ▼ -84 B (-0.02% ) 348 kB ▲ +9 B (+0.01% ) 95.2 kB
docs.main ▼ -66 B (-0.01% ) 599 kB ▲ +9 B (0.00% ) 191 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
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
ExpansionPanel -- 71.1 kB -- 22.1 kB
ExpansionPanelActions -- 62.1 kB -- 19.4 kB
ExpansionPanelDetails -- 61.9 kB -- 19.3 kB
ExpansionPanelSummary -- 77.9 kB -- 24.5 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
MenuItem -- 78 kB -- 24.3 kB
MenuList -- 66 kB -- 20.6 kB
MobileStepper -- 67.7 kB -- 21.1 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
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
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
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
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
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 231b922

@oliviertassinari oliviertassinari changed the title Selects in Gatsby allow scrolling [Modal] Improve Gatsby support Oct 21, 2019
@oliviertassinari oliviertassinari added the scope: modal Changes related to the modal. label Oct 21, 2019
@oliviertassinari oliviertassinari force-pushed the test branch 6 times, most recently from d519049 to d27ff2c Compare October 21, 2019 12:37
oliviertassinari
oliviertassinari approved these changes Oct 21, 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.

I have spent some time pushing the effort forward. Most notably, I wanted to test the changes in IE 11, it forced me to fix some problems. Thanks for taking the time to open a pull request.
docs/src/pages/components/modal/SpringModal.js Outdated
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import { useSpring, animated } from 'react-spring';
import { useSpring, animated } from 'react-spring/web.cjs';
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 pmndrs/react-spring#834
@oliviertassinari oliviertassinari added type: bug It doesn't behave as expected. PR: ready to ship labels Oct 21, 2019
oliviertassinari
oliviertassinari reviewed Oct 21, 2019
View reviewed changes
docs/src/pages/components/modal/ServerModal.js
transform: 'translateZ(0)',
// The position fixed scoping doesn't work in IE 11.
// Disable this demo to preserve the others.
'@media all and (-ms-high-contrast: none)': {
Copy link
Member

@oliviertassinari oliviertassinari Oct 21, 2019

Choose a reason for hiding this comment

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

Crazy CSS hack
@oliviertassinari oliviertassinari merged commit cdc4b98 into mui:master Oct 22, 2019
@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 22, 2019 •
edited
Loading

The changes are risky, we might need to partially revert, let's see. I can see it to go wrong in 2 possible ways:

  • People remove the body overflow hidden style, now it's on the html element, and not the body. The disableScrollLock prop should be preferred.
  • The overflow hidden on the html element has unpredictable effects. I have tested it on IE 11, Chrome, Firefox and Safari, but it's not exhaustive.
@muescha muescha mentioned this pull request Oct 30, 2019
Closed
@oliviertassinari oliviertassinari mentioned this pull request Nov 12, 2019
Closed
2 tasks
@andreasheim andreasheim mentioned this pull request Nov 19, 2019
Merged
1 task
andreasheim pushed a commit to andreasheim/material-ui that referenced this pull request Nov 19, 2019
Revert test changes from mui#17972
66000c1
@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@oliviertassinari oliviertassinari mentioned this pull request Oct 29, 2022
Open
@DiegoAndai DiegoAndai mentioned this pull request May 28, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y scope: modal Changes related to the modal. type: bug It doesn't behave as expected.

3 participants

@sreetej1998 @mui-pr-bot @oliviertassinari