Merge branch 'master' into feat/rtg-strict

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
     es6: true,
     browser: true,
     node: true,
-    mocha: true,
   },
   extends: ['plugin:import/recommended', 'airbnb', 'prettier', 'prettier/react'],
   parser: 'babel-eslint',
@@ -49,18 +48,6 @@ module.exports = {
     'material-ui/docgen-ignore-before-comment': 'error',
     'material-ui/restricted-path-imports': 'error',
 
-    'mocha/handle-done-callback': 'error',
-    'mocha/no-exclusive-tests': 'error',
-    'mocha/no-global-tests': 'error',
-    'mocha/no-identical-title': 'error',
-    'mocha/no-nested-tests': 'error',
-    'mocha/no-pending-tests': 'error',
-    'mocha/no-return-and-callback': 'error',
-    'mocha/no-sibling-hooks': 'error',
-    'mocha/no-skipped-tests': 'error',
-    'mocha/no-top-level-hooks': 'error',
-    'mocha/valid-suite-description': 'error',
-
     // This rule is great for raising people awareness of what a key is and how it works.
     'react/no-array-index-key': 'off',
     'react/destructuring-assignment': 'off',
@@ -97,4 +84,32 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
   },
+  "overrides": [
+    {
+      "files": [
+        "**/test-utils/**/*.js",
+        // matching the pattern of the test runner
+        "*.test.js",
+      ],
+      env: {
+        mocha: true,
+      },
+      "rules": {
+        // does not work with wildcard imports. Mistakes will throw at runtime anyway
+        'import/named': false,
+
+        'mocha/handle-done-callback': 'error',
+        'mocha/no-exclusive-tests': 'error',
+        'mocha/no-global-tests': 'error',
+        'mocha/no-identical-title': 'error',
+        'mocha/no-nested-tests': 'error',
+        'mocha/no-pending-tests': 'error',
+        'mocha/no-return-and-callback': 'error',
+        'mocha/no-sibling-hooks': 'error',
+        'mocha/no-skipped-tests': 'error',
+        'mocha/no-top-level-hooks': 'error',
+        'mocha/valid-suite-description': 'error',
+      }
+    }
+  ]
 };

.github/ISSUE_TEMPLATE/1.bug.md

@@ -59,7 +59,7 @@ Link:
 
 | Tech         | Version |
 |--------------|---------|
-| Material-UI  | v3.?.?  |
+| Material-UI  | v4.?.?  |
 | React        |         |
 | Browser      |         |
 | TypeScript   |         |

dangerfile.js

@@ -66,14 +66,14 @@ function isPackageComparison(comparisonEntry) {
  * Generates a user-readable string from a percentage change
  * @param {number} change
  * @param {string} goodEmoji emoji on reduction
- * @param {string} badEmooji emoji on increase
+ * @param {string} badEmoji emoji on increase
  */
-function addPercent(change, goodEmoji = '', badEmooji = ':small_red_triangle:') {
+function addPercent(change, goodEmoji = '', badEmoji = ':small_red_triangle:') {
   const formatted = (change * 100).toFixed(2);
   if (/^-|^0(?:\.0+)$/.test(formatted)) {
     return `${formatted}% ${goodEmoji}`;
   }
-  return `+${formatted}% ${badEmooji}`;
+  return `+${formatted}% ${badEmoji}`;
 }
 
 /**

docs/scripts/buildApi.js

@@ -64,7 +64,7 @@ function getInheritance(testInfo, src) {
 
   switch (inheritedComponentName) {
     case 'Transition':
-      pathname = 'https://reactcommunity.org/react-transition-group/#Transition';
+      pathname = 'https://reactcommunity.org/react-transition-group/transition#Transition-props';
       break;
 
     default:

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

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SimpleModal() {
+export default function SimpleModal() {
   const [open, setOpen] = React.useState(false);
   // getModalStyle is not a pure function, we roll the style only on the first render
   const [modalStyle] = React.useState(getModalStyle);
@@ -67,5 +67,3 @@ function SimpleModal() {
     </div>
   );
 }
-
-export default SimpleModal;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Modal from '@material-ui/core/Modal';
+import Button from '@material-ui/core/Button';
+
+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: Theme) =>
+  createStyles({
+    paper: {
+      position: 'absolute',
+      width: 400,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[5],
+      padding: theme.spacing(4),
+      outline: 'none',
+    },
+  }),
+);
+
+export default function SimpleModal() {
+  const [open, setOpen] = React.useState(false);
+  // getModalStyle is not a pure function, we roll the style only on the first render
+  const [modalStyle] = React.useState(getModalStyle);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Typography gutterBottom>Click to get the full Modal experience!</Typography>
+      <Button onClick={handleOpen}>Open Modal</Button>
+      <Modal
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+        open={open}
+        onClose={handleClose}
+      >
+        <div style={modalStyle} className={classes.paper}>
+          <Typography variant="h6" id="modal-title">
+            Text in a modal
+          </Typography>
+          <Typography variant="subtitle1" id="simple-modal-description">
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+          <SimpleModal />
+        </div>
+      </Modal>
+    </div>
+  );
+}

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

@@ -16,7 +16,7 @@ The `Modal` offers important features:
 - ♿️ It properly manages focus; moving to the modal content,
   and keeping it there until the modal is closed.
 - ♿️ Adds the appropriate ARIA roles automatically.
-- 📦 [6.5 kB gzipped](/size-snapshot).
+- 📦 [5 kB gzipped](/size-snapshot).
 
 > **Terminology note**. The term "modal" is sometimes used to mean "dialog", but this is a misnomer.
 A Modal window describes parts of a UI.

docs/src/pages/components/portal/portal.md

@@ -7,6 +7,8 @@ components: Portal
 
 <p class="description">The portal component renders its children into a new "subtree" outside of current component hierarchy.</p>
 
+- 📦 [1.5 kB gzipped](/size-snapshot)
+
 The children of the portal component will be appended to the `container` specified.
 
 The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components.

docs/src/pages/components/transitions/SimpleGrow.js

@@ -26,18 +26,6 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function Polygon() {
-  const classes = useStyles();
-
-  return (
-    <Paper elevation={4} className={classes.paper}>
-      <svg className={classes.svg}>
-        <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-      </svg>
-    </Paper>
-  );
-}
-
 export default function SimpleGrow() {
   const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
@@ -54,15 +42,23 @@ export default function SimpleGrow() {
       />
       <div className={classes.container}>
         <Grow in={checked}>
-          <Polygon />
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
         </Grow>
         {/* Conditionally applies the timeout property to change the entry speed. */}
         <Grow
           in={checked}
           style={{ transformOrigin: '0 0 0' }}
           {...(checked ? { timeout: 1000 } : {})}
         >
-          <Polygon />
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
         </Grow>
       </div>
     </div>

docs/src/pages/components/transitions/SimpleGrow.tsx

@@ -28,18 +28,6 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-function Polygon() {
-  const classes = useStyles();
-
-  return (
-    <Paper elevation={4} className={classes.paper}>
-      <svg className={classes.svg}>
-        <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-      </svg>
-    </Paper>
-  );
-}
-
 export default function SimpleGrow() {
   const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
@@ -56,15 +44,23 @@ export default function SimpleGrow() {
       />
       <div className={classes.container}>
         <Grow in={checked}>
-          <Polygon />
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
         </Grow>
         {/* Conditionally applies the timeout property to change the entry speed. */}
         <Grow
           in={checked}
           style={{ transformOrigin: '0 0 0' }}
           {...(checked ? { timeout: 1000 } : {})}
         >
-          <Polygon />
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
         </Grow>
       </div>
     </div>

docs/src/pages/getting-started/example-projects/example-projects.md

@@ -24,16 +24,17 @@ build instructions.
 
 Looking for a more advanced example project?
 
-If you want to start with a more complete and real world example, you could take a look at:
-
-- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
-  - Graph using recharts
-  - React Router included with a navigation example
-  - A docker container with an Nginx server for production build
-  - Created with [Create React App](https://facebook.github.io/create-react-app/)
+If you want to start with a more complete and real world example, you could take a look at our [free themes](https://themes.material-ui.com/) or:
 
 - [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
   - Bootstrapped with Create React App, the same tooling works out of the box
   - Built on top of Firebase with authentication working from the start
   - Robust routing with React Router including error handling (404)
   - Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
+
+- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
+  - Graph using recharts
+  - React Router included with a navigation example
+  - A docker container with an Nginx server for production build
+  - Created with [Create React App](https://facebook.github.io/create-react-app/)
+  - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4 

docs/src/pages/styles/advanced/advanced.md

@@ -271,7 +271,7 @@ export default function MyComponent() {
   const classesBase = useStyleBase();
 
   // Order doesn't matter
-  const className = clsx(classes.root, useStyleBase.root)
+  const className = clsx(classes.root, classesBase.root)
 
   // color: red 🔴 wins.
   return <div className={className} />;

docs/src/pages/system/spacing/spacing.md

@@ -109,9 +109,14 @@ import { spacing } from '@material-ui/system';
 | `spacing` | `px` | `padding-left`, `padding-right` | [`spacing`](/customization/default-theme/?expend-path=$.spacing) |
 | `spacing` | `py` | `padding-top`, `padding-bottom` | [`spacing`](/customization/default-theme/?expend-path=$.spacing) |
 
-*Some people find the property shorthand confusing, you can use the full version if you prefer:*
+*Some people find the prop shorthand confusing, you can use the full version if you prefer:*
 
 ```diff
 -<Box pt={2} />
 +<Box paddingTop={2} />
 ```
+
+```diff
+-<Box px={2} />
++<Box paddingX={2} />
+```

docs/webpackBaseConfig.js

@@ -12,8 +12,8 @@ module.exports = {
       '@material-ui/icons': path.resolve(__dirname, '../packages/material-ui-icons/src'),
       '@material-ui/lab': path.resolve(__dirname, '../packages/material-ui-lab/src'),
       '@material-ui/styles': path.resolve(__dirname, '../packages/material-ui-styles/src'),
-      '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'),
       '@material-ui/system': path.resolve(__dirname, '../packages/material-ui-system/src'),
+      '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'),
       docs: path.resolve(__dirname, '../docs'),
     },
   },

examples/nextjs-with-typescript/README.md

@@ -26,4 +26,3 @@ yarn dev
 ## The idea behind the example
 
 [Next.js](https://github.com/zeit/next.js) is a framework for server-rendered React apps.
-[Hooks](https://reactjs.org/docs/hooks-state.html) are an upcoming feature of React.

examples/nextjs/README.md

@@ -19,4 +19,3 @@ npm run dev
 ## The idea behind the example
 
 [Next.js](https://github.com/zeit/next.js) is a framework for server-rendered React apps.
-[Hooks](https://reactjs.org/docs/hooks-state.html) are an upcoming feature of React.

package.json

@@ -56,6 +56,7 @@
     "@emotion/core": "^10.0.0",
     "@emotion/styled": "^10.0.0",
     "@material-ui/pickers": "^3.1.1",
+    "@testing-library/react": "^8.0.1",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/chai": "^4.1.7",
@@ -94,6 +95,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
     "babel-plugin-unwrap-createStyles": "link:packages/babel-plugin-unwrap-createStyles",
     "chai": "^4.1.2",
+    "chai-dom": "^1.8.1",
     "classnames": "^2.2.6",
     "clean-css": "^4.1.11",
     "clipboard-copy": "^3.0.0",