Merge remote-tracking branch 'upstream/next' into feat/sx-prop-docs-page

Author: eps1lon

.circleci/config.yml

@@ -6,9 +6,14 @@ defaults: &defaults
       description: The dist-tag of react to be used
       type: string
       default: stable
+    test-gate:
+      description: A particular type of tests that should be run
+      type: string
+      default: undefined
   environment:
     # expose it globally otherwise we have to thread it from each job to the install command
     REACT_DIST_TAG: << parameters.react-dist-tag >>
+    TEST_GATE: << parameters.test-gate >>
   working_directory: /tmp/material-ui
   docker:
     - image: circleci/node:10
@@ -285,3 +290,16 @@ workflows:
                 - next
     jobs:
       - test_types_next
+  timezone-tests:
+    triggers:
+      - schedule:
+          cron: '23 * * * *'
+          filters:
+            branches:
+              only:
+                - next
+    jobs:
+      - test_unit:
+          test-gate: experimental-timezones
+      - test_browser:
+          test-gate: experimental-timezones

docs/src/pages/components/autocomplete/ComboBox.js

@@ -6,11 +6,12 @@ import Autocomplete from '@material-ui/core/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      disablePortal
       id="combo-box-demo"
       options={top100Films}
       style={{ width: 300 }}
       renderInput={(params) => (
-        <TextField {...params} label="Combo box" variant="outlined" />
+        <TextField {...params} label="Movie" variant="outlined" />
       )}
     />
   );

docs/src/pages/components/autocomplete/ComboBox.tsx

@@ -6,11 +6,12 @@ import Autocomplete from '@material-ui/core/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      disablePortal
       id="combo-box-demo"
       options={top100Films}
       style={{ width: 300 }}
       renderInput={(params) => (
-        <TextField {...params} label="Combo box" variant="outlined" />
+        <TextField {...params} label="Movie" variant="outlined" />
       )}
     />
   );

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -29,7 +29,7 @@ You need to update your `package.json` to use the latest version of Material-UI.
 
 ```json
 "dependencies": {
-  "@material-ui/core": "^5.0.0-alpha.1"
+  "@material-ui/core": "^5.0.0"
 }
 ```
 
@@ -66,7 +66,7 @@ If you need to support IE 11, check out our [legacy bundle](/guides/minimizing-b
 
 ### non-ref-forwarding class components
 
-Support for non-ref-forwarding class components in the `component` prop or as an immediate `children` has been dropped. If you were using `unstable_createStrictModeTheme` or didn't see any warnings related to `findDOMNode` in `React.StrictMode` then you don't need to do anything.
+Support for non-ref-forwarding class components in the `component` prop or as immediate `children` has been dropped. If you were using `unstable_createStrictModeTheme` or didn't see any warnings related to `findDOMNode` in `React.StrictMode` then you don't need to do anything.
 Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate.
 This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. `<MenuList><CustomMenuItem /></MenuList>`)
 
@@ -331,6 +331,17 @@ const classes = makeStyles(theme => ({
   +<BottomNavigation onChange={(event: React.SyntheticEvent) => {}} />
   ```
 
+  ### Box
+
+- The system props have been deprecated in v5, and replaced with the `sx` prop.
+
+```diff
+-<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
++<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
+```
+
+[This codemod](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod#box-sx-prop) will automatically update your code to the new syntax.
+
 ### Button
 
 - The button `color` prop is now "primary" by default, and "default" has been removed. This makes the button closer to the Material Design specification and simplifies the API.

docs/src/pages/system/properties/properties.md

@@ -77,12 +77,13 @@
 import { typography } from '@material-ui/system';
 ```
 
-| Import name     | Prop            | CSS property     | Theme key                                                              |
-| :-------------- | :-------------- | :--------------- | :--------------------------------------------------------------------- |
-| `fontFamily`    | `fontFamily`    | `font-family`    | [`typography`](/customization/default-theme/?expand-path=$.typography) |
-| `fontSize`      | `fontSize`      | `font-size`      | [`typography`](/customization/default-theme/?expand-path=$.typography) |
-| `fontStyle`     | `fontStyle`     | `font-style`     | [`typography`](/customization/default-theme/?expand-path=$.typography) |
-| `fontWeight`    | `fontWeight`    | `font-weight`    | [`typography`](/customization/default-theme/?expand-path=$.typography) |
-| `letterSpacing` | `letterSpacing` | `letter-spacing` | none                                                                   |
-| `lineHeight`    | `lineHeight`    | `line-height`    | none                                                                   |
-| `textAlign`     | `textAlign`     | `text-align`     | none                                                                   |
+| Import name     | Prop            | CSS property                                                                                 | Theme key                                                              |
+| :-------------- | :-------------- | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
+| `typography`    | `typography`    | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/customization/default-theme/?expand-path=$.typography) |
+| `fontFamily`    | `fontFamily`    | `font-family`                                                                                | [`typography`](/customization/default-theme/?expand-path=$.typography) |
+| `fontSize`      | `fontSize`      | `font-size`                                                                                  | [`typography`](/customization/default-theme/?expand-path=$.typography) |
+| `fontStyle`     | `fontStyle`     | `font-style`                                                                                 | [`typography`](/customization/default-theme/?expand-path=$.typography) |
+| `fontWeight`    | `fontWeight`    | `font-weight`                                                                                | [`typography`](/customization/default-theme/?expand-path=$.typography) |
+| `letterSpacing` | `letterSpacing` | `letter-spacing`                                                                             | none                                                                   |
+| `lineHeight`    | `lineHeight`    | `line-height`                                                                                | none                                                                   |
+| `textAlign`     | `textAlign`     | `text-align`                                                                                 | none                                                                   |

docs/src/pages/system/typography/typography.md

@@ -18,6 +18,23 @@ APIs.
 
 ## Included Scripts
 
+### v5.0.0
+
+#### `box-sx-prop`
+
+Updates the Box API from separate system props to `sx`.
+
+The diff should look like this:
+
+```diff
+-<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
++<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
+```
+
+```sh
+find src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v5.0.0/box-sx-prop.js
+```
+
 ### v4.0.0
 
 #### `theme-spacing-api`

packages/material-ui-codemod/README.md

@@ -0,0 +1,115 @@
+const boxProps = [
+  'border',
+  'borderTop',
+  'borderRight',
+  'borderBottom',
+  'borderLeft',
+  'borderColor',
+  'borderRadius',
+  'displayPrint',
+  'display',
+  'overflow',
+  'textOverflow',
+  'visibility',
+  'whiteSpace',
+  'flexDirection',
+  'flexWrap',
+  'justifyContent',
+  'alignItems',
+  'alignContent',
+  'order',
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  'alignSelf',
+  'color',
+  'bgcolor',
+  'position',
+  'zIndex',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'boxShadow',
+  'width',
+  'maxWidth',
+  'minWidth',
+  'height',
+  'maxHeight',
+  'minHeight',
+  'boxSizing',
+  'm',
+  'mt',
+  'mr',
+  'mb',
+  'ml',
+  'mx',
+  'my',
+  'p',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'px',
+  'py',
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'marginX',
+  'marginY',
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingX',
+  'paddingY',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+];
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+
+  function buildSxValue(node, value) {
+    value.push(
+      j.objectProperty(
+        j.identifier(node.name.name),
+        node.value.expression ? node.value.expression : node.value,
+        false,
+        false,
+      ),
+    );
+    return value;
+  }
+
+  return j(file.source)
+    .findJSXElements('Box')
+    .forEach((path) => {
+      let sxValue = [];
+      const attributes = path.node.openingElement.attributes;
+      attributes.forEach((node, index) => {
+        // Only transform whitelisted props
+        if (boxProps.includes(node.name.name)) {
+          sxValue = buildSxValue(node, sxValue);
+          delete attributes[index];
+        }
+      });
+      if (sxValue.length > 0) {
+        attributes.push(
+          j.jsxAttribute(
+            j.jsxIdentifier('sx'),
+            j.jsxExpressionContainer(j.objectExpression(sxValue)),
+          ),
+        );
+      }
+    })
+    .toSource();
+}

packages/material-ui-codemod/src/v5.0.0/box-sx-prop.js

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './box-sx-prop';
+
+function read(fileName) {
+  return fs.readFileSync(path.join(__dirname, fileName), 'utf8').toString();
+}
+
+describe('@material-ui/codemod', () => {
+  describe('v5.0.0', () => {
+    describe('box-sx-prop', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          {
+            source: read('./box-sx-prop.test/actual.js'),
+            path: require.resolve('./box-sx-prop.test/actual.js'),
+          },
+          { jscodeshift: jscodeshift },
+          {},
+        );
+
+        const expected = read('./box-sx-prop.test/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          {
+            source: read('./box-sx-prop.test/expected.js'),
+            path: require.resolve('./box-sx-prop.test/expected.js'),
+          },
+          { jscodeshift: jscodeshift },
+          {},
+        );
+
+        const expected = read('./box-sx-prop.test/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+
+export default function BoxComponent() {
+  return (
+    <Box border="1px dashed grey" p={[2, 3, 4]}>
+      <Box component="span" clone p={{ xs: 2, sm: 3, md: 4 }} m={2} border="1px dashed grey">
+        <Button component="span">Save</Button>
+      </Box>
+    </Box>
+  );
+}