[docs] Improve documentation of the system (#23294)

Co-authored-by: Olivier Tassinari <[email protected]>
Co-authored-by: Matt <[email protected]>
Co-authored-by: Matt Brookes <[email protected]>
Co-authored-by: eps1lon <[email protected]>

Author: 4 people

benchmark/browser/README.md

@@ -16,163 +16,45 @@ You should use these numbers exclusively for comparing performance between diffe
 yarn benchmark:browser
 
 noop (baseline):
-
-20.10ms
-20.05ms
-19.28ms
-19.64ms
-20.96ms
-18.80ms
-18.39ms
-20.38ms
-18.85ms
-18.99ms
+mean: 4.70ms, median: 4.72ms
 -------------
-Avg: 19.55ms
-Median: 19.46ms
-
-styled-components Box + @material-ui/system:
-
-184.17ms
-161.51ms
-168.84ms
-165.21ms
-163.43ms
-158.10ms
-158.81ms
-297.91ms
-161.25ms
-158.87ms
+React primitives:
+mean: 68.89ms, median: 64.02ms
 -------------
-Avg: 177.81ms
-Median: 162.47ms
-
-styled-components Box + styled-system:
-
-142.66ms
-146.55ms
-141.12ms
-141.04ms
-139.45ms
-145.63ms
-141.36ms
-134.98ms
-123.98ms
-146.09ms
+React components:
+mean: 74.38ms, median: 74.46ms
 -------------
-Avg: 140.29ms
-Median: 141.24ms
-
-Box emotion:
-
-143.21ms
-135.28ms
-122.53ms
-124.80ms
-143.69ms
-147.81ms
-138.16ms
-124.55ms
-140.32ms
-157.74ms
+Styled Material-UI:
+mean: 109.73ms, median: 109.46ms
 -------------
-Avg: 137.81ms
-Median: 139.24ms
-
-Box @material-ui/styles:
-
-146.16ms
-131.37ms
-139.43ms
-158.55ms
-149.54ms
-131.81ms
-134.84ms
-151.08ms
-152.30ms
-130.69ms
+Styled emotion:
+mean: 102.59ms, median: 104.28ms
 -------------
-Avg: 142.58ms
-Median: 142.79ms
-
-Box styled-components:
-
-145.59ms
-150.12ms
-179.04ms
-169.63ms
-148.21ms
-155.55ms
-182.55ms
-170.04ms
-153.14ms
-148.92ms
+Styled SC:
+mean: 104.06ms, median: 102.67ms
 -------------
-Avg: 160.28ms
-Median: 154.35ms
-
-Basic styled-components box:
-
-141.73ms
-139.71ms
-121.01ms
-120.02ms
-121.81ms
-143.22ms
-135.67ms
-120.85ms
-121.08ms
-120.59ms
+makeStyles:
+mean: 93.81ms, median: 92.90ms
 -------------
-Avg: 128.57ms
-Median: 121.44ms
-
-Chakra-UI box component:
-
-147.42ms
-128.51ms
-118.74ms
-110.01ms
-133.05ms
-130.20ms
-121.57ms
-119.11ms
-108.57ms
-134.90ms
+sx Material-UI box:
+mean: 187.98ms, median: 188.77ms
 -------------
-Avg: 125.21ms
-Median: 125.04ms
-
-Theme-UI box sx prop:
-
-165.02ms
-141.07ms
-139.19ms
-185.45ms
-166.16ms
-138.83ms
-140.56ms
-139.02ms
-179.26ms
-165.58ms
+Box Material-UI:
+mean: 159.24ms, median: 157.90ms
 -------------
-Avg: 156.01ms
-Median: 153.05ms
-
-Theme-UI div sx prop:
-
-131.07ms
-130.84ms
-130.99ms
-132.66ms
-132.24ms
-130.89ms
-131.11ms
-167.10ms
-154.42ms
-131.48ms
+sx Theme-UI box:
+mean: 164.22ms, median: 164.16ms
+-------------
+sx Theme-UI div:
+mean: 153.10ms, median: 152.77ms
+-------------
+Box Chakra-UI:
+mean: 154.95ms, median: 153.89ms
+-------------
+styled-components Box + @material-ui/system:
+mean: 176.82ms, median: 176.60ms
+-------------
+styled-components Box + styled-system:
+mean: 155.18ms, median: 154.63ms
 -------------
-Avg: 137.28ms
-Median: 131.30ms
-Done in 31.83s.
 ```

benchmark/browser/index.js

@@ -15,7 +15,7 @@ const Component = requirePerfScenarios(scenarioSuitePath).default;
 const start = performance.now();
 let end;
 
-function TestCase(props) {
+function Measure(props) {
   const ref = React.useRef(null);
 
   React.useLayoutEffect(() => {
@@ -28,20 +28,18 @@ function TestCase(props) {
     };
   });
 
-  return (
-    <React.Profiler id={scenarioSuitePath} onRender={logReactMetrics}>
-      <div ref={ref}>{props.children}</div>
-    </React.Profiler>
-  );
+  return <div ref={ref}>{props.children}</div>;
 }
 
-TestCase.propTypes = {
+Measure.propTypes = {
   children: PropTypes.node,
 };
 
 ReactDOM.render(
-  <TestCase>
-    <Component />
-  </TestCase>,
+  <React.Profiler id={scenarioSuitePath} onRender={logReactMetrics}>
+    <Measure>
+      <Component />
+    </Measure>
+  </React.Profiler>,
   rootEl,
 );

benchmark/browser/scenarios/basic-styled-components/index.js

@@ -1,16 +1,11 @@
 import * as React from 'react';
-import { Box, ThemeProvider, theme } from '@chakra-ui/core';
+import { Box, ThemeProvider } from '@chakra-ui/core';
 
-// Let's say you want to add custom colors
 const customTheme = {
-  ...theme,
   colors: {
-    ...theme.colors,
-    brand: {
-      900: '#1a365d',
-      800: '#153e75',
-      700: '#2a69ac',
-    },
+    text: '#000',
+    background: '#fff',
+    primary: '#33e',
   },
 };
 
@@ -19,13 +14,15 @@ export default function BoxChakraUi() {
     <ThemeProvider theme={customTheme}>
       {new Array(1000).fill().map(() => (
         <Box
-          color="primary.main"
-          bg="background.paper"
-          fontWeight="semibold"
-          fontSize={['30em', '48em', '62em', '80em']}
-          p={[2, 3, 4]}
+          width={200}
+          height={200}
+          color={'primary'}
+          backgroundColor={['primary', 'text', 'background']}
+          borderWidth={'3px'}
+          borderColor={'white'}
+          borderStyle={['dashed', 'solid', 'dotted']}
         >
-          chakra-ui
+          test case
         </Box>
       ))}
     </ThemeProvider>

benchmark/browser/scenarios/box-chakra-ui/index.js

@@ -1,24 +1,21 @@
 import * as React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
-import BoxStyles from '@material-ui/core/Box';
-
-const materialSystemTheme = createMuiTheme();
+import Box from '@material-ui/core/Box';
 
 export default function BoxMaterialUIStyles() {
   return (
-    <StylesThemeProvider theme={materialSystemTheme}>
+    <React.Fragment>
       {new Array(1000).fill().map(() => (
-        <BoxStyles
-          color="primary.main"
-          bgcolor="background.paper"
-          fontFamily="h6.fontFamily"
-          fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
-          p={[2, 3, 4]}
+        <Box
+          width={200}
+          height={200}
+          borderWidth="3px"
+          borderColor="white"
+          backgroundColor={{ sm: 'primary.main' }}
+          borderStyle={{ sm: 'dashed' }}
         >
-          @material-ui/styles
-        </BoxStyles>
+          test case
+        </Box>
       ))}
-    </StylesThemeProvider>
+    </React.Fragment>
   );
 }