Skip to content

Commit c425353

Browse files
povilasspovilass
authored
[Modal] Migrate to emotion + unstyled (mui#24857)
1 parent 3be1c9e commit c425353

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+1701
-835
lines changed

‎.stylelintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ module.exports = {
1313
'no-missing-end-of-source-newline': null,
1414
'declaration-colon-newline-after': null,
1515
'value-keyword-case': null,
16+
'value-list-comma-newline-after': null, // not compatible with prettier
1617
},
1718
};

‎docs/pages/api-docs/backdrop-unstyled.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"props": {
33
"children": { "type": { "name": "node" } },
4-
"classes": { "type": { "name": "object" }, "default": "{}" },
4+
"classes": { "type": { "name": "object" } },
55
"component": { "type": { "name": "elementType" } },
66
"components": {
77
"type": { "name": "shape", "description": "{ Root?: elementType }" },

‎docs/pages/api-docs/backdrop.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"props": {
33
"open": { "type": { "name": "bool" }, "required": true },
44
"children": { "type": { "name": "node" } },
5-
"classes": { "type": { "name": "object" }, "default": "{}" },
5+
"classes": { "type": { "name": "object" } },
66
"component": { "type": { "name": "elementType" } },
77
"components": {
88
"type": { "name": "shape", "description": "{ Root?: elementType }" },

‎docs/pages/api-docs/badge-unstyled.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"badgeContent": { "type": { "name": "node" } },
1111
"children": { "type": { "name": "node" } },
12-
"classes": { "type": { "name": "object" }, "default": "{}" },
12+
"classes": { "type": { "name": "object" } },
1313
"component": { "type": { "name": "elementType" } },
1414
"components": {
1515
"type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" },

‎docs/pages/api-docs/badge.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"badgeContent": { "type": { "name": "node" } },
1111
"children": { "type": { "name": "node" } },
12-
"classes": { "type": { "name": "object" }, "default": "{}" },
12+
"classes": { "type": { "name": "object" } },
1313
"color": {
1414
"type": {
1515
"name": "union",

‎docs/pages/api-docs/modal-unstyled.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import ApiPage from 'docs/src/modules/components/ApiPage';
3+
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
4+
import jsonPageContent from './modal-unstyled.json';
5+
6+
export default function Page(props) {
7+
const { descriptions, pageContent } = props;
8+
return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
9+
}
10+
11+
Page.getInitialProps = () => {
12+
const req = require.context(
13+
'docs/translations/api-docs/modal-unstyled',
14+
false,
15+
/modal-unstyled.*.json$/,
16+
);
17+
const descriptions = mapApiPageTranslations(req);
18+
19+
return {
20+
descriptions,
21+
pageContent: jsonPageContent,
22+
};
23+
};

‎docs/pages/api-docs/modal-unstyled.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"props": {
3+
"children": { "type": { "name": "custom", "description": "element" }, "required": true },
4+
"open": { "type": { "name": "bool" }, "required": true },
5+
"BackdropComponent": { "type": { "name": "elementType" } },
6+
"BackdropProps": { "type": { "name": "object" } },
7+
"classes": { "type": { "name": "object" } },
8+
"closeAfterTransition": { "type": { "name": "bool" } },
9+
"component": { "type": { "name": "elementType" } },
10+
"components": {
11+
"type": { "name": "shape", "description": "{ Root?: elementType }" },
12+
"default": "{}"
13+
},
14+
"componentsProps": { "type": { "name": "object" }, "default": "{}" },
15+
"container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
16+
"disableAutoFocus": { "type": { "name": "bool" } },
17+
"disableEnforceFocus": { "type": { "name": "bool" } },
18+
"disableEscapeKeyDown": { "type": { "name": "bool" } },
19+
"disablePortal": { "type": { "name": "bool" } },
20+
"disableRestoreFocus": { "type": { "name": "bool" } },
21+
"disableScrollLock": { "type": { "name": "bool" } },
22+
"hideBackdrop": { "type": { "name": "bool" } },
23+
"keepMounted": { "type": { "name": "bool" } },
24+
"onBackdropClick": { "type": { "name": "func" } },
25+
"onClose": { "type": { "name": "func" } }
26+
},
27+
"name": "ModalUnstyled",
28+
"styles": {
29+
"classes": ["root", "hidden"],
30+
"globalClasses": { "root": "MuiModal-root", "hidden": "MuiModal-hidden" },
31+
"name": null
32+
},
33+
"spread": true,
34+
"forwardsRefTo": "HTMLDivElement",
35+
"filename": "/packages/material-ui-unstyled/src/ModalUnstyled/ModalUnstyled.js",
36+
"inheritance": null,
37+
"demos": "<ul><li><a href=\"/components/modal/\">Modal</a></li></ul>",
38+
"styledComponent": true,
39+
"cssComponent": false
40+
}

‎docs/pages/api-docs/modal.json

+11-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@
22
"props": {
33
"children": { "type": { "name": "custom", "description": "element" }, "required": true },
44
"open": { "type": { "name": "bool" }, "required": true },
5-
"BackdropComponent": { "type": { "name": "elementType" }, "default": "SimpleBackdrop" },
5+
"BackdropComponent": { "type": { "name": "elementType" }, "default": "Backdrop" },
66
"BackdropProps": { "type": { "name": "object" } },
7+
"classes": { "type": { "name": "object" } },
78
"closeAfterTransition": { "type": { "name": "bool" } },
9+
"component": { "type": { "name": "elementType" } },
10+
"components": {
11+
"type": { "name": "shape", "description": "{ Root?: elementType }" },
12+
"default": "{}"
13+
},
14+
"componentsProps": { "type": { "name": "object" }, "default": "{}" },
815
"container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
916
"disableAutoFocus": { "type": { "name": "bool" } },
1017
"disableEnforceFocus": { "type": { "name": "bool" } },
@@ -15,10 +22,11 @@
1522
"hideBackdrop": { "type": { "name": "bool" } },
1623
"keepMounted": { "type": { "name": "bool" } },
1724
"onBackdropClick": { "type": { "name": "func" } },
18-
"onClose": { "type": { "name": "func" } }
25+
"onClose": { "type": { "name": "func" } },
26+
"sx": { "type": { "name": "object" } }
1927
},
2028
"name": "Modal",
21-
"styles": { "classes": [], "globalClasses": {}, "name": null },
29+
"styles": { "classes": ["root", "hidden"], "globalClasses": {}, "name": "MuiModal" },
2230
"spread": true,
2331
"forwardsRefTo": "HTMLDivElement",
2432
"filename": "/packages/material-ui/src/Modal/Modal.js",

‎docs/pages/api-docs/slider-unstyled.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"aria-label": { "type": { "name": "custom", "description": "string" } },
44
"aria-labelledby": { "type": { "name": "string" } },
55
"aria-valuetext": { "type": { "name": "custom", "description": "string" } },
6-
"classes": { "type": { "name": "object" }, "default": "{}" },
6+
"classes": { "type": { "name": "object" } },
77
"component": { "type": { "name": "elementType" } },
88
"components": {
99
"type": {

‎docs/pages/api-docs/slider.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"aria-label": { "type": { "name": "custom", "description": "string" } },
44
"aria-labelledby": { "type": { "name": "string" } },
55
"aria-valuetext": { "type": { "name": "custom", "description": "string" } },
6-
"classes": { "type": { "name": "object" }, "default": "{}" },
6+
"classes": { "type": { "name": "object" } },
77
"color": {
88
"type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" },
99
"default": "'primary'"

‎docs/src/pages/components/badges/UnstyledBadge.js

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ const StyledBadge = styled(BadgeUnstyled)`
1212
font-variant: tabular-nums;
1313
list-style: none;
1414
font-feature-settings: 'tnum';
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
16+
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
17+
'Segoe UI Symbol';
1518
position: relative;
1619
display: inline-block;
1720
line-height: 1;

‎docs/src/pages/components/badges/UnstyledBadge.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ const StyledBadge = styled(BadgeUnstyled)`
1212
font-variant: tabular-nums;
1313
list-style: none;
1414
font-feature-settings: 'tnum';
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
16+
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
17+
'Segoe UI Symbol';
1518
position: relative;
1619
display: inline-block;
1720
line-height: 1;

‎docs/src/pages/components/badges/badges.md

+7
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,11 @@ You can use the `anchorOrigin` prop to move the badge to any corner of the wrapp
5858

5959
## Unstyled badge
6060

61+
The badge also comes with an unstyled version.
62+
It's ideal for doing heavy customizations and minimizing bundle size.
63+
64+
```js
65+
import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
66+
```
67+
6168
{{"demo": "pages/components/badges/UnstyledBadge.js"}}

‎docs/src/pages/components/modal/BasicModal.js

+11-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
22
import Box from '@material-ui/core/Box';
3+
import Button from '@material-ui/core/Button';
4+
import Typography from '@material-ui/core/Typography';
35
import Modal from '@material-ui/core/Modal';
46

57
const style = {
@@ -11,38 +13,30 @@ const style = {
1113
bgcolor: 'background.paper',
1214
border: '2px solid #000',
1315
boxShadow: 24,
14-
pt: 2,
15-
px: 4,
16-
pb: 3,
16+
p: 4,
1717
};
1818

1919
export default function BasicModal() {
2020
const [open, setOpen] = React.useState(false);
21-
22-
const handleOpen = () => {
23-
setOpen(true);
24-
};
25-
26-
const handleClose = () => {
27-
setOpen(false);
28-
};
21+
const handleOpen = () => setOpen(true);
22+
const handleClose = () => setOpen(false);
2923

3024
return (
3125
<div>
32-
<button type="button" onClick={handleOpen}>
33-
Open Modal
34-
</button>
26+
<Button onClick={handleOpen}>Open modal</Button>
3527
<Modal
3628
open={open}
3729
onClose={handleClose}
3830
aria-labelledby="modal-modal-title"
3931
aria-describedby="modal-modal-description"
4032
>
4133
<Box sx={style}>
42-
<h2 id="modal-modal-title">Text in a modal</h2>
43-
<p id="modal-modal-description">
34+
<Typography id="modal-modal-title" variant="h6" component="h2">
35+
Text in a modal
36+
</Typography>
37+
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
4438
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
45-
</p>
39+
</Typography>
4640
</Box>
4741
</Modal>
4842
</div>

‎docs/src/pages/components/modal/BasicModal.tsx

+11-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
22
import Box from '@material-ui/core/Box';
3+
import Button from '@material-ui/core/Button';
4+
import Typography from '@material-ui/core/Typography';
35
import Modal from '@material-ui/core/Modal';
46

57
const style = {
@@ -11,38 +13,30 @@ const style = {
1113
bgcolor: 'background.paper',
1214
border: '2px solid #000',
1315
boxShadow: 24,
14-
pt: 2,
15-
px: 4,
16-
pb: 3,
16+
p: 4,
1717
};
1818

1919
export default function BasicModal() {
2020
const [open, setOpen] = React.useState(false);
21-
22-
const handleOpen = () => {
23-
setOpen(true);
24-
};
25-
26-
const handleClose = () => {
27-
setOpen(false);
28-
};
21+
const handleOpen = () => setOpen(true);
22+
const handleClose = () => setOpen(false);
2923

3024
return (
3125
<div>
32-
<button type="button" onClick={handleOpen}>
33-
Open Modal
34-
</button>
26+
<Button onClick={handleOpen}>Open modal</Button>
3527
<Modal
3628
open={open}
3729
onClose={handleClose}
3830
aria-labelledby="modal-modal-title"
3931
aria-describedby="modal-modal-description"
4032
>
4133
<Box sx={style}>
42-
<h2 id="modal-modal-title">Text in a modal</h2>
43-
<p id="modal-modal-description">
34+
<Typography id="modal-modal-title" variant="h6" component="h2">
35+
Text in a modal
36+
</Typography>
37+
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
4438
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
45-
</p>
39+
</Typography>
4640
</Box>
4741
</Modal>
4842
</div>

‎docs/src/pages/components/modal/KeepMountedModal.js

+25-46
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,44 @@
11
import * as React from 'react';
2-
import { makeStyles } from '@material-ui/core/styles';
2+
import Box from '@material-ui/core/Box';
33
import Modal from '@material-ui/core/Modal';
4-
5-
function rand() {
6-
return Math.round(Math.random() * 20) - 10;
7-
}
8-
9-
function getModalStyle() {
10-
const top = 50 + rand();
11-
const left = 50 + rand();
12-
13-
return {
14-
top: `${top}%`,
15-
left: `${left}%`,
16-
transform: `translate(-${top}%, -${left}%)`,
17-
};
18-
}
19-
20-
const useStyles = makeStyles((theme) => ({
21-
paper: {
22-
position: 'absolute',
23-
width: 400,
24-
backgroundColor: theme.palette.background.paper,
25-
border: '2px solid #000',
26-
boxShadow: theme.shadows[5],
27-
padding: theme.spacing(2, 4, 3),
28-
},
29-
}));
4+
import Button from '@material-ui/core/Button';
5+
import Typography from '@material-ui/core/Typography';
6+
7+
const style = {
8+
position: 'absolute',
9+
top: '50%',
10+
left: '50%',
11+
transform: 'translate(-50%, -50%)',
12+
width: 400,
13+
bgcolor: 'background.paper',
14+
border: '2px solid #000',
15+
boxShadow: 24,
16+
p: 4,
17+
};
3018

3119
export default function KeepMountedModal() {
32-
const classes = useStyles();
33-
// getModalStyle is not a pure function, we roll the style only on the first render
34-
const [modalStyle] = React.useState(getModalStyle);
3520
const [open, setOpen] = React.useState(false);
36-
37-
const handleOpen = () => {
38-
setOpen(true);
39-
};
40-
41-
const handleClose = () => {
42-
setOpen(false);
43-
};
21+
const handleOpen = () => setOpen(true);
22+
const handleClose = () => setOpen(false);
4423

4524
return (
4625
<div>
47-
<button type="button" onClick={handleOpen}>
48-
Open Modal
49-
</button>
26+
<Button onClick={handleOpen}>Open modal</Button>
5027
<Modal
5128
keepMounted
5229
open={open}
5330
onClose={handleClose}
5431
aria-labelledby="keep-mounted-modal-title"
5532
aria-describedby="keep-mounted-modal-description"
5633
>
57-
<div style={modalStyle} className={classes.paper}>
58-
<h2 id="keep-mounted-modal-title">Text in a modal</h2>
59-
<p id="keep-mounted-modal-description">
34+
<Box sx={style}>
35+
<Typography id="keep-mounted-modal-title" variant="h6" component="h2">
36+
Text in a modal
37+
</Typography>
38+
<Typography id="keep-mounted-modal-description" sx={{ mt: 2 }}>
6039
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
61-
</p>
62-
</div>
40+
</Typography>
41+
</Box>
6342
</Modal>
6443
</div>
6544
);

0 commit comments

Comments
 (0)