From c98331a5cf3b4457fade209092b076f4256f6c48 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 27 Oct 2020 23:23:29 +0100
Subject: [PATCH 01/13] [Box] Fix display name

---
 packages/material-ui/src/Box/Box.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js
index 6bbdc356513e2b..845c88aecc415b 100644
--- a/packages/material-ui/src/Box/Box.js
+++ b/packages/material-ui/src/Box/Box.js
@@ -21,7 +21,7 @@ let warnedOnce = false;
 /**
  * @ignore - do not document.
  */
-const BoxRoot = React.forwardRef(function StyledComponent(props, ref) {
+const Box = React.forwardRef(function Box(props, ref) {
   const { children, clone, className, component: Component = 'div', ...other } = props;
 
   const spread = omit(other, styleFunction.filterProps);
@@ -55,16 +55,11 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) {
   );
 });
 
-BoxRoot.propTypes = {
+Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   className: PropTypes.string,
   clone: PropTypes.bool,
   component: PropTypes.elementType,
 };
 
-/**
- * @ignore - do not document.
- */
-const Box = styled(BoxRoot, {}, { muiName: 'MuiBox' })(styleFunction);
-
-export default Box;
+export default styled(Box, {}, { muiName: 'MuiBox' })(styleFunction);

From 7ec0752f8e02d54f1cb135bdb594b62293dd9c62 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 28 Oct 2020 00:06:10 +0100
Subject: [PATCH 02/13] [Box] Move deprecation warnings to propTypes

---
 packages/material-ui/src/Box/Box.js           | 30 ++++---
 packages/material-ui/src/Box/Box.test.js      | 85 +++++++++++++------
 .../useScrollTrigger/useScrollTrigger.test.js |  2 +-
 3 files changed, 76 insertions(+), 41 deletions(-)

diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js
index 845c88aecc415b..3bbe71b8f8d040 100644
--- a/packages/material-ui/src/Box/Box.js
+++ b/packages/material-ui/src/Box/Box.js
@@ -16,8 +16,6 @@ function omit(input, fields) {
   return output;
 }
 
-let warnedOnce = false;
-
 /**
  * @ignore - do not document.
  */
@@ -26,17 +24,6 @@ const Box = React.forwardRef(function Box(props, ref) {
 
   const spread = omit(other, styleFunction.filterProps);
 
-  if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce && Object.keys(spread).length !== Object.keys(other).length) {
-      warnedOnce = true;
-      console.warn(
-        'Material-UI: You are using deprecated props on the Box component.\n' +
-          'You should move the properties inside the `sx` prop. For example:\n' +
-          '<Box m={2} /> should become <Box sx={{ m: 2 }} />',
-      );
-    }
-  }
-
   if (clone) {
     return React.cloneElement(children, {
       className: clsx(children.props.className, className),
@@ -55,11 +42,28 @@ const Box = React.forwardRef(function Box(props, ref) {
   );
 });
 
+const specialProperty = 'exact-prop: \u200b';
+
 Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   className: PropTypes.string,
   clone: PropTypes.bool,
   component: PropTypes.elementType,
+  [specialProperty]: (props) => {
+    const unsupportedProps = Object.keys(props).filter(
+      (prop) => ['children', 'className', 'clone', 'component'].indexOf(prop) === -1,
+    );
+
+    if (unsupportedProps.length > 0) {
+      return new Error(
+        `The following props are deprecated: ${unsupportedProps
+          .map((prop) => `\`${prop}\``)
+          .join(', ')}. You should move the properties inside the \`sx\` prop. For example:\n` +
+          '<Box m={2} /> should become <Box sx={{ m: 2 }} />',
+      );
+    }
+    return null;
+  },
 };
 
 export default styled(Box, {}, { muiName: 'MuiBox' })(styleFunction);
diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js
index 6ec78e65268012..8443ba78126553 100644
--- a/packages/material-ui/src/Box/Box.test.js
+++ b/packages/material-ui/src/Box/Box.test.js
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import PropTypes from 'prop-types';
+import { createSandbox } from 'sinon';
 import { createClientRender, createMount, describeConformance } from 'test/utils';
 import Box from './Box';
 
@@ -19,21 +21,9 @@ describe('<Box />', () => {
     </div>
   );
 
-  it('warns if system props are used directly on the Box component', () => {
-    expect(() => {
-      render(
-        <Box
-          color="primary.main"
-          fontFamily="Comic Sans"
-          fontSize={{ xs: 'h6.fontSize', sm: 'h4.fontSize', md: 'h3.fontSize' }}
-        />,
-      );
-    }).toWarnDev('Material-UI: You are using deprecated props on the Box component.\n');
-  });
-
   it('renders children and box content', () => {
     const { container, getByTestId } = render(
-      <Box component="span" m={1}>
+      <Box component="span" sx={{ m: 1 }}>
         {testChildren}
       </Box>,
     );
@@ -41,21 +31,62 @@ describe('<Box />', () => {
     expect(container.querySelectorAll('span').length).to.equal(1);
   });
 
-  it('does not forward style props as DOM attributes', () => {
-    const elementRef = React.createRef();
-    render(
-      <Box
-        color="primary.main"
-        fontFamily="Comic Sans"
-        fontSize={{ xs: 'h6.fontSize', sm: 'h4.fontSize', md: 'h3.fontSize' }}
-        ref={elementRef}
-      />,
-    );
+  describe('warnings', () => {
+    afterEach(() => {
+      PropTypes.resetWarningCache();
+    });
+
+    it('warns if system props are used directly on the Box component', () => {
+      expect(() => {
+        PropTypes.checkPropTypes(
+          // If this breaks too often remove the test.
+          // Testing propTypes isn't worth the effort of using expando properties for internal propTypes-only stuff.
+          // eslint-disable-next-line no-underscore-dangle
+          Box.__emotion_base.propTypes,
+          {
+            color: 'primary.main',
+            fontFamily: 'Comic Sans',
+            fontSize: { xs: 'h6.fontSize', sm: 'h4.fontSize', md: 'h3.fontSize' },
+          },
+          'props',
+          'MockedName',
+        );
+      }).toErrorDev(
+        'Warning: Failed props type: The following props are deprecated: `color`, `fontFamily`, `fontSize`.',
+      );
+    });
+  });
 
-    const { current: element } = elementRef;
-    expect(element.getAttribute('color')).to.equal(null);
-    expect(element.getAttribute('font-family')).to.equal(null);
-    expect(element.getAttribute('font-size')).to.equal(null);
+  describe('deprecated props', () => {
+    const consoleSandbox = createSandbox();
+
+    beforeEach(() => {
+      // Otherwise our global setup throws on prop-types warnings.
+      // The tested props are deprecated so we're not worried about new, unexpected console errors.
+      consoleSandbox.stub(console, 'warn');
+      consoleSandbox.stub(console, 'error');
+    });
+
+    afterEach(() => {
+      consoleSandbox.restore();
+    });
+
+    it('does not forward style props as DOM attributes', () => {
+      const elementRef = React.createRef();
+      render(
+        <Box
+          color="primary.main"
+          fontFamily="Comic Sans"
+          fontSize={{ xs: 'h6.fontSize', sm: 'h4.fontSize', md: 'h3.fontSize' }}
+          ref={elementRef}
+        />,
+      );
+
+      const { current: element } = elementRef;
+      expect(element.getAttribute('color')).to.equal(null);
+      expect(element.getAttribute('font-family')).to.equal(null);
+      expect(element.getAttribute('font-size')).to.equal(null);
+    });
   });
 
   it('respect properties order when generating the CSS', function test() {
diff --git a/packages/material-ui/src/useScrollTrigger/useScrollTrigger.test.js b/packages/material-ui/src/useScrollTrigger/useScrollTrigger.test.js
index 6153876e9f4a29..321ff903c58c32 100644
--- a/packages/material-ui/src/useScrollTrigger/useScrollTrigger.test.js
+++ b/packages/material-ui/src/useScrollTrigger/useScrollTrigger.test.js
@@ -34,7 +34,7 @@ describe('useScrollTrigger', () => {
         <span ref={triggerRef}>{`${trigger}`}</span>
         <div ref={containerRef}>
           <Container ref={customContainer ? setContainer : null}>
-            <Box my={2}>Custom container</Box>
+            <Box sx={{ my: 2 }}>Custom container</Box>
           </Container>
         </div>
       </React.Fragment>

From de4b6b62450fd6940e477b677bb58141b9eb7139 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 28 Oct 2020 00:48:59 +0100
Subject: [PATCH 03/13] Start moving from deprecated props

---
 docs/src/modules/components/AppDrawer.js      |  2 +-
 docs/src/modules/components/AppFrame.js       |  2 +-
 .../src/pages/components/app-bar/BackToTop.js |  2 +-
 .../pages/components/app-bar/BackToTop.tsx    |  2 +-
 .../pages/components/app-bar/ElevateAppBar.js |  2 +-
 .../components/app-bar/ElevateAppBar.tsx      |  2 +-
 .../pages/components/app-bar/HideAppBar.js    |  2 +-
 .../pages/components/app-bar/HideAppBar.tsx   |  2 +-
 .../FloatingActionButtonZoom.js               |  2 +-
 .../FloatingActionButtonZoom.tsx              |  2 +-
 .../pages/components/no-ssr/SimpleNoSsr.js    | 16 +++++++++--
 .../pages/components/no-ssr/SimpleNoSsr.tsx   | 16 +++++++++--
 .../components/popover/PopoverPopupState.js   |  2 +-
 .../components/popover/PopoverPopupState.tsx  |  2 +-
 .../progress/CircularWithValueLabel.js        | 27 +++++++++++--------
 .../progress/CircularWithValueLabel.tsx       | 27 +++++++++++--------
 .../components/tables/CollapsibleTable.js     |  2 +-
 .../components/tables/CollapsibleTable.tsx    |  2 +-
 .../pages/components/tabs/AccessibleTabs.js   |  6 ++---
 .../pages/components/tabs/AccessibleTabs.tsx  |  7 ++---
 docs/src/pages/components/tabs/BasicTabs.js   |  2 +-
 docs/src/pages/components/tabs/BasicTabs.tsx  |  2 +-
 .../pages/components/tabs/FullWidthTabs.js    |  2 +-
 .../pages/components/tabs/FullWidthTabs.tsx   |  2 +-
 docs/src/pages/components/tabs/NavTabs.js     |  2 +-
 docs/src/pages/components/tabs/NavTabs.tsx    |  2 +-
 .../components/tooltips/AnchorElTooltips.js   |  8 +++---
 .../components/tooltips/AnchorElTooltips.tsx  |  8 +++---
 .../tooltips/FollowCursorTooltips.js          |  2 +-
 .../tooltips/FollowCursorTooltips.tsx         |  2 +-
 .../templates/dashboard/Dashboard.js          |  2 +-
 .../templates/dashboard/Dashboard.tsx         |  2 +-
 .../guides/interoperability/EmotionCSS.js     |  2 +-
 .../guides/interoperability/EmotionCSS.tsx    |  2 +-
 .../interoperability/StyledComponents.js      |  2 +-
 .../interoperability/StyledComponents.tsx     |  2 +-
 .../interoperability/StyledComponentsDeep.js  |  2 +-
 .../interoperability/StyledComponentsDeep.tsx |  2 +-
 .../interoperability/StyledComponentsTheme.js |  2 +-
 .../StyledComponentsTheme.tsx                 |  2 +-
 .../pages/premium-themes/onepirate/Privacy.js |  2 +-
 .../premium-themes/onepirate/Privacy.tsx      |  2 +-
 docs/src/pages/system/basics/basics-es.md     |  6 ++---
 43 files changed, 111 insertions(+), 78 deletions(-)

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index bddc591192ad9b..d8541558c16966 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -169,7 +169,7 @@ function AppDrawer(props) {
         </div>
       </div>
       <Divider />
-      <Box mx={3} my={2}>
+      <Box sx={{ mx: 3, my: 2 }}>
         <DiamondSponsors spot="drawer" />
       </Box>
       {navItems}
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index e15134c3cd1203..5f80bef7f2fd7c 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -257,7 +257,7 @@ function AppFrame(props) {
                   {language.text}
                 </MenuItem>
               ))}
-              <Box my={1}>
+              <Box sx={{ my: 1 }}>
                 <Divider />
               </Box>
               <MenuItem
diff --git a/docs/src/pages/components/app-bar/BackToTop.js b/docs/src/pages/components/app-bar/BackToTop.js
index c23a0775060b2a..c8181350ca97e6 100644
--- a/docs/src/pages/components/app-bar/BackToTop.js
+++ b/docs/src/pages/components/app-bar/BackToTop.js
@@ -74,7 +74,7 @@ export default function BackToTop(props) {
       </AppBar>
       <Toolbar id="back-to-top-anchor" />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
diff --git a/docs/src/pages/components/app-bar/BackToTop.tsx b/docs/src/pages/components/app-bar/BackToTop.tsx
index 354d54291d0e0b..93277499130c8f 100644
--- a/docs/src/pages/components/app-bar/BackToTop.tsx
+++ b/docs/src/pages/components/app-bar/BackToTop.tsx
@@ -75,7 +75,7 @@ export default function BackToTop(props: Props) {
       </AppBar>
       <Toolbar id="back-to-top-anchor" />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
diff --git a/docs/src/pages/components/app-bar/ElevateAppBar.js b/docs/src/pages/components/app-bar/ElevateAppBar.js
index e1e474c2a3f690..da4e2092c38f65 100644
--- a/docs/src/pages/components/app-bar/ElevateAppBar.js
+++ b/docs/src/pages/components/app-bar/ElevateAppBar.js
@@ -46,7 +46,7 @@ export default function ElevateAppBar(props) {
       </ElevationScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
diff --git a/docs/src/pages/components/app-bar/ElevateAppBar.tsx b/docs/src/pages/components/app-bar/ElevateAppBar.tsx
index 14efeb2672bdd1..ddcda1aef10bd6 100644
--- a/docs/src/pages/components/app-bar/ElevateAppBar.tsx
+++ b/docs/src/pages/components/app-bar/ElevateAppBar.tsx
@@ -45,7 +45,7 @@ export default function ElevateAppBar(props: Props) {
       </ElevationScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
diff --git a/docs/src/pages/components/app-bar/HideAppBar.js b/docs/src/pages/components/app-bar/HideAppBar.js
index 21dcebc8dda25a..1d9135836a4826 100644
--- a/docs/src/pages/components/app-bar/HideAppBar.js
+++ b/docs/src/pages/components/app-bar/HideAppBar.js
@@ -47,7 +47,7 @@ export default function HideAppBar(props) {
       </HideOnScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
diff --git a/docs/src/pages/components/app-bar/HideAppBar.tsx b/docs/src/pages/components/app-bar/HideAppBar.tsx
index ba36cc9a91923e..19f3c9e8b7794c 100644
--- a/docs/src/pages/components/app-bar/HideAppBar.tsx
+++ b/docs/src/pages/components/app-bar/HideAppBar.tsx
@@ -46,7 +46,7 @@ export default function HideAppBar(props: Props) {
       </HideOnScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js
index 7b6200c280f432..22ea1f4c583aee 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js
@@ -27,7 +27,7 @@ function TabPanel(props) {
       aria-labelledby={`action-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
     </Typography>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx
index 9623098b8a6274..ab1e2704486c63 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx
@@ -38,7 +38,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`action-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
     </Typography>
   );
 }
diff --git a/docs/src/pages/components/no-ssr/SimpleNoSsr.js b/docs/src/pages/components/no-ssr/SimpleNoSsr.js
index 9fd0cebab10e2b..9d7829d7c6d894 100644
--- a/docs/src/pages/components/no-ssr/SimpleNoSsr.js
+++ b/docs/src/pages/components/no-ssr/SimpleNoSsr.js
@@ -5,11 +5,23 @@ import Box from '@material-ui/core/Box';
 export default function SimpleNoSsr() {
   return (
     <div>
-      <Box p={2} bgcolor="primary.main" color="primary.contrastText">
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: 'primary.main',
+          color: 'primary.contrastText',
+        }}
+      >
         Server and Client
       </Box>
       <NoSsr>
-        <Box p={2} bgcolor="secondary.main" color="primary.contrastText">
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: 'secondary.main',
+            color: 'primary.contrastText',
+          }}
+        >
           Client only
         </Box>
       </NoSsr>
diff --git a/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx b/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
index 9fd0cebab10e2b..9d7829d7c6d894 100644
--- a/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
+++ b/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
@@ -5,11 +5,23 @@ import Box from '@material-ui/core/Box';
 export default function SimpleNoSsr() {
   return (
     <div>
-      <Box p={2} bgcolor="primary.main" color="primary.contrastText">
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: 'primary.main',
+          color: 'primary.contrastText',
+        }}
+      >
         Server and Client
       </Box>
       <NoSsr>
-        <Box p={2} bgcolor="secondary.main" color="primary.contrastText">
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: 'secondary.main',
+            color: 'primary.contrastText',
+          }}
+        >
           Client only
         </Box>
       </NoSsr>
diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js
index 8ea7a931f6fbf6..efeab853bfd738 100644
--- a/docs/src/pages/components/popover/PopoverPopupState.js
+++ b/docs/src/pages/components/popover/PopoverPopupState.js
@@ -24,7 +24,7 @@ export default function PopoverPopupState() {
               horizontal: 'center',
             }}
           >
-            <Box p={2}>
+            <Box sx={{ p: 2 }}>
               <Typography>The content of the Popover.</Typography>
             </Box>
           </Popover>
diff --git a/docs/src/pages/components/popover/PopoverPopupState.tsx b/docs/src/pages/components/popover/PopoverPopupState.tsx
index 8ea7a931f6fbf6..efeab853bfd738 100644
--- a/docs/src/pages/components/popover/PopoverPopupState.tsx
+++ b/docs/src/pages/components/popover/PopoverPopupState.tsx
@@ -24,7 +24,7 @@ export default function PopoverPopupState() {
               horizontal: 'center',
             }}
           >
-            <Box p={2}>
+            <Box sx={{ p: 2 }}>
               <Typography>The content of the Popover.</Typography>
             </Box>
           </Popover>
diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.js b/docs/src/pages/components/progress/CircularWithValueLabel.js
index a4be0b6df6c869..4a44d782878965 100644
--- a/docs/src/pages/components/progress/CircularWithValueLabel.js
+++ b/docs/src/pages/components/progress/CircularWithValueLabel.js
@@ -6,17 +6,24 @@ import Box from '@material-ui/core/Box';
 
 function CircularProgressWithLabel(props) {
   return (
-    <Box position="relative" display="inline-flex">
+    <Box
+      sx={{
+        position: 'relative',
+        display: 'inline-flex',
+      }}
+    >
       <CircularProgress variant="determinate" {...props} />
       <Box
-        top={0}
-        left={0}
-        bottom={0}
-        right={0}
-        position="absolute"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
       >
         <Typography variant="caption" component="div" color="textSecondary">
           {`${Math.round(props.value)}%`}
@@ -37,7 +44,6 @@ CircularProgressWithLabel.propTypes = {
 
 export default function CircularStatic() {
   const [progress, setProgress] = React.useState(10);
-
   React.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((prevProgress) =>
@@ -48,6 +54,5 @@ export default function CircularStatic() {
       clearInterval(timer);
     };
   }, []);
-
   return <CircularProgressWithLabel value={progress} />;
 }
diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.tsx b/docs/src/pages/components/progress/CircularWithValueLabel.tsx
index 41c300a3680996..ec0980a4d1dad8 100644
--- a/docs/src/pages/components/progress/CircularWithValueLabel.tsx
+++ b/docs/src/pages/components/progress/CircularWithValueLabel.tsx
@@ -9,17 +9,24 @@ function CircularProgressWithLabel(
   props: CircularProgressProps & { value: number },
 ) {
   return (
-    <Box position="relative" display="inline-flex">
+    <Box
+      sx={{
+        position: 'relative',
+        display: 'inline-flex',
+      }}
+    >
       <CircularProgress variant="determinate" {...props} />
       <Box
-        top={0}
-        left={0}
-        bottom={0}
-        right={0}
-        position="absolute"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
       >
         <Typography
           variant="caption"
@@ -33,7 +40,6 @@ function CircularProgressWithLabel(
 
 export default function CircularStatic() {
   const [progress, setProgress] = React.useState(10);
-
   React.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((prevProgress) =>
@@ -44,6 +50,5 @@ export default function CircularStatic() {
       clearInterval(timer);
     };
   }, []);
-
   return <CircularProgressWithLabel value={progress} />;
 }
diff --git a/docs/src/pages/components/tables/CollapsibleTable.js b/docs/src/pages/components/tables/CollapsibleTable.js
index 1ca0ee89f049e5..4d5fd728eba4fd 100644
--- a/docs/src/pages/components/tables/CollapsibleTable.js
+++ b/docs/src/pages/components/tables/CollapsibleTable.js
@@ -74,7 +74,7 @@ function Row(props) {
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
+            <Box sx={{ margin: 1 }}>
               <Typography variant="h6" gutterBottom component="div">
                 History
               </Typography>
diff --git a/docs/src/pages/components/tables/CollapsibleTable.tsx b/docs/src/pages/components/tables/CollapsibleTable.tsx
index f959a69f07290d..ef4465ce24ab41 100644
--- a/docs/src/pages/components/tables/CollapsibleTable.tsx
+++ b/docs/src/pages/components/tables/CollapsibleTable.tsx
@@ -80,7 +80,7 @@ function Row(props: { row: ReturnType<typeof createData> }) {
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
+            <Box sx={{ margin: 1 }}>
               <Typography variant="h6" gutterBottom component="div">
                 History
               </Typography>
diff --git a/docs/src/pages/components/tabs/AccessibleTabs.js b/docs/src/pages/components/tabs/AccessibleTabs.js
index df79caeafdcd9a..9071752b5a0f60 100644
--- a/docs/src/pages/components/tabs/AccessibleTabs.js
+++ b/docs/src/pages/components/tabs/AccessibleTabs.js
@@ -9,7 +9,6 @@ import Box from '@material-ui/core/Box';
 
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
-
   return (
     <div
       role="tabpanel"
@@ -19,7 +18,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
@@ -35,7 +34,6 @@ TabPanel.propTypes = {
 
 function DemoTabs(props) {
   const { labelId, onChange, selectionFollowsFocus, value } = props;
-
   return (
     <AppBar position="static">
       <Tabs
@@ -71,8 +69,8 @@ const useStyles = makeStyles({
 
 export default function AccessibleTabs() {
   const classes = useStyles();
-
   const [value, setValue] = React.useState(0);
+
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
diff --git a/docs/src/pages/components/tabs/AccessibleTabs.tsx b/docs/src/pages/components/tabs/AccessibleTabs.tsx
index f46b5522837a95..a6a635c843662b 100644
--- a/docs/src/pages/components/tabs/AccessibleTabs.tsx
+++ b/docs/src/pages/components/tabs/AccessibleTabs.tsx
@@ -14,7 +14,6 @@ interface TabPanelProps {
 
 function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
-
   return (
     <div
       role="tabpanel"
@@ -24,7 +23,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
@@ -41,7 +40,6 @@ interface DemoTabsProps {
 
 function DemoTabs(props: DemoTabsProps) {
   const { labelId, onChange, selectionFollowsFocus, value } = props;
-
   return (
     <AppBar position="static">
       <Tabs
@@ -67,11 +65,10 @@ const useStyles = makeStyles({
     flexGrow: 1,
   },
 });
-
 export default function AccessibleTabs() {
   const classes = useStyles();
-
   const [value, setValue] = React.useState(0);
+
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
diff --git a/docs/src/pages/components/tabs/BasicTabs.js b/docs/src/pages/components/tabs/BasicTabs.js
index 56766ce8eb8008..2e379e25aa293d 100644
--- a/docs/src/pages/components/tabs/BasicTabs.js
+++ b/docs/src/pages/components/tabs/BasicTabs.js
@@ -19,7 +19,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/BasicTabs.tsx b/docs/src/pages/components/tabs/BasicTabs.tsx
index 66523b7dc6bf28..dc21fd62e63293 100644
--- a/docs/src/pages/components/tabs/BasicTabs.tsx
+++ b/docs/src/pages/components/tabs/BasicTabs.tsx
@@ -24,7 +24,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js
index dd59f23837afb0..0e52bf63541396 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.js
+++ b/docs/src/pages/components/tabs/FullWidthTabs.js
@@ -20,7 +20,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{}}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/FullWidthTabs.tsx b/docs/src/pages/components/tabs/FullWidthTabs.tsx
index 4ff62c6b153366..c9a8dfd2c96f2e 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.tsx
+++ b/docs/src/pages/components/tabs/FullWidthTabs.tsx
@@ -26,7 +26,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{}}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/NavTabs.js b/docs/src/pages/components/tabs/NavTabs.js
index 12298fc5bc358f..ad4d1ab0e79246 100644
--- a/docs/src/pages/components/tabs/NavTabs.js
+++ b/docs/src/pages/components/tabs/NavTabs.js
@@ -19,7 +19,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{}}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/NavTabs.tsx b/docs/src/pages/components/tabs/NavTabs.tsx
index 29a43996861dab..2e832b763c8dd2 100644
--- a/docs/src/pages/components/tabs/NavTabs.tsx
+++ b/docs/src/pages/components/tabs/NavTabs.tsx
@@ -24,7 +24,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{}}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tooltips/AnchorElTooltips.js b/docs/src/pages/components/tooltips/AnchorElTooltips.js
index 2dabb92d4fb469..89b82ca44614e2 100644
--- a/docs/src/pages/components/tooltips/AnchorElTooltips.js
+++ b/docs/src/pages/components/tooltips/AnchorElTooltips.js
@@ -40,10 +40,12 @@ export default function AnchorElTooltips() {
     >
       <Box
         ref={areaRef}
-        bgcolor="primary.main"
-        color="primary.contrastText"
         onMouseMove={handleMouseMove}
-        p={2}
+        sx={{
+          bgcolor: 'primary.main',
+          color: 'primary.contrastText',
+          p: 2,
+        }}
       >
         Hover
       </Box>
diff --git a/docs/src/pages/components/tooltips/AnchorElTooltips.tsx b/docs/src/pages/components/tooltips/AnchorElTooltips.tsx
index 5a066b4d146be9..7c5153e5627195 100644
--- a/docs/src/pages/components/tooltips/AnchorElTooltips.tsx
+++ b/docs/src/pages/components/tooltips/AnchorElTooltips.tsx
@@ -40,10 +40,12 @@ export default function AnchorElTooltips() {
     >
       <Box
         ref={areaRef}
-        bgcolor="primary.main"
-        color="primary.contrastText"
         onMouseMove={handleMouseMove}
-        p={2}
+        sx={{
+          bgcolor: 'primary.main',
+          color: 'primary.contrastText',
+          p: 2,
+        }}
       >
         Hover
       </Box>
diff --git a/docs/src/pages/components/tooltips/FollowCursorTooltips.js b/docs/src/pages/components/tooltips/FollowCursorTooltips.js
index 51c73725722326..d15138f7b99f17 100644
--- a/docs/src/pages/components/tooltips/FollowCursorTooltips.js
+++ b/docs/src/pages/components/tooltips/FollowCursorTooltips.js
@@ -5,7 +5,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 export default function FollowCursorTooltips() {
   return (
     <Tooltip title="You don't have permission to do this" followCursor>
-      <Box bgcolor="text.disabled" color="background.paper" p={2}>
+      <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
         Disabled Action
       </Box>
     </Tooltip>
diff --git a/docs/src/pages/components/tooltips/FollowCursorTooltips.tsx b/docs/src/pages/components/tooltips/FollowCursorTooltips.tsx
index 51c73725722326..d15138f7b99f17 100644
--- a/docs/src/pages/components/tooltips/FollowCursorTooltips.tsx
+++ b/docs/src/pages/components/tooltips/FollowCursorTooltips.tsx
@@ -5,7 +5,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 export default function FollowCursorTooltips() {
   return (
     <Tooltip title="You don't have permission to do this" followCursor>
-      <Box bgcolor="text.disabled" color="background.paper" p={2}>
+      <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
         Disabled Action
       </Box>
     </Tooltip>
diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
index 8b6ceb2721e04c..11ee186d4f9dfa 100644
--- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
+++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
@@ -205,7 +205,7 @@ export default function Dashboard() {
               </Paper>
             </Grid>
           </Grid>
-          <Box pt={4}>
+          <Box sx={{ pt: 4 }}>
             <Copyright />
           </Box>
         </Container>
diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
index 8b6ceb2721e04c..11ee186d4f9dfa 100644
--- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
+++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
@@ -205,7 +205,7 @@ export default function Dashboard() {
               </Paper>
             </Grid>
           </Grid>
-          <Box pt={4}>
+          <Box sx={{ pt: 4 }}>
             <Copyright />
           </Box>
         </Container>
diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js
index 4d68337a731a4f..f33ab4614663b1 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.js
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.js
@@ -5,7 +5,7 @@ import Box from '@material-ui/core/Box';
 
 export default function EmotionCSS() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
       <Slider
         defaultValue={30}
diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
index 4d68337a731a4f..f33ab4614663b1 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
@@ -5,7 +5,7 @@ import Box from '@material-ui/core/Box';
 
 export default function EmotionCSS() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
       <Slider
         defaultValue={30}
diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js
index 71f3d0076ace56..ef1d108ee772db 100644
--- a/docs/src/pages/guides/interoperability/StyledComponents.js
+++ b/docs/src/pages/guides/interoperability/StyledComponents.js
@@ -13,7 +13,7 @@ const SliderCustomized = styled(Slider)`
 
 export default function StyledComponents() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
       <SliderCustomized defaultValue={30} />
     </Box>
diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx
index 71f3d0076ace56..ef1d108ee772db 100644
--- a/docs/src/pages/guides/interoperability/StyledComponents.tsx
+++ b/docs/src/pages/guides/interoperability/StyledComponents.tsx
@@ -13,7 +13,7 @@ const SliderCustomized = styled(Slider)`
 
 export default function StyledComponents() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
       <SliderCustomized defaultValue={30} />
     </Box>
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
index d1f0130d956856..37a2821113abc1 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
+++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
@@ -17,7 +17,7 @@ const SliderCustomized = styled(Slider)`
 
 export default function StyledComponentsDeep() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
       <SliderCustomized defaultValue={30} />
     </Box>
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
index d1f0130d956856..37a2821113abc1 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
+++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
@@ -17,7 +17,7 @@ const SliderCustomized = styled(Slider)`
 
 export default function StyledComponentsDeep() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
       <SliderCustomized defaultValue={30} />
     </Box>
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
index 52021db7aebc59..5203eb376f691f 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
+++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
@@ -28,7 +28,7 @@ const CustomizedSlider = styled(Slider)(
 
 export default function StyledComponentsTheme() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <ThemeProvider theme={customTheme}>
         <CustomizedSlider defaultValue={30} />
       </ThemeProvider>
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
index 52021db7aebc59..5203eb376f691f 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
+++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
@@ -28,7 +28,7 @@ const CustomizedSlider = styled(Slider)(
 
 export default function StyledComponentsTheme() {
   return (
-    <Box width={300}>
+    <Box sx={{ width: 300 }}>
       <ThemeProvider theme={customTheme}>
         <CustomizedSlider defaultValue={30} />
       </ThemeProvider>
diff --git a/docs/src/pages/premium-themes/onepirate/Privacy.js b/docs/src/pages/premium-themes/onepirate/Privacy.js
index 6e59818799eba3..ceccafb2612b19 100644
--- a/docs/src/pages/premium-themes/onepirate/Privacy.js
+++ b/docs/src/pages/premium-themes/onepirate/Privacy.js
@@ -13,7 +13,7 @@ function Privacy() {
     <React.Fragment>
       <AppAppBar />
       <Container>
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Typography variant="h3" gutterBottom marked="center" align="center">
             Privacy
           </Typography>
diff --git a/docs/src/pages/premium-themes/onepirate/Privacy.tsx b/docs/src/pages/premium-themes/onepirate/Privacy.tsx
index 6e59818799eba3..ceccafb2612b19 100644
--- a/docs/src/pages/premium-themes/onepirate/Privacy.tsx
+++ b/docs/src/pages/premium-themes/onepirate/Privacy.tsx
@@ -13,7 +13,7 @@ function Privacy() {
     <React.Fragment>
       <AppAppBar />
       <Container>
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Typography variant="h3" gutterBottom marked="center" align="center">
             Privacy
           </Typography>
diff --git a/docs/src/pages/system/basics/basics-es.md b/docs/src/pages/system/basics/basics-es.md
index 74f6b3b1b8203d..f60af7438baf7e 100644
--- a/docs/src/pages/system/basics/basics-es.md
+++ b/docs/src/pages/system/basics/basics-es.md
@@ -82,9 +82,9 @@ export default function App() {
 Now, you can provide a spacing multiplier value:
 
 ```jsx
-<Box p={1}>4px</Box>
-<Box p={2}>8px</Box>
-<Box p={-1}>-4px</Box>
+<Box sx={{ p: 1 }}>4px</Box>
+<Box sx={{ p: 2 }}>8px</Box>
+<Box sx={{ p: -1 }}>-4px</Box>
 ```
 
 and a primary color:

From 806c4b163c53c3c0fac1205a9bb5d39ed84a9b14 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 3 Nov 2020 11:49:49 +0100
Subject: [PATCH 04/13] Fix missing system props

---
 docs/src/pages/components/tabs/NavTabs.js  | 2 +-
 docs/src/pages/components/tabs/NavTabs.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/tabs/NavTabs.js b/docs/src/pages/components/tabs/NavTabs.js
index ad4d1ab0e79246..f3bd31e507ab4a 100644
--- a/docs/src/pages/components/tabs/NavTabs.js
+++ b/docs/src/pages/components/tabs/NavTabs.js
@@ -19,7 +19,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box sx={{}}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/NavTabs.tsx b/docs/src/pages/components/tabs/NavTabs.tsx
index 2e832b763c8dd2..7a97a530c18bec 100644
--- a/docs/src/pages/components/tabs/NavTabs.tsx
+++ b/docs/src/pages/components/tabs/NavTabs.tsx
@@ -24,7 +24,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box sx={{}}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}

From ae4de1b213358f86df6ede84ce750e7acd0ffc93 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 3 Nov 2020 12:03:28 +0100
Subject: [PATCH 05/13] fix proptypes

---
 packages/material-ui/src/Box/Box.js | 41 ++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js
index 3bbe71b8f8d040..c88f6521fa98ac 100644
--- a/packages/material-ui/src/Box/Box.js
+++ b/packages/material-ui/src/Box/Box.js
@@ -42,14 +42,43 @@ const Box = React.forwardRef(function Box(props, ref) {
   );
 });
 
-const specialProperty = 'exact-prop: \u200b';
-
 Box.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  /**
+   * @ignore
+   */
   className: PropTypes.string,
+  /**
+   * @ignore
+   */
   clone: PropTypes.bool,
+  /**
+   * @ignore
+   */
   component: PropTypes.elementType,
-  [specialProperty]: (props) => {
+  /**
+   * @ignore
+   */
+  css: PropTypes.object,
+  /**
+   * @ignore
+   */
+  sx: PropTypes.object,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line react/forbid-foreign-prop-types -- this branch is DCE'd as well in production.
+  Box.propTypes.deprecatedSystemProps = (props) => {
     const unsupportedProps = Object.keys(props).filter(
       (prop) => ['children', 'className', 'clone', 'component'].indexOf(prop) === -1,
     );
@@ -63,7 +92,7 @@ Box.propTypes = {
       );
     }
     return null;
-  },
-};
+  };
+}
 
 export default styled(Box, {}, { muiName: 'MuiBox' })(styleFunction);

From 8e195088a5618c9af8e25cf3de7b6ca5d6eaa635 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 3 Nov 2020 12:03:43 +0100
Subject: [PATCH 06/13] fix box test in watchmode

---
 packages/material-ui/src/Box/Box.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js
index 8443ba78126553..8453951eae9753 100644
--- a/packages/material-ui/src/Box/Box.test.js
+++ b/packages/material-ui/src/Box/Box.test.js
@@ -32,7 +32,7 @@ describe('<Box />', () => {
   });
 
   describe('warnings', () => {
-    afterEach(() => {
+    beforeEach(() => {
       PropTypes.resetWarningCache();
     });
 

From 41342f8978e7132e6c86ce7459b58de40fa301b1 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 3 Nov 2020 12:24:31 +0100
Subject: [PATCH 07/13] docs:18n

---
 docs/translations/translations.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 71abc9e73a3e58..accb5083f55740 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -214,6 +214,7 @@
     "/api-docs": "Component API",
     "/system": "System",
     "/system/basics": "Basics",
+    "/system/sx": "sx",
     "/system/borders": "Borders",
     "/system/display": "Display",
     "/system/flexbox": "Flexbox",

From 9e8e04dd7edb1488a54e4486688114d410f31cbf Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 16:16:42 +0100
Subject: [PATCH 08/13] [codemod] Fix box-sx-prop failing on JSXSpread

---
 packages/material-ui-codemod/src/v5.0.0/box-sx-prop.js     | 2 +-
 .../src/v5.0.0/box-sx-prop.test/actual.js                  | 3 ++-
 .../src/v5.0.0/box-sx-prop.test/expected.js                | 7 ++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.js b/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.js
index 95474a1b1e8394..a11c4862d85876 100644
--- a/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.js
+++ b/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.js
@@ -97,7 +97,7 @@ export default function transformer(file, api) {
       const attributes = path.node.openingElement.attributes;
       attributes.forEach((node, index) => {
         // Only transform whitelisted props
-        if (boxProps.includes(node.name.name)) {
+        if (node.type === 'JSXAttribute' && boxProps.includes(node.name.name)) {
           sxValue = buildSxValue(node, sxValue);
           delete attributes[index];
         }
diff --git a/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/actual.js b/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/actual.js
index 9163b8338ed338..51b545baceea1f 100644
--- a/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/actual.js
+++ b/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/actual.js
@@ -2,12 +2,13 @@ import * as React from 'react';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-export default function BoxComponent() {
+export default function BoxComponent(props) {
   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 p={[1, 2, 4]} {...props} />
     </Box>
   );
 }
diff --git a/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/expected.js b/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/expected.js
index 6d60a59b0be1ba..3319e972c99629 100644
--- a/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/expected.js
+++ b/packages/material-ui-codemod/src/v5.0.0/box-sx-prop.test/expected.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-export default function BoxComponent() {
+export default function BoxComponent(props) {
   return (
     <Box
       sx={{
@@ -19,6 +19,11 @@ export default function BoxComponent() {
         }}>
         <Button component="span">Save</Button>
       </Box>
+      <Box
+        {...props}
+        sx={{
+          p: [1, 2, 4]
+        }} />
     </Box>
   );
 }

From bb0e1c09db418501656f04bbd3fa36647de783c6 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 16:33:40 +0100
Subject: [PATCH 09/13] Apply codemod

---
 .../progress/LinearWithValueLabel.js          |  6 +++---
 .../progress/LinearWithValueLabel.tsx         |  6 +++---
 .../pages/components/rating/HoverRating.js    |  2 +-
 .../pages/components/rating/HoverRating.tsx   |  2 +-
 .../src/pages/components/rating/TextRating.js |  2 +-
 .../pages/components/rating/TextRating.tsx    |  2 +-
 .../components/skeleton/SkeletonChildren.js   |  6 +++---
 .../components/skeleton/SkeletonChildren.tsx  |  6 +++---
 docs/src/pages/components/skeleton/YouTube.js |  8 ++++----
 .../src/pages/components/skeleton/YouTube.tsx |  8 ++++----
 .../pages/components/tabs/TabsWrappedLabel.js |  2 +-
 .../components/tabs/TabsWrappedLabel.tsx      |  2 +-
 .../src/pages/components/tabs/VerticalTabs.js |  2 +-
 .../pages/components/tabs/VerticalTabs.tsx    |  2 +-
 .../templates/pricing/Pricing.js              |  2 +-
 .../templates/pricing/Pricing.tsx             |  2 +-
 .../templates/sign-in-side/SignInSide.js      |  2 +-
 .../templates/sign-in-side/SignInSide.tsx     |  2 +-
 .../templates/sign-in/SignIn.js               |  2 +-
 .../templates/sign-in/SignIn.tsx              |  2 +-
 .../templates/sign-up/SignUp.js               |  2 +-
 .../templates/sign-up/SignUp.tsx              |  2 +-
 .../pages/premium-themes/onepirate/Terms.js   |  2 +-
 .../pages/premium-themes/onepirate/Terms.tsx  |  2 +-
 .../onepirate/modules/views/AppForm.js        |  2 +-
 .../onepirate/modules/views/AppForm.tsx       |  2 +-
 docs/src/pages/system/basics/RealWorld.js     |  4 ++--
 docs/src/pages/system/basics/RealWorld.tsx    |  4 ++--
 .../pages/system/borders/BorderAdditive.js    |  2 +-
 .../pages/system/borders/BorderAdditive.tsx   |  2 +-
 docs/src/pages/system/borders/BorderColor.js  |  2 +-
 docs/src/pages/system/borders/BorderColor.tsx |  2 +-
 docs/src/pages/system/borders/BorderRadius.js |  2 +-
 .../src/pages/system/borders/BorderRadius.tsx |  2 +-
 .../pages/system/borders/BorderSubtractive.js |  2 +-
 .../system/borders/BorderSubtractive.tsx      |  2 +-
 docs/src/pages/system/sizing/Height.js        |  2 +-
 docs/src/pages/system/sizing/Height.tsx       |  2 +-
 docs/src/pages/system/sizing/Values.js        |  2 +-
 docs/src/pages/system/sizing/Values.tsx       |  2 +-
 docs/src/pages/system/sizing/Width.js         |  2 +-
 docs/src/pages/system/sizing/Width.tsx        |  2 +-
 packages/material-ui/src/Box/Box.test.js      | 19 ++++++++++++++-----
 43 files changed, 72 insertions(+), 63 deletions(-)

diff --git a/docs/src/pages/components/progress/LinearWithValueLabel.js b/docs/src/pages/components/progress/LinearWithValueLabel.js
index 9084b177e792bd..040a9ea090db1d 100644
--- a/docs/src/pages/components/progress/LinearWithValueLabel.js
+++ b/docs/src/pages/components/progress/LinearWithValueLabel.js
@@ -7,11 +7,11 @@ import Box from '@material-ui/core/Box';
 
 function LinearProgressWithLabel(props) {
   return (
-    <Box display="flex" alignItems="center">
-      <Box width="100%" mr={1}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
         <LinearProgress variant="determinate" {...props} />
       </Box>
-      <Box minWidth={35}>
+      <Box sx={{ minWidth: 35 }}>
         <Typography variant="body2" color="textSecondary">{`${Math.round(
           props.value,
         )}%`}</Typography>
diff --git a/docs/src/pages/components/progress/LinearWithValueLabel.tsx b/docs/src/pages/components/progress/LinearWithValueLabel.tsx
index a7d4c557acb9cd..29ddd1f42a8e91 100644
--- a/docs/src/pages/components/progress/LinearWithValueLabel.tsx
+++ b/docs/src/pages/components/progress/LinearWithValueLabel.tsx
@@ -10,11 +10,11 @@ function LinearProgressWithLabel(
   props: LinearProgressProps & { value: number },
 ) {
   return (
-    <Box display="flex" alignItems="center">
-      <Box width="100%" mr={1}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
         <LinearProgress variant="determinate" {...props} />
       </Box>
-      <Box minWidth={35}>
+      <Box sx={{ minWidth: 35 }}>
         <Typography variant="body2" color="textSecondary">{`${Math.round(
           props.value,
         )}%`}</Typography>
diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
index c71b6ec1e36d7f..aba5429d7c2cfb 100644
--- a/docs/src/pages/components/rating/HoverRating.js
+++ b/docs/src/pages/components/rating/HoverRating.js
@@ -45,7 +45,7 @@ export default function HoverRating() {
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
       {value !== null && (
-        <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
+        <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
     </div>
   );
diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
index 4d7679de9802c7..e13c8a7d26eb74 100644
--- a/docs/src/pages/components/rating/HoverRating.tsx
+++ b/docs/src/pages/components/rating/HoverRating.tsx
@@ -45,7 +45,7 @@ export default function HoverRating() {
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
       {value !== null && (
-        <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
+        <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
     </div>
   );
diff --git a/docs/src/pages/components/rating/TextRating.js b/docs/src/pages/components/rating/TextRating.js
index ffe44129fcf91b..729067d7f21b45 100644
--- a/docs/src/pages/components/rating/TextRating.js
+++ b/docs/src/pages/components/rating/TextRating.js
@@ -38,7 +38,7 @@ export default function TextRating() {
         precision={0.5}
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
-      <Box ml={2}>{labels[value]}</Box>
+      <Box sx={{ ml: 2 }}>{labels[value]}</Box>
     </div>
   );
 }
diff --git a/docs/src/pages/components/rating/TextRating.tsx b/docs/src/pages/components/rating/TextRating.tsx
index cc0b0c8193fddc..357241d72128dd 100644
--- a/docs/src/pages/components/rating/TextRating.tsx
+++ b/docs/src/pages/components/rating/TextRating.tsx
@@ -38,7 +38,7 @@ export default function TextRating() {
         precision={0.5}
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
-      <Box ml={2}>{labels[value]}</Box>
+      <Box sx={{ ml: 2 }}>{labels[value]}</Box>
     </div>
   );
 }
diff --git a/docs/src/pages/components/skeleton/SkeletonChildren.js b/docs/src/pages/components/skeleton/SkeletonChildren.js
index e6a0e0c20c712c..9bf7ae2cf262c5 100644
--- a/docs/src/pages/components/skeleton/SkeletonChildren.js
+++ b/docs/src/pages/components/skeleton/SkeletonChildren.js
@@ -19,8 +19,8 @@ function SkeletonChildrenDemo(props) {
 
   return (
     <div>
-      <Box display="flex" alignItems="center">
-        <Box margin={1}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ margin: 1 }}>
           {loading ? (
             <Skeleton variant="circular">
               <Avatar />
@@ -29,7 +29,7 @@ function SkeletonChildrenDemo(props) {
             <Avatar src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg" />
           )}
         </Box>
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
           {loading ? (
             <Skeleton width="100%">
               <Typography>.</Typography>
diff --git a/docs/src/pages/components/skeleton/SkeletonChildren.tsx b/docs/src/pages/components/skeleton/SkeletonChildren.tsx
index 32a599c330ba24..c4e3139a256cbc 100644
--- a/docs/src/pages/components/skeleton/SkeletonChildren.tsx
+++ b/docs/src/pages/components/skeleton/SkeletonChildren.tsx
@@ -18,8 +18,8 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
 
   return (
     <div>
-      <Box display="flex" alignItems="center">
-        <Box margin={1}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ margin: 1 }}>
           {loading ? (
             <Skeleton variant="circular">
               <Avatar />
@@ -28,7 +28,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
             <Avatar src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg" />
           )}
         </Box>
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
           {loading ? (
             <Skeleton width="100%">
               <Typography>.</Typography>
diff --git a/docs/src/pages/components/skeleton/YouTube.js b/docs/src/pages/components/skeleton/YouTube.js
index 7dacfde35f9f40..c449e4c071bc85 100644
--- a/docs/src/pages/components/skeleton/YouTube.js
+++ b/docs/src/pages/components/skeleton/YouTube.js
@@ -38,7 +38,7 @@ function Media(props) {
   return (
     <Grid container wrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
-        <Box key={index} width={210} marginRight={0.5} my={5}>
+        <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (
             <img
               style={{ width: 210, height: 118 }}
@@ -50,7 +50,7 @@ function Media(props) {
           )}
 
           {item ? (
-            <Box pr={2}>
+            <Box sx={{ pr: 2 }}>
               <Typography gutterBottom variant="body2">
                 {item.title}
               </Typography>
@@ -66,7 +66,7 @@ function Media(props) {
               </Typography>
             </Box>
           ) : (
-            <Box pt={0.5}>
+            <Box sx={{ pt: 0.5 }}>
               <Skeleton />
               <Skeleton width="60%" />
             </Box>
@@ -83,7 +83,7 @@ Media.propTypes = {
 
 export default function YouTube() {
   return (
-    <Box overflow="hidden">
+    <Box sx={{ overflow: 'hidden' }}>
       <Media loading />
       <Media />
     </Box>
diff --git a/docs/src/pages/components/skeleton/YouTube.tsx b/docs/src/pages/components/skeleton/YouTube.tsx
index 0656982e8cfb37..c3848f5e3d9515 100644
--- a/docs/src/pages/components/skeleton/YouTube.tsx
+++ b/docs/src/pages/components/skeleton/YouTube.tsx
@@ -41,7 +41,7 @@ function Media(props: MediaProps) {
   return (
     <Grid container wrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
-        <Box key={index} width={210} marginRight={0.5} my={5}>
+        <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (
             <img
               style={{ width: 210, height: 118 }}
@@ -52,7 +52,7 @@ function Media(props: MediaProps) {
             <Skeleton variant="rectangular" width={210} height={118} />
           )}
           {item ? (
-            <Box pr={2}>
+            <Box sx={{ pr: 2 }}>
               <Typography gutterBottom variant="body2">
                 {item.title}
               </Typography>
@@ -68,7 +68,7 @@ function Media(props: MediaProps) {
               </Typography>
             </Box>
           ) : (
-            <Box pt={0.5}>
+            <Box sx={{ pt: 0.5 }}>
               <Skeleton />
               <Skeleton width="60%" />
             </Box>
@@ -81,7 +81,7 @@ function Media(props: MediaProps) {
 
 export default function YouTube() {
   return (
-    <Box overflow="hidden">
+    <Box sx={{ overflow: 'hidden' }}>
       <Media loading />
       <Media />
     </Box>
diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js
index 650a5ef920d2a8..e39cf4c557d532 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.js
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js
@@ -19,7 +19,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
index ac8d0a1e3eb4c4..7a84be00a1b001 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
@@ -24,7 +24,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/VerticalTabs.js b/docs/src/pages/components/tabs/VerticalTabs.js
index cb1eceddf29d2b..60d6983db95e06 100644
--- a/docs/src/pages/components/tabs/VerticalTabs.js
+++ b/docs/src/pages/components/tabs/VerticalTabs.js
@@ -18,7 +18,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/VerticalTabs.tsx b/docs/src/pages/components/tabs/VerticalTabs.tsx
index fe83f1592cc17f..04e0b4e7634183 100644
--- a/docs/src/pages/components/tabs/VerticalTabs.tsx
+++ b/docs/src/pages/components/tabs/VerticalTabs.tsx
@@ -23,7 +23,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box p={3}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js
index da93035bea7dd0..c166d2adf78fd3 100644
--- a/docs/src/pages/getting-started/templates/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js
@@ -294,7 +294,7 @@ export default function Pricing() {
             </Grid>
           ))}
         </Grid>
-        <Box mt={5}>
+        <Box sx={{ mt: 5 }}>
           <Copyright />
         </Box>
       </Container>
diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.tsx b/docs/src/pages/getting-started/templates/pricing/Pricing.tsx
index c5133f1e411559..b2065007b49453 100644
--- a/docs/src/pages/getting-started/templates/pricing/Pricing.tsx
+++ b/docs/src/pages/getting-started/templates/pricing/Pricing.tsx
@@ -296,7 +296,7 @@ export default function Pricing() {
             </Grid>
           ))}
         </Grid>
-        <Box mt={5}>
+        <Box sx={{ mt: 5 }}>
           <Copyright />
         </Box>
       </Container>
diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
index bfd113bb50d224..9d8f0ee58c81da 100644
--- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
@@ -121,7 +121,7 @@ export default function SignInSide() {
                 </Link>
               </Grid>
             </Grid>
-            <Box mt={5}>
+            <Box sx={{ mt: 5 }}>
               <Copyright />
             </Box>
           </form>
diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
index bfd113bb50d224..9d8f0ee58c81da 100644
--- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -121,7 +121,7 @@ export default function SignInSide() {
                 </Link>
               </Grid>
             </Grid>
-            <Box mt={5}>
+            <Box sx={{ mt: 5 }}>
               <Copyright />
             </Box>
           </form>
diff --git a/docs/src/pages/getting-started/templates/sign-in/SignIn.js b/docs/src/pages/getting-started/templates/sign-in/SignIn.js
index b90f462c20a4dd..d5b8ed925c75b4 100644
--- a/docs/src/pages/getting-started/templates/sign-in/SignIn.js
+++ b/docs/src/pages/getting-started/templates/sign-in/SignIn.js
@@ -108,7 +108,7 @@ export default function SignIn() {
           </Grid>
         </form>
       </div>
-      <Box mt={8}>
+      <Box sx={{ mt: 8 }}>
         <Copyright />
       </Box>
     </Container>
diff --git a/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx b/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx
index b90f462c20a4dd..d5b8ed925c75b4 100644
--- a/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx
@@ -108,7 +108,7 @@ export default function SignIn() {
           </Grid>
         </form>
       </div>
-      <Box mt={8}>
+      <Box sx={{ mt: 8 }}>
         <Copyright />
       </Box>
     </Container>
diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.js b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
index 71952db8bf6142..fca973d0f6a94f 100644
--- a/docs/src/pages/getting-started/templates/sign-up/SignUp.js
+++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
@@ -131,7 +131,7 @@ export default function SignUp() {
           </Grid>
         </form>
       </div>
-      <Box mt={5}>
+      <Box sx={{ mt: 5 }}>
         <Copyright />
       </Box>
     </Container>
diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx b/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx
index 71952db8bf6142..fca973d0f6a94f 100644
--- a/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx
@@ -131,7 +131,7 @@ export default function SignUp() {
           </Grid>
         </form>
       </div>
-      <Box mt={5}>
+      <Box sx={{ mt: 5 }}>
         <Copyright />
       </Box>
     </Container>
diff --git a/docs/src/pages/premium-themes/onepirate/Terms.js b/docs/src/pages/premium-themes/onepirate/Terms.js
index 1a98b66e9024fd..ab99b99fc941c2 100644
--- a/docs/src/pages/premium-themes/onepirate/Terms.js
+++ b/docs/src/pages/premium-themes/onepirate/Terms.js
@@ -13,7 +13,7 @@ function Terms() {
     <React.Fragment>
       <AppAppBar />
       <Container>
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Typography variant="h3" gutterBottom marked="center" align="center">
             Terms
           </Typography>
diff --git a/docs/src/pages/premium-themes/onepirate/Terms.tsx b/docs/src/pages/premium-themes/onepirate/Terms.tsx
index 1a98b66e9024fd..ab99b99fc941c2 100644
--- a/docs/src/pages/premium-themes/onepirate/Terms.tsx
+++ b/docs/src/pages/premium-themes/onepirate/Terms.tsx
@@ -13,7 +13,7 @@ function Terms() {
     <React.Fragment>
       <AppAppBar />
       <Container>
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Typography variant="h3" gutterBottom marked="center" align="center">
             Terms
           </Typography>
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
index cc59d56925d122..21d27e822a31cd 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
@@ -25,7 +25,7 @@ function AppForm(props) {
   return (
     <div className={classes.root}>
       <Container maxWidth="sm">
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Paper className={classes.paper} background="light">
             {children}
           </Paper>
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.tsx b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.tsx
index 9a5fe9cc07f406..ae29d6c0f6107a 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.tsx
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.tsx
@@ -26,7 +26,7 @@ function AppForm(
   return (
     <div className={classes.root}>
       <Container maxWidth="sm">
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Paper className={classes.paper} background="light">
             {children}
           </Paper>
diff --git a/docs/src/pages/system/basics/RealWorld.js b/docs/src/pages/system/basics/RealWorld.js
index 71221fee51af25..ad4c4b207d0c8c 100644
--- a/docs/src/pages/system/basics/RealWorld.js
+++ b/docs/src/pages/system/basics/RealWorld.js
@@ -9,11 +9,11 @@ import Box from '@material-ui/core/Box';
 
 export default function RealWorld() {
   return (
-    <Box clone pt={2} pr={1} pb={1} pl={2}>
+    <Box clone sx={{ pt: 2, pr: 1, pb: 1, pl: 2 }}>
       <Paper elevation={0}>
         <Grid container spacing={2} alignItems="center" wrap="nowrap">
           <Grid item>
-            <Box bgcolor="primary.main" clone>
+            <Box clone sx={{ bgcolor: 'primary.main' }}>
               <Avatar>
                 <SignalWifiOffIcon />
               </Avatar>
diff --git a/docs/src/pages/system/basics/RealWorld.tsx b/docs/src/pages/system/basics/RealWorld.tsx
index 71221fee51af25..ad4c4b207d0c8c 100644
--- a/docs/src/pages/system/basics/RealWorld.tsx
+++ b/docs/src/pages/system/basics/RealWorld.tsx
@@ -9,11 +9,11 @@ import Box from '@material-ui/core/Box';
 
 export default function RealWorld() {
   return (
-    <Box clone pt={2} pr={1} pb={1} pl={2}>
+    <Box clone sx={{ pt: 2, pr: 1, pb: 1, pl: 2 }}>
       <Paper elevation={0}>
         <Grid container spacing={2} alignItems="center" wrap="nowrap">
           <Grid item>
-            <Box bgcolor="primary.main" clone>
+            <Box clone sx={{ bgcolor: 'primary.main' }}>
               <Avatar>
                 <SignalWifiOffIcon />
               </Avatar>
diff --git a/docs/src/pages/system/borders/BorderAdditive.js b/docs/src/pages/system/borders/BorderAdditive.js
index 8ce5e091dbef74..c250115b8e8171 100644
--- a/docs/src/pages/system/borders/BorderAdditive.js
+++ b/docs/src/pages/system/borders/BorderAdditive.js
@@ -11,7 +11,7 @@ const commonStyles = {
 
 export default function BorderAdditive() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, border: 1 }} />
       <Box sx={{ ...commonStyles, borderTop: 1 }} />
       <Box sx={{ ...commonStyles, borderRight: 1 }} />
diff --git a/docs/src/pages/system/borders/BorderAdditive.tsx b/docs/src/pages/system/borders/BorderAdditive.tsx
index 8ce5e091dbef74..c250115b8e8171 100644
--- a/docs/src/pages/system/borders/BorderAdditive.tsx
+++ b/docs/src/pages/system/borders/BorderAdditive.tsx
@@ -11,7 +11,7 @@ const commonStyles = {
 
 export default function BorderAdditive() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, border: 1 }} />
       <Box sx={{ ...commonStyles, borderTop: 1 }} />
       <Box sx={{ ...commonStyles, borderRight: 1 }} />
diff --git a/docs/src/pages/system/borders/BorderColor.js b/docs/src/pages/system/borders/BorderColor.js
index db8e6fc45f51df..abc20b8705f652 100644
--- a/docs/src/pages/system/borders/BorderColor.js
+++ b/docs/src/pages/system/borders/BorderColor.js
@@ -11,7 +11,7 @@ const commonStyles = {
 
 export default function BorderColor() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, borderColor: 'primary.main' }} />
       <Box sx={{ ...commonStyles, borderColor: 'secondary.main' }} />
       <Box sx={{ ...commonStyles, borderColor: 'error.main' }} />
diff --git a/docs/src/pages/system/borders/BorderColor.tsx b/docs/src/pages/system/borders/BorderColor.tsx
index db8e6fc45f51df..abc20b8705f652 100644
--- a/docs/src/pages/system/borders/BorderColor.tsx
+++ b/docs/src/pages/system/borders/BorderColor.tsx
@@ -11,7 +11,7 @@ const commonStyles = {
 
 export default function BorderColor() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, borderColor: 'primary.main' }} />
       <Box sx={{ ...commonStyles, borderColor: 'secondary.main' }} />
       <Box sx={{ ...commonStyles, borderColor: 'error.main' }} />
diff --git a/docs/src/pages/system/borders/BorderRadius.js b/docs/src/pages/system/borders/BorderRadius.js
index 8e1f0e04eb122b..862d5f703e4901 100644
--- a/docs/src/pages/system/borders/BorderRadius.js
+++ b/docs/src/pages/system/borders/BorderRadius.js
@@ -12,7 +12,7 @@ const commonStyles = {
 
 export default function BorderRadius() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, borderRadius: '50%' }} />
       <Box sx={{ ...commonStyles, borderRadius: 'borderRadius' }} />
       <Box sx={{ ...commonStyles, borderRadius: 16 }} />
diff --git a/docs/src/pages/system/borders/BorderRadius.tsx b/docs/src/pages/system/borders/BorderRadius.tsx
index 8e1f0e04eb122b..862d5f703e4901 100644
--- a/docs/src/pages/system/borders/BorderRadius.tsx
+++ b/docs/src/pages/system/borders/BorderRadius.tsx
@@ -12,7 +12,7 @@ const commonStyles = {
 
 export default function BorderRadius() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, borderRadius: '50%' }} />
       <Box sx={{ ...commonStyles, borderRadius: 'borderRadius' }} />
       <Box sx={{ ...commonStyles, borderRadius: 16 }} />
diff --git a/docs/src/pages/system/borders/BorderSubtractive.js b/docs/src/pages/system/borders/BorderSubtractive.js
index 5374d1649c64a4..8c306c4eea5195 100644
--- a/docs/src/pages/system/borders/BorderSubtractive.js
+++ b/docs/src/pages/system/borders/BorderSubtractive.js
@@ -12,7 +12,7 @@ const commonStyles = {
 
 export default function BorderSubtractive() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, border: 0 }} />
       <Box sx={{ ...commonStyles, borderTop: 0 }} />
       <Box sx={{ ...commonStyles, borderRight: 0 }} />
diff --git a/docs/src/pages/system/borders/BorderSubtractive.tsx b/docs/src/pages/system/borders/BorderSubtractive.tsx
index 5374d1649c64a4..8c306c4eea5195 100644
--- a/docs/src/pages/system/borders/BorderSubtractive.tsx
+++ b/docs/src/pages/system/borders/BorderSubtractive.tsx
@@ -12,7 +12,7 @@ const commonStyles = {
 
 export default function BorderSubtractive() {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, border: 0 }} />
       <Box sx={{ ...commonStyles, borderTop: 0 }} />
       <Box sx={{ ...commonStyles, borderRight: 0 }} />
diff --git a/docs/src/pages/system/sizing/Height.js b/docs/src/pages/system/sizing/Height.js
index d1edf83a954c9f..ebf7099ebc2ac1 100644
--- a/docs/src/pages/system/sizing/Height.js
+++ b/docs/src/pages/system/sizing/Height.js
@@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box';
 
 export default function Height() {
   return (
-    <Box height={100} width="100%">
+    <Box sx={{ height: 100, width: '100%' }}>
       <Box
         sx={{
           height: '25%',
diff --git a/docs/src/pages/system/sizing/Height.tsx b/docs/src/pages/system/sizing/Height.tsx
index d1edf83a954c9f..ebf7099ebc2ac1 100644
--- a/docs/src/pages/system/sizing/Height.tsx
+++ b/docs/src/pages/system/sizing/Height.tsx
@@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box';
 
 export default function Height() {
   return (
-    <Box height={100} width="100%">
+    <Box sx={{ height: 100, width: '100%' }}>
       <Box
         sx={{
           height: '25%',
diff --git a/docs/src/pages/system/sizing/Values.js b/docs/src/pages/system/sizing/Values.js
index 4f82d9d557a80f..3a772ac2b93916 100644
--- a/docs/src/pages/system/sizing/Values.js
+++ b/docs/src/pages/system/sizing/Values.js
@@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box';
 
 export default function Values() {
   return (
-    <Box width="100%">
+    <Box sx={{ width: '100%' }}>
       <Box sx={{ width: 1 / 4, bgcolor: 'grey.300', p: 1, my: 0.5 }}>
         Width 1/4
       </Box>
diff --git a/docs/src/pages/system/sizing/Values.tsx b/docs/src/pages/system/sizing/Values.tsx
index 4f82d9d557a80f..3a772ac2b93916 100644
--- a/docs/src/pages/system/sizing/Values.tsx
+++ b/docs/src/pages/system/sizing/Values.tsx
@@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box';
 
 export default function Values() {
   return (
-    <Box width="100%">
+    <Box sx={{ width: '100%' }}>
       <Box sx={{ width: 1 / 4, bgcolor: 'grey.300', p: 1, my: 0.5 }}>
         Width 1/4
       </Box>
diff --git a/docs/src/pages/system/sizing/Width.js b/docs/src/pages/system/sizing/Width.js
index 02006598284ae7..71e0b49dc84c50 100644
--- a/docs/src/pages/system/sizing/Width.js
+++ b/docs/src/pages/system/sizing/Width.js
@@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box';
 
 export default function Width() {
   return (
-    <Box width="100%">
+    <Box sx={{ width: '100%' }}>
       <Box sx={{ width: '25%', bgcolor: 'grey.300', p: 1, my: 0.5 }}>
         Width 25%
       </Box>
diff --git a/docs/src/pages/system/sizing/Width.tsx b/docs/src/pages/system/sizing/Width.tsx
index 02006598284ae7..71e0b49dc84c50 100644
--- a/docs/src/pages/system/sizing/Width.tsx
+++ b/docs/src/pages/system/sizing/Width.tsx
@@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box';
 
 export default function Width() {
   return (
-    <Box width="100%">
+    <Box sx={{ width: '100%' }}>
       <Box sx={{ width: '25%', bgcolor: 'grey.300', p: 1, my: 0.5 }}>
         Width 25%
       </Box>
diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js
index 8453951eae9753..506ba656cd124a 100644
--- a/packages/material-ui/src/Box/Box.test.js
+++ b/packages/material-ui/src/Box/Box.test.js
@@ -83,9 +83,9 @@ describe('<Box />', () => {
       );
 
       const { current: element } = elementRef;
-      expect(element.getAttribute('color')).to.equal(null);
-      expect(element.getAttribute('font-family')).to.equal(null);
-      expect(element.getAttribute('font-size')).to.equal(null);
+      expect(element).not.to.have.attribute('color');
+      expect(element).not.to.have.attribute('font-family');
+      expect(element).not.to.have.attribute('font-size');
     });
   });
 
@@ -96,7 +96,9 @@ describe('<Box />', () => {
       this.skip();
     }
 
-    const testCaseBorderColorWins = render(<Box border={1} borderColor="rgb(0, 0, 255)" />);
+    const testCaseBorderColorWins = render(
+      <Box sx={{ border: 1, borderColor: 'rgb(0, 0, 255)' }} />,
+    );
 
     expect(testCaseBorderColorWins.container.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
@@ -113,7 +115,14 @@ describe('<Box />', () => {
       borderLeftColor: 'rgb(0, 0, 255)',
     });
 
-    const testCaseBorderWins = render(<Box borderColor="rgb(0, 0, 255)" border={1} />);
+    const testCaseBorderWins = render(
+      <Box
+        sx={{
+          borderColor: 'rgb(0, 0, 255)',
+          border: 1,
+        }}
+      />,
+    );
 
     expect(testCaseBorderWins.container.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',

From 4906582acc354a215a07b36b17815850ce3e5279 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 18:18:49 +0100
Subject: [PATCH 10/13] Fix incomplete rebase

---
 docs/translations/translations.json | 1 -
 packages/material-ui/src/Box/Box.js | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index accb5083f55740..71abc9e73a3e58 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -214,7 +214,6 @@
     "/api-docs": "Component API",
     "/system": "System",
     "/system/basics": "Basics",
-    "/system/sx": "sx",
     "/system/borders": "Borders",
     "/system/display": "Display",
     "/system/flexbox": "Flexbox",
diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js
index c88f6521fa98ac..51c0c5a7761dda 100644
--- a/packages/material-ui/src/Box/Box.js
+++ b/packages/material-ui/src/Box/Box.js
@@ -66,10 +66,6 @@ Box.propTypes = {
    * @ignore
    */
   component: PropTypes.elementType,
-  /**
-   * @ignore
-   */
-  css: PropTypes.object,
   /**
    * @ignore
    */

From b5bd5e44c51fc697f09d641ade69b6d2578fde12 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 18:48:27 +0100
Subject: [PATCH 11/13] Reduce diff noise

---
 docs/src/pages/components/no-ssr/SimpleNoSsr.js          | 6 +-----
 docs/src/pages/components/no-ssr/SimpleNoSsr.tsx         | 6 +-----
 .../pages/components/progress/CircularWithValueLabel.js  | 9 +++------
 .../pages/components/progress/CircularWithValueLabel.tsx | 9 +++------
 docs/src/pages/components/tabs/AccessibleTabs.js         | 4 +++-
 docs/src/pages/components/tabs/AccessibleTabs.tsx        | 4 +++-
 6 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/docs/src/pages/components/no-ssr/SimpleNoSsr.js b/docs/src/pages/components/no-ssr/SimpleNoSsr.js
index 9d7829d7c6d894..8e49a78d11cb7e 100644
--- a/docs/src/pages/components/no-ssr/SimpleNoSsr.js
+++ b/docs/src/pages/components/no-ssr/SimpleNoSsr.js
@@ -6,11 +6,7 @@ export default function SimpleNoSsr() {
   return (
     <div>
       <Box
-        sx={{
-          p: 2,
-          bgcolor: 'primary.main',
-          color: 'primary.contrastText',
-        }}
+        sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}
       >
         Server and Client
       </Box>
diff --git a/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx b/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
index 9d7829d7c6d894..8e49a78d11cb7e 100644
--- a/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
+++ b/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
@@ -6,11 +6,7 @@ export default function SimpleNoSsr() {
   return (
     <div>
       <Box
-        sx={{
-          p: 2,
-          bgcolor: 'primary.main',
-          color: 'primary.contrastText',
-        }}
+        sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}
       >
         Server and Client
       </Box>
diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.js b/docs/src/pages/components/progress/CircularWithValueLabel.js
index 4a44d782878965..e56550ec6462c3 100644
--- a/docs/src/pages/components/progress/CircularWithValueLabel.js
+++ b/docs/src/pages/components/progress/CircularWithValueLabel.js
@@ -6,12 +6,7 @@ import Box from '@material-ui/core/Box';
 
 function CircularProgressWithLabel(props) {
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        display: 'inline-flex',
-      }}
-    >
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress variant="determinate" {...props} />
       <Box
         sx={{
@@ -44,6 +39,7 @@ CircularProgressWithLabel.propTypes = {
 
 export default function CircularStatic() {
   const [progress, setProgress] = React.useState(10);
+
   React.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((prevProgress) =>
@@ -54,5 +50,6 @@ export default function CircularStatic() {
       clearInterval(timer);
     };
   }, []);
+
   return <CircularProgressWithLabel value={progress} />;
 }
diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.tsx b/docs/src/pages/components/progress/CircularWithValueLabel.tsx
index ec0980a4d1dad8..279ed889d6bf85 100644
--- a/docs/src/pages/components/progress/CircularWithValueLabel.tsx
+++ b/docs/src/pages/components/progress/CircularWithValueLabel.tsx
@@ -9,12 +9,7 @@ function CircularProgressWithLabel(
   props: CircularProgressProps & { value: number },
 ) {
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        display: 'inline-flex',
-      }}
-    >
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress variant="determinate" {...props} />
       <Box
         sx={{
@@ -40,6 +35,7 @@ function CircularProgressWithLabel(
 
 export default function CircularStatic() {
   const [progress, setProgress] = React.useState(10);
+
   React.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((prevProgress) =>
@@ -50,5 +46,6 @@ export default function CircularStatic() {
       clearInterval(timer);
     };
   }, []);
+
   return <CircularProgressWithLabel value={progress} />;
 }
diff --git a/docs/src/pages/components/tabs/AccessibleTabs.js b/docs/src/pages/components/tabs/AccessibleTabs.js
index 9071752b5a0f60..03b22f11d27256 100644
--- a/docs/src/pages/components/tabs/AccessibleTabs.js
+++ b/docs/src/pages/components/tabs/AccessibleTabs.js
@@ -9,6 +9,7 @@ import Box from '@material-ui/core/Box';
 
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
+
   return (
     <div
       role="tabpanel"
@@ -34,6 +35,7 @@ TabPanel.propTypes = {
 
 function DemoTabs(props) {
   const { labelId, onChange, selectionFollowsFocus, value } = props;
+
   return (
     <AppBar position="static">
       <Tabs
@@ -69,8 +71,8 @@ const useStyles = makeStyles({
 
 export default function AccessibleTabs() {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
 
+  const [value, setValue] = React.useState(0);
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
diff --git a/docs/src/pages/components/tabs/AccessibleTabs.tsx b/docs/src/pages/components/tabs/AccessibleTabs.tsx
index a6a635c843662b..045d41a3bb15e9 100644
--- a/docs/src/pages/components/tabs/AccessibleTabs.tsx
+++ b/docs/src/pages/components/tabs/AccessibleTabs.tsx
@@ -14,6 +14,7 @@ interface TabPanelProps {
 
 function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
+
   return (
     <div
       role="tabpanel"
@@ -40,6 +41,7 @@ interface DemoTabsProps {
 
 function DemoTabs(props: DemoTabsProps) {
   const { labelId, onChange, selectionFollowsFocus, value } = props;
+
   return (
     <AppBar position="static">
       <Tabs
@@ -67,8 +69,8 @@ const useStyles = makeStyles({
 });
 export default function AccessibleTabs() {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
 
+  const [value, setValue] = React.useState(0);
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };

From 0c269244bd8325ab75d5b9edd2718807bb388719 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 19:14:51 +0100
Subject: [PATCH 12/13] Fix incomplete rebase

---
 docs/src/pages/components/tabs/FullWidthTabs.js  | 2 +-
 docs/src/pages/components/tabs/FullWidthTabs.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js
index 0e52bf63541396..6a6ec61f428f58 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.js
+++ b/docs/src/pages/components/tabs/FullWidthTabs.js
@@ -20,7 +20,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box sx={{}}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
diff --git a/docs/src/pages/components/tabs/FullWidthTabs.tsx b/docs/src/pages/components/tabs/FullWidthTabs.tsx
index c9a8dfd2c96f2e..293c2b204ecc0f 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.tsx
+++ b/docs/src/pages/components/tabs/FullWidthTabs.tsx
@@ -26,7 +26,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box sx={{}}>
+        <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
         </Box>
       )}

From fcbebc5c10ff27c956ac57ceb32f9c8d1f4c4dae Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 12 Nov 2020 20:14:43 +0100
Subject: [PATCH 13/13] leave translation unchanged

---
 docs/src/pages/system/basics/basics-es.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/system/basics/basics-es.md b/docs/src/pages/system/basics/basics-es.md
index f60af7438baf7e..74f6b3b1b8203d 100644
--- a/docs/src/pages/system/basics/basics-es.md
+++ b/docs/src/pages/system/basics/basics-es.md
@@ -82,9 +82,9 @@ export default function App() {
 Now, you can provide a spacing multiplier value:
 
 ```jsx
-<Box sx={{ p: 1 }}>4px</Box>
-<Box sx={{ p: 2 }}>8px</Box>
-<Box sx={{ p: -1 }}>-4px</Box>
+<Box p={1}>4px</Box>
+<Box p={2}>8px</Box>
+<Box p={-1}>-4px</Box>
 ```
 
 and a primary color: