[Modal] Migrate to emotion + unstyled

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 }" },

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 }" },

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 }" },

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",

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,
+  };
+};

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
+}

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",

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": {

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'"

docs/src/pages/components/modal/ServerModal.js

@@ -1,57 +1,57 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Modal from '@material-ui/core/Modal';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 300,
-    flexGrow: 1,
-    minWidth: 300,
-    transform: 'translateZ(0)',
-    // The position fixed scoping doesn't work in IE11.
-    // Disable this demo to preserve the others.
-    '@media all and (-ms-high-contrast: none)': {
-      display: 'none',
-    },
-  },
-  modal: {
-    display: 'flex',
-    padding: theme.spacing(1),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  paper: {
-    width: 400,
-    backgroundColor: theme.palette.background.paper,
-    border: '2px solid #000',
-    boxShadow: theme.shadows[5],
-    padding: theme.spacing(2, 4, 3),
-  },
-}));
+import Box from '@material-ui/core/Box';
 
 export default function ServerModal() {
-  const classes = useStyles();
   const rootRef = React.useRef(null);
 
   return (
-    <div className={classes.root} ref={rootRef}>
+    <Box
+      sx={{
+        height: 300,
+        flexGrow: 1,
+        minWidth: 300,
+        transform: 'translateZ(0)',
+        // The position fixed scoping doesn't work in IE11.
+        // Disable this demo to preserve the others.
+        '@media all and (-ms-high-contrast: none)': {
+          display: 'none',
+        },
+      }}
+      ref={rootRef}
+    >
       <Modal
         disablePortal
         disableEnforceFocus
         disableAutoFocus
         open
         aria-labelledby="server-modal-title"
         aria-describedby="server-modal-description"
-        className={classes.modal}
+        sx={{
+          display: 'flex',
+          p: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
         container={() => rootRef.current}
       >
-        <div className={classes.paper}>
+        <Box
+          sx={{
+            width: 400,
+            bgcolor: 'background.paper',
+            border: '2px solid #000',
+            boxShadow: (theme) => theme.shadows[5],
+            pt: 2,
+            px: 4,
+            pb: 3,
+          }}
+        >
           <h2 id="server-modal-title">Server-side modal</h2>
           <p id="server-modal-description">
             If you disable JavaScript, you will still see me.
           </p>
-        </div>
+        </Box>
       </Modal>
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/modal/ServerModal.tsx

@@ -1,59 +1,57 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Modal from '@material-ui/core/Modal';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 300,
-      flexGrow: 1,
-      minWidth: 300,
-      transform: 'translateZ(0)',
-      // The position fixed scoping doesn't work in IE11.
-      // Disable this demo to preserve the others.
-      '@media all and (-ms-high-contrast: none)': {
-        display: 'none',
-      },
-    },
-    modal: {
-      display: 'flex',
-      padding: theme.spacing(1),
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    paper: {
-      width: 400,
-      backgroundColor: theme.palette.background.paper,
-      border: '2px solid #000',
-      boxShadow: theme.shadows[5],
-      padding: theme.spacing(2, 4, 3),
-    },
-  }),
-);
+import Box from '@material-ui/core/Box';
 
 export default function ServerModal() {
-  const classes = useStyles();
   const rootRef = React.useRef<HTMLDivElement>(null);
 
   return (
-    <div className={classes.root} ref={rootRef}>
+    <Box
+      sx={{
+        height: 300,
+        flexGrow: 1,
+        minWidth: 300,
+        transform: 'translateZ(0)',
+        // The position fixed scoping doesn't work in IE11.
+        // Disable this demo to preserve the others.
+        '@media all and (-ms-high-contrast: none)': {
+          display: 'none',
+        },
+      }}
+      ref={rootRef}
+    >
       <Modal
         disablePortal
         disableEnforceFocus
         disableAutoFocus
         open
         aria-labelledby="server-modal-title"
         aria-describedby="server-modal-description"
-        className={classes.modal}
+        sx={{
+          display: 'flex',
+          p: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
         container={() => rootRef.current}
       >
-        <div className={classes.paper}>
+        <Box
+          sx={{
+            width: 400,
+            bgcolor: 'background.paper',
+            border: '2px solid #000',
+            boxShadow: (theme) => theme.shadows[5],
+            pt: 2,
+            px: 4,
+            pb: 3,
+          }}
+        >
           <h2 id="server-modal-title">Server-side modal</h2>
           <p id="server-modal-description">
             If you disable JavaScript, you will still see me.
           </p>
-        </div>
+        </Box>
       </Modal>
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/modal/modal.md

@@ -1,6 +1,6 @@
 ---
 title: React Modal component
-components: Modal
+components: Modal, ModalUnstyled
 githubLabel: 'component: Modal'
 waiAria: https://www.w3.org/TR/wai-aria-practices/#dialog_modal
 ---
@@ -52,7 +52,7 @@ The open/close state of the modal can be animated with a transition component.
 This component should respect the following conditions:
 
 - Be a direct child descendent of the modal.
-- Have an `in` prop. This corresponds to the open / close state.
+- Have an `in` prop. This corresponds to the open/close state.
 - Call the `onEnter` callback prop when the enter transition starts.
 - Call the `onExited` callback prop when the exit transition is completed.
   These two callbacks allow the modal to unmount the child content when closed and fully transitioned.
@@ -77,8 +77,8 @@ it might be a good idea to change this default behavior by enabling the `keepMou
 
 {{"demo": "pages/components/modal/KeepMountedModal.js", "defaultCodeOpen": false}}
 
-As with any performance optimization this is not a silver bullet. Be sure to identify
-bottlenecks first and then try out these optimization strategies.
+As with any performance optimization, this is not a silver bullet.
+Be sure to identify bottlenecks first, and then try out these optimization strategies.
 
 ## Server-side modal
 
@@ -93,7 +93,7 @@ In order to display the modal, you need to disable the portal feature with the `
 
 The modal moves the focus back to the body of the component if the focus tries to escape it.
 
-This is done for accessibility purposes, however, it might create issues.
+This is done for accessibility purposes. However, it might create issues.
 In the event the users need to interact with another part of the page, e.g. with a chatbot window, you can disable the behavior:
 
 ```jsx

docs/src/pagesApi.js

@@ -79,6 +79,7 @@ module.exports = [
   { pathname: '/api-docs/mobile-stepper' },
   { pathname: '/api-docs/mobile-time-picker' },
   { pathname: '/api-docs/modal' },
+  { pathname: '/api-docs/modal-unstyled' },
   { pathname: '/api-docs/native-select' },
   { pathname: '/api-docs/no-ssr' },
   { pathname: '/api-docs/outlined-input' },