[Modal] Migrate to emotion + unstyled (mui#24857)

andriy-shymkiv · Feb 23, 2021 · c425353 · c425353
1 parent 3be1c9e
commit c425353
Show file tree

Hide file tree

Showing 74 changed files with 1,701 additions and 835 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -13,5 +13,6 @@ module.exports = {
     'no-missing-end-of-source-newline': null,
     'declaration-colon-newline-after': null,
     'value-keyword-case': null,
+    'value-list-comma-newline-after': null, // not compatible with prettier
   },
 };
diff --git a/docs/pages/api-docs/backdrop-unstyled.json b/docs/pages/api-docs/backdrop-unstyled.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Root?: elementType }" },

diff --git a/docs/pages/api-docs/backdrop.json b/docs/pages/api-docs/backdrop.json
@@ -2,7 +2,7 @@
   "props": {
     "open": { "type": { "name": "bool" }, "required": true },
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Root?: elementType }" },

diff --git a/docs/pages/api-docs/badge-unstyled.json b/docs/pages/api-docs/badge-unstyled.json
@@ -9,7 +9,7 @@
     },
     "badgeContent": { "type": { "name": "node" } },
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" },

diff --git a/docs/pages/api-docs/badge.json b/docs/pages/api-docs/badge.json
@@ -9,7 +9,7 @@
     },
     "badgeContent": { "type": { "name": "node" } },
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
         "name": "union",

diff --git a/docs/pages/api-docs/modal-unstyled.js b/docs/pages/api-docs/modal-unstyled.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './modal-unstyled.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/modal-unstyled',
+    false,
+    /modal-unstyled.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/modal-unstyled.json b/docs/pages/api-docs/modal-unstyled.json
@@ -0,0 +1,40 @@
+{
+  "props": {
+    "children": { "type": { "name": "custom", "description": "element" }, "required": true },
+    "open": { "type": { "name": "bool" }, "required": true },
+    "BackdropComponent": { "type": { "name": "elementType" } },
+    "BackdropProps": { "type": { "name": "object" } },
+    "classes": { "type": { "name": "object" } },
+    "closeAfterTransition": { "type": { "name": "bool" } },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
+    "disableAutoFocus": { "type": { "name": "bool" } },
+    "disableEnforceFocus": { "type": { "name": "bool" } },
+    "disableEscapeKeyDown": { "type": { "name": "bool" } },
+    "disablePortal": { "type": { "name": "bool" } },
+    "disableRestoreFocus": { "type": { "name": "bool" } },
+    "disableScrollLock": { "type": { "name": "bool" } },
+    "hideBackdrop": { "type": { "name": "bool" } },
+    "keepMounted": { "type": { "name": "bool" } },
+    "onBackdropClick": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } }
+  },
+  "name": "ModalUnstyled",
+  "styles": {
+    "classes": ["root", "hidden"],
+    "globalClasses": { "root": "MuiModal-root", "hidden": "MuiModal-hidden" },
+    "name": null
+  },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui-unstyled/src/ModalUnstyled/ModalUnstyled.js",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/modal/\">Modal</a></li></ul>",
+  "styledComponent": true,
+  "cssComponent": false
+}
diff --git a/docs/pages/api-docs/modal.json b/docs/pages/api-docs/modal.json
@@ -2,9 +2,16 @@
   "props": {
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
     "open": { "type": { "name": "bool" }, "required": true },
-    "BackdropComponent": { "type": { "name": "elementType" }, "default": "SimpleBackdrop" },
+    "BackdropComponent": { "type": { "name": "elementType" }, "default": "Backdrop" },
     "BackdropProps": { "type": { "name": "object" } },
+    "classes": { "type": { "name": "object" } },
     "closeAfterTransition": { "type": { "name": "bool" } },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disableAutoFocus": { "type": { "name": "bool" } },
     "disableEnforceFocus": { "type": { "name": "bool" } },
@@ -15,10 +22,11 @@
     "hideBackdrop": { "type": { "name": "bool" } },
     "keepMounted": { "type": { "name": "bool" } },
     "onBackdropClick": { "type": { "name": "func" } },
-    "onClose": { "type": { "name": "func" } }
+    "onClose": { "type": { "name": "func" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Modal",
-  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "styles": { "classes": ["root", "hidden"], "globalClasses": {}, "name": "MuiModal" },
   "spread": true,
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/material-ui/src/Modal/Modal.js",

diff --git a/docs/pages/api-docs/slider-unstyled.json b/docs/pages/api-docs/slider-unstyled.json
@@ -3,7 +3,7 @@
     "aria-label": { "type": { "name": "custom", "description": "string" } },
     "aria-labelledby": { "type": { "name": "string" } },
     "aria-valuetext": { "type": { "name": "custom", "description": "string" } },
-    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": {

diff --git a/docs/pages/api-docs/slider.json b/docs/pages/api-docs/slider.json
@@ -3,7 +3,7 @@
     "aria-label": { "type": { "name": "custom", "description": "string" } },
     "aria-labelledby": { "type": { "name": "string" } },
     "aria-valuetext": { "type": { "name": "custom", "description": "string" } },
-    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "classes": { "type": { "name": "object" } },
     "color": {
       "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" },
       "default": "'primary'"

diff --git a/docs/src/pages/components/badges/UnstyledBadge.js b/docs/src/pages/components/badges/UnstyledBadge.js
@@ -12,6 +12,9 @@ const StyledBadge = styled(BadgeUnstyled)`
   font-variant: tabular-nums;
   list-style: none;
   font-feature-settings: 'tnum';
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/src/pages/components/badges/UnstyledBadge.tsx b/docs/src/pages/components/badges/UnstyledBadge.tsx
@@ -12,6 +12,9 @@ const StyledBadge = styled(BadgeUnstyled)`
   font-variant: tabular-nums;
   list-style: none;
   font-feature-settings: 'tnum';
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
@@ -58,4 +58,11 @@ You can use the `anchorOrigin` prop to move the badge to any corner of the wrapp
 
 ## Unstyled badge
 
+The badge also comes with an unstyled version.
+It's ideal for doing heavy customizations and minimizing bundle size.
+
+```js
+import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
+```
+
 {{"demo": "pages/components/badges/UnstyledBadge.js"}}
diff --git a/docs/src/pages/components/modal/BasicModal.js b/docs/src/pages/components/modal/BasicModal.js
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import Modal from '@material-ui/core/Modal';
 
 const style = {
@@ -11,38 +13,30 @@ const style = {
   bgcolor: 'background.paper',
   border: '2px solid #000',
   boxShadow: 24,
-  pt: 2,
-  px: 4,
-  pb: 3,
+  p: 4,
 };
 
 export default function BasicModal() {
   const [open, setOpen] = React.useState(false);
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
-        Open Modal
-      </button>
+      <Button onClick={handleOpen}>Open modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <h2 id="modal-modal-title">Text in a modal</h2>
-          <p id="modal-modal-description">
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
             Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </p>
+          </Typography>
         </Box>
       </Modal>
     </div>

diff --git a/docs/src/pages/components/modal/BasicModal.tsx b/docs/src/pages/components/modal/BasicModal.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import Modal from '@material-ui/core/Modal';
 
 const style = {
@@ -11,38 +13,30 @@ const style = {
   bgcolor: 'background.paper',
   border: '2px solid #000',
   boxShadow: 24,
-  pt: 2,
-  px: 4,
-  pb: 3,
+  p: 4,
 };
 
 export default function BasicModal() {
   const [open, setOpen] = React.useState(false);
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
-        Open Modal
-      </button>
+      <Button onClick={handleOpen}>Open modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <h2 id="modal-modal-title">Text in a modal</h2>
-          <p id="modal-modal-description">
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
             Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </p>
+          </Typography>
         </Box>
       </Modal>
     </div>

diff --git a/docs/src/pages/components/modal/KeepMountedModal.js b/docs/src/pages/components/modal/KeepMountedModal.js
@@ -1,65 +1,44 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Modal from '@material-ui/core/Modal';
-
-function rand() {
-  return Math.round(Math.random() * 20) - 10;
-}
-
-function getModalStyle() {
-  const top = 50 + rand();
-  const left = 50 + rand();
-
-  return {
-    top: `${top}%`,
-    left: `${left}%`,
-    transform: `translate(-${top}%, -${left}%)`,
-  };
-}
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    position: 'absolute',
-    width: 400,
-    backgroundColor: theme.palette.background.paper,
-    border: '2px solid #000',
-    boxShadow: theme.shadows[5],
-    padding: theme.spacing(2, 4, 3),
-  },
-}));
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
 
 export default function KeepMountedModal() {
-  const classes = useStyles();
-  // getModalStyle is not a pure function, we roll the style only on the first render
-  const [modalStyle] = React.useState(getModalStyle);
   const [open, setOpen] = React.useState(false);
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
-        Open Modal
-      </button>
+      <Button onClick={handleOpen}>Open modal</Button>
       <Modal
         keepMounted
         open={open}
         onClose={handleClose}
         aria-labelledby="keep-mounted-modal-title"
         aria-describedby="keep-mounted-modal-description"
       >
-        <div style={modalStyle} className={classes.paper}>
-          <h2 id="keep-mounted-modal-title">Text in a modal</h2>
-          <p id="keep-mounted-modal-description">
+        <Box sx={style}>
+          <Typography id="keep-mounted-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="keep-mounted-modal-description" sx={{ mt: 2 }}>
             Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </p>
-        </div>
+          </Typography>
+        </Box>
       </Modal>
     </div>
   );