Merge branch 'next' into docs-api-i18n

mui · Oct 23, 2020 · 9d290bf · 9d290bf
2 parents a028ff5 + c9a02f9
commit 9d290bf
Show file tree

Hide file tree

Showing 51 changed files with 241 additions and 143 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,6 @@
 /.git
 /.yarn
+/benchmark/**/dist
 /coverage
 /docs/.next
 /docs/export

diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@
 *.log
 /.eslintcache
 /.nyc_output
+/benchmark/**/dist
 /coverage
 /docs/.env.local
 /docs/.next

diff --git a/benchmark/browser/index.html b/benchmark/browser/index.html
@@ -4,10 +4,14 @@
     <title>Perf scenario</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
-    <style>body { background-color: white; }</style>
+    <style>
+      body {
+        background-color: white;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
-    <script src="../../tmp/benchmark.js"></script>
+    <script src="/dist/index.js"></script>
   </body>
 </html>
diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js
@@ -1,16 +1,16 @@
 /* eslint-disable no-console */
 /* eslint-disable no-await-in-loop */
+const path = require('path');
 const puppeteer = require('puppeteer');
 const handler = require('serve-handler');
 const http = require('http');
 
 const PORT = 1122;
-const APP = 'benchmark/browser';
 
 function createServer(options) {
   const { port } = options;
   const server = http.createServer((request, response) => {
-    return handler(request, response);
+    return handler(request, response, { public: path.resolve(__dirname, '../') });
   });
 
   function close() {
@@ -75,7 +75,7 @@ async function runMeasures(browser, testCaseName, testCase, times) {
   const measures = [];
 
   for (let i = 0; i < times; i += 1) {
-    const url = `http://localhost:${PORT}/${APP}?${testCase}`;
+    const url = `http://localhost:${PORT}/?${testCase}`;
     const page = await browser.openPage(url);
 
     const benchmark = await page.evaluate(() => {
@@ -126,4 +126,7 @@ async function run() {
   }
 }
 
-run();
+run().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/benchmark/browser/webpack.config.js b/benchmark/browser/webpack.config.js
@@ -1,29 +1,37 @@
 const path = require('path');
-const webpackBaseConfig = require('../../webpackBaseConfig');
+
+const workspaceRoot = path.resolve(__dirname, '../..');
 
 module.exports = {
-  ...webpackBaseConfig,
-  entry: path.resolve(__dirname, 'index.js'),
+  context: workspaceRoot,
+  entry: 'benchmark/browser/index.js',
   mode: 'production',
   output: {
-    path: path.resolve(__dirname, '../../tmp'),
-    filename: 'benchmark.js',
+    path: path.join(__dirname, 'dist'),
+    filename: 'index.js',
   },
   module: {
-    ...webpackBaseConfig.module,
-    rules: webpackBaseConfig.module.rules.concat([
+    rules: [
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: { cacheDirectory: true, cwd: workspaceRoot },
+      },
       {
         test: /\.(jpg|gif|png)$/,
         loader: 'url-loader',
       },
-    ]),
+    ],
   },
   resolve: {
-    ...webpackBaseConfig.resolve,
     alias: {
-      ...webpackBaseConfig.resolve.alias,
+      '@material-ui/core': path.join(workspaceRoot, './packages/material-ui/src'),
+      '@material-ui/styles': path.join(workspaceRoot, './packages/material-ui-styles/src'),
+      '@material-ui/system': path.join(workspaceRoot, './packages/material-ui-system/src'),
       'react-dom$': 'react-dom/profiling',
       'scheduler/tracing': 'scheduler/tracing-profiling',
     },
+    extensions: ['.js', '.ts', '.tsx'],
   },
 };
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "benchmark",
+  "version": "0.0.1",
+  "private": "true",
+  "scripts": {
+    "browser": "yarn webpack --config browser/webpack.config.js && node browser/scripts/benchmark.js"
+  },
+  "dependencies": {
+    "@chakra-ui/core": "^0.8.0",
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
+    "@material-ui/core": "^5.0.0-alpha.1",
+    "@material-ui/styles": "^5.0.0-alpha.1",
+    "@material-ui/system": "^5.0.0-alpha.1",
+    "emotion-theming": "^10.0.27",
+    "puppeteer": "^5.0.0",
+    "serve-handler": "^6.1.3",
+    "styled-components": "^5.0.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-is": "^16.13.1",
+    "theme-ui": "^0.3.1",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^4.0.0"
+  }
+}
diff --git a/docs/src/pages/components/box/BoxClone.js b/docs/src/pages/components/box/BoxClone.js
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey" clone>
+    <Box sx={{ border: '1px dashed grey' }} clone>
       <Button>Save</Button>
     </Box>
   );

diff --git a/docs/src/pages/components/box/BoxClone.tsx b/docs/src/pages/components/box/BoxClone.tsx
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey" clone>
+    <Box sx={{ border: '1px dashed grey' }} clone>
       <Button>Save</Button>
     </Box>
   );

diff --git a/docs/src/pages/components/box/BoxComponent.js b/docs/src/pages/components/box/BoxComponent.js
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 
 export default function BoxComponent() {
   return (
-    <Box component="span" p={2} border="1px dashed grey">
+    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
       <Button>Save</Button>
     </Box>
   );

diff --git a/docs/src/pages/components/box/BoxComponent.tsx b/docs/src/pages/components/box/BoxComponent.tsx
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 
 export default function BoxComponent() {
   return (
-    <Box component="span" p={2} border="1px dashed grey">
+    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
       <Button>Save</Button>
     </Box>
   );

diff --git a/docs/src/pages/components/box/BoxRenderProps.js b/docs/src/pages/components/box/BoxRenderProps.js
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey">
+    <Box sx={{ border: '1px dashed grey' }}>
       {(props) => <Button {...props}>Save</Button>}
     </Box>
   );

diff --git a/docs/src/pages/components/box/BoxRenderProps.tsx b/docs/src/pages/components/box/BoxRenderProps.tsx
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey">
+    <Box sx={{ border: '1px dashed grey' }}>
       {(props: { className: string }) => <Button {...props}>Save</Button>}
     </Box>
   );

diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md
@@ -16,6 +16,12 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty
 
 [The palette](/system/palette/) style function.
 
+## The sx prop
+
+All system properties are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it:
+
+{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}
+
 ## Overriding Material-UI components
 
 The Box component wraps your component.
@@ -28,8 +34,8 @@ This works great when the changes can be isolated to a new DOM element.
 For instance, you can change the margin this way.
 
 However, sometimes you have to target the underlying DOM element.
-For instance, you want to change the text color of the button.
-The Button component defines its own color. CSS inheritance doesn't help.
+For instance, you want to change the border of the Button.
+The Button component defines its own styles. CSS inheritance doesn't help.
 To workaround the problem, you have two options:
 
 1. Use [`React.cloneElement()`](https://reactjs.org/docs/react-api.html#cloneelement)
@@ -47,12 +53,6 @@ The Box children accepts a render props function. You can pull out the `classNam
 > ⚠️ The CSS specificity relies on the import order.
 > If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last.
 
-## The sx prop
-
-Sometimes, the props on the Box component are not enough to style the component. To solve this, `Box` supports the `sx` prop. This allows you to specify any CSS rules you want, in addition to the ones already available using system props. Here is an example of how you can use it:
-
-{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}
-
 ## API
 
 ```jsx
@@ -64,5 +64,4 @@ import Box from '@material-ui/core/Box';
 | <span class="prop-name required">children&nbsp;\*</span> | <span class="prop-type">union:&nbsp;node&nbsp;&#124;<br>&nbsp;func<br></span>                               |                                         | Box render function or node.                                                                          |
 | <span class="prop-name">clone</span>                     | <span class="prop-type">bool</span>                                                                         | <span class="prop-default">false</span> | If `true`, the box will recycle its children DOM element. It's using `React.cloneElement` internally. |
 | <span class="prop-name">component</span>                 | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br></span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component.            |
-
-Any other props supplied will be used by [the style functions](/system/basics/#all-inclusive) or spread to the root element.
+| <span class="prop-name">sx</span>                        | <span class="prop-type">object</span>                                                                       | <span class="prop-default">{}</span>    | Accepts all system properties, as well as any valid CSS properties.                                   |
diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js
@@ -14,7 +14,7 @@ export default function ContinuousSlider() {
   };
 
   return (
-    <Box width={200}>
+    <Box sx={{ width: 200 }}>
       <Typography id="continuous-slider" gutterBottom>
         Volume
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx
@@ -17,7 +17,7 @@ export default function ContinuousSlider() {
   };
 
   return (
-    <Box width={200}>
+    <Box sx={{ width: 200 }}>
       <Typography id="continuous-slider" gutterBottom>
         Volume
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSlider.js b/docs/src/pages/components/slider-styled/DiscreteSlider.js
@@ -9,7 +9,7 @@ function valuetext(value) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider" gutterBottom>
         Temperature
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSlider.tsx b/docs/src/pages/components/slider-styled/DiscreteSlider.tsx
@@ -9,7 +9,7 @@ function valuetext(value: number) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider" gutterBottom>
         Temperature
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js
@@ -28,7 +28,7 @@ function valuetext(value) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-always" gutterBottom>
         Always visible
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx
@@ -28,7 +28,7 @@ function valuetext(value: number) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-always" gutterBottom>
         Always visible
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js
@@ -28,7 +28,7 @@ function valuetext(value) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-custom" gutterBottom>
         Custom marks
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx
@@ -28,7 +28,7 @@ function valuetext(value: number) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-custom" gutterBottom>
         Custom marks
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js
@@ -9,7 +9,7 @@ function valuetext(value) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-small-steps" gutterBottom>
         Small steps
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx
@@ -9,7 +9,7 @@ function valuetext(value: number) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-small-steps" gutterBottom>
         Small steps
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderValues.js b/docs/src/pages/components/slider-styled/DiscreteSliderValues.js
@@ -32,7 +32,7 @@ function valueLabelFormat(value) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-restrict" gutterBottom>
         Restricted values
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx
@@ -32,7 +32,7 @@ function valueLabelFormat(value: number) {
 
 export default function DiscreteSlider() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Typography id="discrete-slider-restrict" gutterBottom>
         Restricted values
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/InputSlider.js b/docs/src/pages/components/slider-styled/InputSlider.js
@@ -31,7 +31,7 @@ export default function InputSlider() {
   };
 
   return (
-    <Box width={250}>
+    <Box sx={{ width: 250 }}>
       <Typography id="input-slider" gutterBottom>
         Volume
       </Typography>

diff --git a/docs/src/pages/components/slider-styled/InputSlider.tsx b/docs/src/pages/components/slider-styled/InputSlider.tsx
@@ -36,7 +36,7 @@ export default function InputSlider() {
   };
 
   return (
-    <Box width={250}>
+    <Box sx={{ width: 250 }}>
       <Typography id="input-slider" gutterBottom>
         Volume
       </Typography>