diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md index 97b3e69eccdf33..9b73c532d8a380 100644 --- a/benchmark/browser/README.md +++ b/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. ``` diff --git a/benchmark/browser/index.js b/benchmark/browser/index.js index 4bd1f0b727d96c..f997ff05f770e8 100644 --- a/benchmark/browser/index.js +++ b/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 ( - -
{props.children}
- - ); + return
{props.children}
; } -TestCase.propTypes = { +Measure.propTypes = { children: PropTypes.node, }; ReactDOM.render( - - - , + + + + + , rootEl, ); diff --git a/benchmark/browser/scenarios/basic-styled-components/index.js b/benchmark/browser/scenarios/basic-styled-components/index.js deleted file mode 100644 index ec26cbce611919..00000000000000 --- a/benchmark/browser/scenarios/basic-styled-components/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { spacing } from '@material-ui/system'; -import styledComponents, { - ThemeProvider as StyledComponentsThemeProvider, -} from 'styled-components'; - -const materialSystemTheme = createMuiTheme(); -const BasicStyleComponents = styledComponents('div')(spacing); - -export default function BasicStyledComponents() { - return ( - - {new Array(1000).fill().map(() => ( - - styled-components - - ))} - - ); -} diff --git a/benchmark/browser/scenarios/box-chakra-ui/index.js b/benchmark/browser/scenarios/box-chakra-ui/index.js index 7307bf072e00d5..8b29672f91a5e7 100644 --- a/benchmark/browser/scenarios/box-chakra-ui/index.js +++ b/benchmark/browser/scenarios/box-chakra-ui/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() { {new Array(1000).fill().map(() => ( - chakra-ui + test case ))} diff --git a/benchmark/browser/scenarios/box-emotion/index.js b/benchmark/browser/scenarios/box-emotion/index.js deleted file mode 100644 index f7dd839c16ed4d..00000000000000 --- a/benchmark/browser/scenarios/box-emotion/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import styledEmotion from '@emotion/styled'; -import { ThemeProvider as EmotionTheme } from 'emotion-theming'; -import { styleFunction } from '@material-ui/core/Box'; - -const materialSystemTheme = createMuiTheme(); -const Box = styledEmotion('div')(styleFunction); - -export default function BoxEmotion() { - return ( - - {new Array(1000).fill().map(() => ( - - emotion - - ))} - - ); -} diff --git a/benchmark/browser/scenarios/box-material-ui-styles/index.js b/benchmark/browser/scenarios/box-material-ui-styles/index.js index 35ebad0df4b0b8..6eab23af21e65c 100644 --- a/benchmark/browser/scenarios/box-material-ui-styles/index.js +++ b/benchmark/browser/scenarios/box-material-ui-styles/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 ( - + {new Array(1000).fill().map(() => ( - - @material-ui/styles - + test case + ))} - + ); } diff --git a/benchmark/browser/scenarios/box-styled-components/index.js b/benchmark/browser/scenarios/box-styled-components/index.js deleted file mode 100644 index f9873fa8f6bcd4..00000000000000 --- a/benchmark/browser/scenarios/box-styled-components/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { styleFunction } from '@material-ui/core/Box'; -import styledComponents, { - ThemeProvider as StyledComponentsThemeProvider, -} from 'styled-components'; - -const materialSystemTheme = createMuiTheme(); -const BoxStyleComponents = styledComponents('div')(styleFunction); - -export default function BoxStyledComponents() { - return ( - - {new Array(1000).fill().map(() => ( - - styled-components - - ))} - - ); -} diff --git a/benchmark/browser/scenarios/components/index.js b/benchmark/browser/scenarios/components/index.js new file mode 100644 index 00000000000000..887bfb0971a875 --- /dev/null +++ b/benchmark/browser/scenarios/components/index.js @@ -0,0 +1,15 @@ +import * as React from 'react'; + +const Div = React.forwardRef(function Div(props, ref) { + return
; +}); + +export default function Components() { + return ( + + {new Array(1000).fill().map(() => ( +
test case
+ ))} + + ); +} diff --git a/benchmark/browser/scenarios/make-styles/index.js b/benchmark/browser/scenarios/make-styles/index.js new file mode 100644 index 00000000000000..81173db4b3d970 --- /dev/null +++ b/benchmark/browser/scenarios/make-styles/index.js @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme) => ({ + root: { + width: 200, + height: 200, + borderWidth: 3, + borderColor: 'white', + ':hover': { + backgroundColor: theme.palette.secondary.dark, + }, + [theme.breakpoints.up('sm')]: { + backgroundColor: theme.palette.primary.main, + borderStyle: 'dashed', + }, + }, +})); + +const Div = React.forwardRef(function Div(props, ref) { + const classes = useStyles(); + + return
; +}); + +export default function MakeStyles() { + return ( + + {new Array(1000).fill().map(() => ( +
test case
+ ))} + + ); +} diff --git a/benchmark/browser/scenarios/primitives/index.js b/benchmark/browser/scenarios/primitives/index.js new file mode 100644 index 00000000000000..03fcff93b9274b --- /dev/null +++ b/benchmark/browser/scenarios/primitives/index.js @@ -0,0 +1,11 @@ +import * as React from 'react'; + +export default function Primitives() { + return ( + + {new Array(1000).fill().map(() => ( +
test case
+ ))} + + ); +} diff --git a/benchmark/browser/scenarios/styled-emotion/index.js b/benchmark/browser/scenarios/styled-emotion/index.js new file mode 100644 index 00000000000000..0edabb3f598958 --- /dev/null +++ b/benchmark/browser/scenarios/styled-emotion/index.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import emotionStyled from '@emotion/styled'; + +const Div = emotionStyled('div')( + ({ theme }) => ` + width: 200px; + height: 200px; + border-width: 3px; + border-color: white; + :hover { + background-color: ${theme.palette.secondary.dark}; + } + ${[theme.breakpoints.up('sm')]} { + background-color: ${theme.palette.primary.main}; + border-style: 'dashed'; + } +`, +); + +const theme = createMuiTheme(); + +export default function StyledEmotion() { + return ( + + {new Array(1000).fill().map(() => ( +
test case
+ ))} + + ); +} diff --git a/benchmark/browser/scenarios/styled-material-ui/index.js b/benchmark/browser/scenarios/styled-material-ui/index.js new file mode 100644 index 00000000000000..18849ead2d3861 --- /dev/null +++ b/benchmark/browser/scenarios/styled-material-ui/index.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; + +const Div = styled('div')( + ({ theme }) => ` + width: 200px; + height: 200px; + border-width: 3px; + border-color: white; + :hover { + background-color: ${theme.palette.secondary.dark}; + } + ${[theme.breakpoints.up('sm')]} { + background-color: ${theme.palette.primary.main}; + border-style: 'dashed'; + } +`, +); + +export default function StyledMaterialUI() { + return ( + + {new Array(1000).fill().map(() => ( +
test case
+ ))} + + ); +} diff --git a/benchmark/browser/scenarios/styled-sc/index.js b/benchmark/browser/scenarios/styled-sc/index.js new file mode 100644 index 00000000000000..f81df8ad1317b5 --- /dev/null +++ b/benchmark/browser/scenarios/styled-sc/index.js @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import styledComponents, { + ThemeProvider as StyledComponentsThemeProvider, +} from 'styled-components'; + +const Div = styledComponents('div')( + ({ theme }) => ` + width: 200px; + height: 200px; + border-width: 3px; + border-color: white; + :hover { + background-color: ${theme.palette.secondary.dark}; + } + ${[theme.breakpoints.up('sm')]} { + background-color: ${theme.palette.primary.main}; + border-style: 'dashed'; + } +`, +); + +const theme = createMuiTheme(); + +export default function StyledSC() { + return ( + + {new Array(1000).fill().map(() => ( +
test case
+ ))} + + ); +} diff --git a/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js index 1988668b132ec3..aa5e393dc627ed 100644 --- a/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@material-ui/core/Box'; -export default function BoxSxPropMaterialUI() { +export default function SxPropBoxMaterialUI() { return ( {new Array(1000).fill().map(() => ( @@ -9,16 +9,16 @@ export default function BoxSxPropMaterialUI() { sx={{ width: 200, height: 200, - backgroundColor: [undefined, 'primary.light', 'primary.main', 'primary.dark'], borderWidth: '3px', borderColor: 'white', - borderStyle: [undefined, 'dashed', 'solid', 'dotted'], + backgroundColor: { sm: 'primary.main' }, + borderStyle: { sm: 'dashed' }, ':hover': { backgroundColor: (theme) => theme.palette.secondary.dark, }, }} > - material-ui + test case ))} diff --git a/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js index 588f1aa6fa0c36..95d329dc7668bb 100644 --- a/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js @@ -32,7 +32,7 @@ export default function ThemeUISxPropBox() { }, }} > - theme-ui + test case ))} diff --git a/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js b/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js index 38e9abb777c964..e9d33a4d2e8704 100644 --- a/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js @@ -32,7 +32,7 @@ export default function ThemeUiSxProp() { }, }} > - theme-ui + test case
))} diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js index b4b9ed32bda7f5..6490072ee52bd6 100644 --- a/benchmark/browser/scripts/benchmark.js +++ b/benchmark/browser/scripts/benchmark.js @@ -56,22 +56,26 @@ const getMedian = (measures) => { }; const printMeasure = (name, measures) => { - console.log(`\n${name}:\n`); + console.log(`${name}:`); let sum = 0; const totalNum = measures.length; measures.forEach((measure) => { sum += measure; - console.log(`${measure.toFixed(2)}ms`); + // Uncomment for more details + // console.log(`${measure.toFixed(2)}ms`); }); + console.log( + `mean: ${Number(sum / totalNum).toFixed(2)}ms, median: ${Number(getMedian(measures)).toFixed( + 2, + )}ms`, + ); console.log('-------------'); - console.log(`Avg: ${Number(sum / totalNum).toFixed(2)}ms`); - console.log(`Median: ${Number(getMedian(measures)).toFixed(2)}ms`); }; -async function runMeasures(browser, testCaseName, testCase, times) { +async function runMeasures(browser, testCaseName, testCase, times = 10) { const measures = []; for (let i = 0; i < times; i += 1) { @@ -95,32 +99,36 @@ async function run() { const [server, browser] = await Promise.all([createServer({ port: PORT }), createBrowser()]); try { - await runMeasures(browser, 'noop (baseline)', './noop/index.js', 10); + // Test that there no significant offset + await runMeasures(browser, 'noop (baseline)', './noop/index.js'); + // Test the cost of React primitives + await runMeasures(browser, 'React primitives', './primitives/index.js'); + // Test the cost of React components abstraction + await runMeasures(browser, 'React components', './components/index.js'); + // Test that @material-ui/styled-engine doesn't add an signifiant overhead + await runMeasures(browser, 'Styled Material-UI', './styled-material-ui/index.js'); + await runMeasures(browser, 'Styled emotion', './styled-emotion/index.js'); + await runMeasures(browser, 'Styled SC', './styled-sc/index.js'); + // Test the performance compared to the v4 standard + await runMeasures(browser, 'makeStyles', './make-styles/index.js'); + // Test that the sx prop vs props spreaing has no signficiant difference + await runMeasures(browser, 'sx Material-UI box', './sx-prop-box-material-ui/index.js'); + await runMeasures(browser, 'Box Material-UI', './box-material-ui-styles/index.js'); + // Test the Box perf with alternatives + await runMeasures(browser, 'sx Theme-UI box', './sx-prop-box-theme-ui/index.js'); + await runMeasures(browser, 'sx Theme-UI div', './sx-prop-div-theme-ui/index.js'); + await runMeasures(browser, 'Box Chakra-UI', './box-chakra-ui/index.js'); + // Test the system perf difference with alternatives await runMeasures( browser, 'styled-components Box + @material-ui/system', './styled-components-box-material-ui-system/index.js', - 10, ); await runMeasures( browser, 'styled-components Box + styled-system', './styled-components-box-styled-system/index.js', - 10, ); - await runMeasures(browser, 'Box emotion', './box-emotion/index.js', 10); - await runMeasures(browser, 'Box @material-ui/styles', './box-material-ui-styles/index.js', 10); - await runMeasures(browser, 'Box styled-components', './box-styled-components/index.js', 10); - await runMeasures( - browser, - 'Basic styled-components box', - './basic-styled-components/index.js', - 10, - ); - await runMeasures(browser, 'Chakra-UI box component', './box-chakra-ui/index.js', 10); - await runMeasures(browser, 'Theme-UI box sx prop', './sx-prop-box-theme-ui/index.js', 10); - await runMeasures(browser, 'Theme-UI div sx prop', './sx-prop-div-theme-ui/index.js', 10); - await runMeasures(browser, 'Material-UI box sx prop', './sx-prop-box-material-ui/index.js', 10); } finally { await Promise.all([browser.close(), server.close()]); } diff --git a/docs/pages/system/api.js b/docs/pages/system/properties.js similarity index 72% rename from docs/pages/system/api.js rename to docs/pages/system/properties.js index 075fe269330d45..11716668d36780 100644 --- a/docs/pages/system/api.js +++ b/docs/pages/system/properties.js @@ -2,10 +2,10 @@ import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; -const pageFilename = 'system/api'; -const requireDemo = require.context('docs/src/pages/system/api', false, /\.(js|tsx)$/); +const pageFilename = 'system/properties'; +const requireDemo = require.context('docs/src/pages/system/properties', false, /\.(js|tsx)$/); const requireRaw = require.context( - '!raw-loader!../../src/pages/system/api', + '!raw-loader!../../src/pages/system/properties', false, /\.(js|md|tsx)$/, ); diff --git a/docs/public/static/images/system/demo.jpg b/docs/public/static/images/system/demo.jpg new file mode 100644 index 00000000000000..e6cb96a59aff64 Binary files /dev/null and b/docs/public/static/images/system/demo.jpg differ diff --git a/docs/src/pages.js b/docs/src/pages.js index dd1b74621197f9..5df2d22839689d 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -174,14 +174,6 @@ const pages = [ a.pathname.replace('/api-docs/', '').localeCompare(b.pathname.replace('/api-docs/', '')), ), }, - { - pathname: '/styles', - children: [ - { pathname: '/styles/basics' }, - { pathname: '/styles/advanced' }, - { pathname: '/styles/api', title: 'API' }, - ], - }, { pathname: '/system', children: [ @@ -196,7 +188,15 @@ const pages = [ { pathname: '/system/spacing' }, { pathname: '/system/screen-readers' }, { pathname: '/system/typography' }, - { pathname: '/system/api', title: 'API' }, + { pathname: '/system/properties' }, + ], + }, + { + pathname: '/styles', + children: [ + { pathname: '/styles/basics' }, + { pathname: '/styles/advanced' }, + { pathname: '/styles/api', title: 'API' }, ], }, { diff --git a/docs/src/pages/system/basics/BreakpointsAsArray.js b/docs/src/pages/system/basics/BreakpointsAsArray.js new file mode 100644 index 00000000000000..9b70c98d831234 --- /dev/null +++ b/docs/src/pages/system/basics/BreakpointsAsArray.js @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; + +export default function BreakpointsAsArray() { + return ( +
+ + This box has a responsive width. + +
+ ); +} diff --git a/docs/src/pages/system/basics/BreakpointsAsArray.tsx b/docs/src/pages/system/basics/BreakpointsAsArray.tsx new file mode 100644 index 00000000000000..9b70c98d831234 --- /dev/null +++ b/docs/src/pages/system/basics/BreakpointsAsArray.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; + +export default function BreakpointsAsArray() { + return ( +
+ + This box has a responsive width. + +
+ ); +} diff --git a/docs/src/pages/system/basics/BreakpointsAsObject.js b/docs/src/pages/system/basics/BreakpointsAsObject.js new file mode 100644 index 00000000000000..4a1cafd9a5e226 --- /dev/null +++ b/docs/src/pages/system/basics/BreakpointsAsObject.js @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; + +export default function BreakpointsAsObject() { + return ( +
+ + This box has a responsive width. + +
+ ); +} diff --git a/docs/src/pages/system/basics/BreakpointsAsObject.tsx b/docs/src/pages/system/basics/BreakpointsAsObject.tsx new file mode 100644 index 00000000000000..4a1cafd9a5e226 --- /dev/null +++ b/docs/src/pages/system/basics/BreakpointsAsObject.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; + +export default function BreakpointsAsObject() { + return ( +
+ + This box has a responsive width. + +
+ ); +} diff --git a/docs/src/pages/system/basics/Demo.js b/docs/src/pages/system/basics/Demo.js index e72cd857c524f9..249a41973f9a4f 100644 --- a/docs/src/pages/system/basics/Demo.js +++ b/docs/src/pages/system/basics/Demo.js @@ -1,36 +1,67 @@ import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; -import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { palette, spacing, typography } from '@material-ui/system'; +import Box from '@material-ui/core/Box'; +import { alpha } from '@material-ui/core/styles'; +import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; -const Box = styled.div` - ${palette} - ${spacing} - ${typography} -`; -// or import Box from '@material-ui/core/Box'; - -const theme = createMuiTheme(); +function Img(props) { + return ; +} export default function Demo() { return ( - - + + The house from the offer. + + + 123 Main St, Phoenix AZ + + + $280,000 — $310,000 + alpha(theme.palette.primary.main, 0.1), + borderRadius: '5px', + color: 'primary.main', + fontWeight: 'fontWeightMedium', + display: 'flex', + fontSize: 12, + alignItems: 'center', + '& svg': { + fontSize: 21, + mr: 0.5, + }, }} - p={{ xs: 2, sm: 3, md: 4 }} > - @material-ui/system + + CONFIDENCE SCORE 85% - - + + ); } diff --git a/docs/src/pages/system/basics/Demo.tsx b/docs/src/pages/system/basics/Demo.tsx index f4179c467d69f4..ad24dbc2ef54e0 100644 --- a/docs/src/pages/system/basics/Demo.tsx +++ b/docs/src/pages/system/basics/Demo.tsx @@ -1,43 +1,72 @@ import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; -import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { - palette, - PaletteProps, - spacing, - SpacingProps, - typography, - TypographyProps, -} from '@material-ui/system'; +import Box, { BoxProps } from '@material-ui/core/Box'; +import { alpha } from '@material-ui/core/styles'; +import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; -const Box = styled.div` - ${palette} - ${spacing} - ${typography} -`; -// or import Box from '@material-ui/core/Box'; +interface ImgProps extends BoxProps { + src?: string; + alt?: string; +} -const theme = createMuiTheme(); +function Img(props: ImgProps) { + return ; +} export default function Demo() { return ( - - + + The house from the offer. + + + 123 Main St, Phoenix AZ + + + $280,000 — $310,000 + alpha(theme.palette.primary.main, 0.1), + borderRadius: '5px', + color: 'primary.main', + fontWeight: 'fontWeightMedium', + display: 'flex', + fontSize: 12, + alignItems: 'center', + '& svg': { + fontSize: 21, + mr: 0.5, + }, }} - p={{ xs: 2, sm: 3, md: 4 }} > - @material-ui/system + + CONFIDENCE SCORE 85% - - + + ); } diff --git a/docs/src/pages/system/basics/ValueAsFunction.js b/docs/src/pages/system/basics/ValueAsFunction.js new file mode 100644 index 00000000000000..f90b0ba724593a --- /dev/null +++ b/docs/src/pages/system/basics/ValueAsFunction.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; + +export default function ValueAsFunction() { + return ( +
+ theme.palette.primary.main, + }} + > + Border color with theme value. + +
+ ); +} diff --git a/docs/src/pages/system/basics/ValueAsFunction.tsx b/docs/src/pages/system/basics/ValueAsFunction.tsx new file mode 100644 index 00000000000000..7fc4d157fe3ad9 --- /dev/null +++ b/docs/src/pages/system/basics/ValueAsFunction.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; +import { Theme } from '@material-ui/core/styles'; + +export default function ValueAsFunction() { + return ( +
+ theme.palette.primary.main, + }} + > + Border color with theme value. + +
+ ); +} diff --git a/docs/src/pages/system/basics/Why.js b/docs/src/pages/system/basics/Why.js new file mode 100644 index 00000000000000..9ccae3c38a8fe3 --- /dev/null +++ b/docs/src/pages/system/basics/Why.js @@ -0,0 +1,61 @@ +import * as React from 'react'; +import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import Box from '@material-ui/core/Box'; + +export default function Why() { + return ( + + + Sessions + + + 98.3 K + + + + 18.77% + + + vs last week + + + ); +} diff --git a/docs/src/pages/system/basics/Why.tsx b/docs/src/pages/system/basics/Why.tsx new file mode 100644 index 00000000000000..9ccae3c38a8fe3 --- /dev/null +++ b/docs/src/pages/system/basics/Why.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import Box from '@material-ui/core/Box'; + +export default function Why() { + return ( + + + Sessions + + + 98.3 K + + + + 18.77% + + + vs last week + + + ); +} diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index 99ed89e0c0424b..d7b0f9b1140ad5 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -1,29 +1,19 @@ -# @material-ui/system +# Material-UI System -

Styled system & style functions for building powerful design systems.

+

CSS utilities for rapidly creating custom design.

-## Getting Started +Material-UI comes with dozens or **ready-to-use** components in the core. +These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system: -`@material-ui/system` provides low-level utility functions called "_style functions_" for building powerful design systems. Some of the key features: +The **system** lets you quickly build custom UI components leveraging the values defined in your theme. -- ⚛️ Access the theme values directly from the component props. -- 🦋 Encourage UI consistency. -- 🌈 Write responsive style effortlessly. -- 🦎 Work with any theme object. -- 💅 Work with the most popular CSS-in-JS solutions. -- 📦 Less than [4 KB gzipped](https://bundlephobia.com/result?p=@material-ui/system). -- 🚀 [Fast enough](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-benchmark/README.md#material-uisystem) not to be a bottleneck at runtime. +## Demo -It's important to understand that this package exposes pure (side-effect free) style functions with this signature: `({ theme, ...style }) => style`, **that's it**. +_(Resize the window to see the responsive breakpoints)_ -### Demo +{{"demo": "pages/system/basics/Demo.js", "bg": true, "defaultCodeOpen": true}} -In the rest of this _Getting Started_ section we are using **styled-components** as the reference example (to emphasize the universality of this package). Alternatively, you can [emotion](#interoperability) or any other CSS-in-JS styling solution. -The demos are also based on the **default** Material-UI [theme object](/customization/default-theme/). - -{{"demo": "pages/system/basics/Demo.js", "defaultCodeOpen": true}} - -### Installation +## Installation ```jsx // with npm @@ -33,311 +23,372 @@ npm install @material-ui/system yarn add @material-ui/system ``` -### Create a component +## Why use the system? + +Compare how the same stat component can be built with two different APIs. + +{{"demo": "pages/system/basics/Why.js", "bg": true, "defaultCodeOpen": false}} -In order to use the `Box` component, you first need to create it. -To start with, add a `spacing` and `palette` function to the style argument. +1. ❌ using the styled-components's API: ```jsx -import styled from 'styled-components'; -import { spacing, palette } from '@material-ui/system'; +const StatWrapper = styled('div')( + ({ theme }) => ` + background-color: ${theme.palette.background.paper}; + box-shadow: ${theme.shadows[1]}; + border-radius: ${theme.shape.borderRadius}px; + padding: ${theme.spacing(2)}; + min-width: 300px; +`, +); + +const StatHeader = styled('div')( + ({ theme }) => ` + color: ${theme.palette.text.secondary}; +`, +); -const Box = styled.div` - ${spacing}${palette} -`; +const StyledTrend = styled(TrendingUpIcon)( + ({ theme }) => ` + color: ${theme.palette.success.dark}; + font-size: 16px; + vertical-alignment: sub; +`, +); + +const StatValue = styled('div')( + ({ theme }) => ` + color: ${theme.palette.text.primary}; + font-size: 34px; + font-weight: ${theme.typography.fontWeightMedium}; +`, +); + +const StatDiff = styled('div')( + ({ theme }) => ` + color: ${theme.palette.success.dark}; + display: inline; + font-weight: ${theme.typography.fontWeightMedium}; + margin-left: ${theme.spacing(0.5)}; + margin-right: ${theme.spacing(0.5)}; +`, +); + +const StatPrevious = styled('div')( + ({ theme }) => ` + color: ${theme.palette.text.secondary}; + display: inline; + font-size: 12px; +`, +); -export default Box; +return ( + + Sessions + 98.3 K + + 18.77% + vs last week + +); ``` -This Box component now supports new [spacing props](/system/spacing/#api) and [color props](/system/palette/#api). -For example, you can provide a padding prop: `p` and a color prop: `color`. +2. ✅ using the system: ```jsx - - Give me some space! + + + Sessions + + + 98.3 K + + + + 18.77% + + + vs last week + ``` -The component can be styled providing any valid CSS values. +### Problem solved -### Theming +The system focus on solving 3 main problems: -But most of the time, you want to rely on a theme's values to increase the UI consistency. -It's preferable to have a predetermined set of padding and color values. -Import the theme provider of your styling solution. +**1. Switching context wastes time.** -```jsx -import * as React from 'react'; -import { ThemeProvider } from 'styled-components'; +There's no need to constantly jump between the usage of the styled components and where they are defined. With the system, those descriptions are right where you need them. -const theme = { - spacing: 4, - palette: { - primary: '#007bff', - }, -}; +**2. Naming things is hard.** -export default function App() { - return {/* children */}; -} -``` +Have you ever found yourself struggling to find a good name for a styled component? +The system maps the styles directly to the element. +All you have to do is worry about actual style properties. -Now, you can provide a spacing multiplier value: +**3. Enforcing consistency in UIs is hard.** -```jsx -4px -8px --4px -``` +This is especially true when more than one person is building the application, as there has to be some coordination amongst members of the team regarding the choice of design tokens and how they are used, what parts of the theme structure should be used with what CSS properties, and so on. -and a primary color: +The system provides direct access to the value in the theme. It makes it easier to design with constraints. -```jsx -blue -``` +## The `sx` prop -### All-inclusive +The `sx` prop, as the main part of the system, solves these problems by providing a fast & simple way of applying the correct design tokens for specific CSS properties directly to a React element. The [demo above](#demo) shows how it can be used to create a one-off design. -To make the Box component more useful, we have been building a collection of style functions, here is the full list: +This prop provides a superset of CSS that maps values directly from the theme, depending on the CSS property used. Also, it allows a simple way of defining responsive values that correspond to the breakpoints defined in the theme. -- [borders](/system/borders/#api) -- [display](/system/display/#api) -- [flexbox](/system/flexbox/#api) -- [palette](/system/palette/#api) -- [positions](/system/positions/#api) -- [shadows](/system/shadows/#api) -- [sizing](/system/sizing/#api) -- [spacing](/system/spacing/#api) -- [typography](/system/typography/#api) +### When to use it? -If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using emotion internally by default): +- **styled-components**: the API is great to build components that need to support a wide variety of contexts. These components are used in many different parts of the application and support different combinations of props. +- **`sx` prop**: the API is great to apply one-off styles. It's called "utility" for this reason. -```jsx -import Box from '@material-ui/core/Box'; -``` +### Performance tradeoff -## Interoperability +The system relies on CSS-in-JS. It works with both emotion and styled-components. -`@material-ui/system` works with most CSS-in-JS libraries, including JSS, styled-components, and emotion. Here are a few examples usages. +Pros: -### Styled components +- 📚 It allows a lot of flexibility in the API. The `sx` prop supports a superset of CSS. There is **no need to learn CSS twice**. You are set once you have learn the standardized CSS syntax, it's safe, it hasn't changed for a decade. Then, you can **optionally** learn the shorthands if you value the save of time they bring. +- 📦 Auto-purge. Only the used CSS on the page is sent to the client. The initial bundle size cost is **fixed**. It's not growing with the number of used CSS properties. + You pay the cost of [@emotion/react](https://bundlephobia.com/result?p=@emotion/react) and [@material-ui/system](https://bundlephobia.com/result?p=@material-ui/system). It cost around ~15 kB gzipped. + If you are already using the core components, it comes with no extra overhead. -{{"demo": "pages/system/basics/StyledComponents.js", "defaultCodeOpen": true}} +Cons: -### Emotion +- The runtime performance take a hit. -{{"demo": "pages/system/basics/Emotion.js", "defaultCodeOpen": true}} + | Benchmark case | Code snippet | Time normalized | + | :-------------------------------- | :------------------- | --------------- | + | a. Render 1,000 primitives | `
` | 100ms | + | b. Render 1,000 components | `
` | 110ms | + | c. Render 1,000 styled components | `` | 160ms | + | d. Render 1,000 Box | `` | 270ms | -## Responsive + _Head to the [benchmark folder](https://github.com/mui-org/material-ui/tree/next/benchmark/browser) for a reproduction of these metrics._ -**All** the props are responsive. There are three different APIs – Array, Object, and Collocation – that each use this default (but customizable) breakpoints theme structure: + We believe that for most applications, it's **fast enough**. There are simple workarounds when performance becomes critical. For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item). -```js -const values = { - xs: 0, - sm: 600, - md: 960, - lg: 1280, - xl: 1920, -}; +## Usage -const theme = { - breakpoints: { - keys: ['xs', 'sm', 'md', 'lg', 'xl'], - up: (key) => `@media (min-width:${values[key]}px)`, - }, -}; -``` +### Design tokens in the theme -### Array +You can explore the [System properties](/system/properties/) page to discover how the different CSS (and custom) properties are mapped to the theme keys. -```jsx - - -/** - * Outputs: - * - * padding: 16px; - * @media (min-width: 600px) { - * padding: 24px; - * } - * @media (min-width: 960px) { - * padding: 32px; - * } - */ -``` +### Shorthands -### Object +There are lots of shorthands available for the CSS properties. +These are documented in the next pages, for instance, [the spacing](/system/spacing/). +Here is an example leveraging them: ```jsx - - -/** - * Outputs: - * - * padding: 16px; - * @media (min-width: 600px) { - * padding: 24px; - * } - * @media (min-width: 960px) { - * padding: 32px; - * } - */ + ``` -### Collocation +These shorthands are **optional**, they are great to save time when writing styles but it can be overwhelming to learn new custom APIs. +You might want to skip this part and bet on CSS, it has been standardized for decades, head to the [next section](#superset-of-css). -If you want to group the breakpoint values, you can use the `breakpoints()` helper. +### Superset of CSS -```jsx -import { compose, spacing, palette, breakpoints } from '@material-ui/system'; -import styled from 'styled-components'; - -const Box = styled.div` - ${breakpoints(compose(spacing, palette))} -`; - -; - -/** - * Outputs: - * - * padding: 16px; - * @media (min-width: 600px) { - * padding: 24px; - * } - * @media (min-width: 960px) { - * padding: 32px; - * } - */ -``` +As part of the prop, you can use any regular CSS too: child or pseudo-selectors, media queries, raw CSS values, etc. Here are a few examples: -{{"demo": "pages/system/basics/CollocationApi.js"}} +- Using pseudo selectors: -## Custom style props + ```jsx + + ``` -### `style(options) => style function` +- Using media queries: -Use this helper to create your own style function. + ```jsx + + ``` -Not all CSS properties are supported. -It's possible that you want to support new ones. -It's also possible that you want to change the theme path prefix. +- Using nested selector: -#### Arguments + ```jsx + + ``` -1. `options` (_Object_): +### Responsive values -- `options.prop` (_String_): The prop the style function will be triggered on. -- `options.cssProperty` (_String|Boolean_ [optional]): Defaults to `options.prop`. The CSS property used. - You can disabled this option by providing `false`. When disabled, the property value will be handled as a style object on it's own. It can be used for [rendering variants](#variants). -- `options.themeKey` (_String_ [optional]): The theme path prefix. -- `options.transform` (_Function_ [optional]): Apply a transformation before outputing a CSS value. +If you would like to have responsive values for a CSS property, you can use the breakpoints shorthand syntax. There are two ways of defining the breakpoints: -#### Returns +#### 1. Breakpoints as an object -`style function`: The style function created. +The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Here is the previous example again, using the object syntax. -#### Examples +{{"demo": "pages/system/basics/BreakpointsAsObject.js"}} -You can create a component that supports some CSS grid properties such as `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`. +#### 2. Breakpoints as an array -```jsx -import styled from 'styled-components'; -import { style } from '@material-ui/system'; -import { Box } from '@material-ui/core'; +The second option is to define your breakpoints as an array, from the smallest to the largest breakpoint. -const gridGap = style({ - prop: 'gridGap', - themeKey: 'spacing', -}); +{{"demo": "pages/system/basics/BreakpointsAsArray.js"}} -const Grid = styled(Box)` - ${gridGap} -`; -const example = ( - - ... - -); -``` +> ⚠️ This option is only recommended when the theme has a limited number of breakpoints, e.g. 3.
+> Prefer the object API if you have more breakpoints. For instance, the default theme of Material-UI has 5. -You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function. +You can skip breakpoints with the `null` value: ```jsx -import styled from 'styled-components'; -import { style } from '@material-ui/system'; - -const borderColor = style({ - prop: 'bc', - cssProperty: 'borderColor', - themeKey: 'palette', - transform: (value) => `${value} !important`, -}); - -const Colored = styled.div` - ${borderColor} -`; -const example = ...; +This box has a responsive width. ``` -### `compose(...style functions) => style function` +### Custom breakpoints + +You can also specify your own custom breakpoints, and use them as keys when defining the breakpoints object. Here is an example of how to do that. -Merge multiple style functions into one. +```jsx +import * as React from 'react'; +import Box from '@material-ui/core/Box'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; -#### Returns +const theme = createMuiTheme({ + breakpoints: { + values: { + tablet: 640, + laptop: 1024, + desktop: 1280, + }, + }, +}); -`style function`: The style function created. +export default function CustomBreakpoints() { + return ( + + + This box has a responsive width + + + ); +} +``` -#### Examples +If you are using TypeScript, you will also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module '@material-ui/core/styles/createBreakpoints' { + interface BreakpointOverrides { + xs: false; // removes the `xs` breakpoint + sm: false; + md: false; + lg: false; + xl: false; + tablet: true; // adds the `tablet` breakpoint + laptop: true; + desktop: true; + } +} +``` -```js -import { style, compose } from '@material-ui/system'; +### Theme getter -export const textColor = style({ - prop: 'color', - themeKey: 'palette', -}); +If you wish to use the theme for a CSS property that is not supported natively by the system, you can use a function as the value, in which you can access the theme object. -export const bgcolor = style({ - prop: 'bgcolor', - cssProperty: 'backgroundColor', - themeKey: 'palette', -}); +{{"demo": "pages/system/basics/ValueAsFunction.js"}} -const palette = compose(textColor, bgcolor); -``` +## Implementations -## Variants +The `sx` prop can be used in four different locations: -The `style()` helper can also be used to maps props to style objects in a theme. -In this example, the `variant` prop supports all the keys present in `theme.typography`. +### 1. Core components -{{"demo": "pages/system/basics/Variant.js", "defaultCodeOpen": true}} +All core Material-UI components will support the `sx` prop. -## How it works +### 2. Box -styled-system has done a great job at [explaining how it works](https://github.com/jxnblk/styled-system/blob/master/docs/how-it-works.md#how-it-works). -It can help building a mental model for this "style function" concept. +[`Box`](/components/box/) is a lightweight component that gives access to the `sx` prop, and can be used as a utility component, and as a wrapper for other components. +It renders a `
` element by default. -## Real-world use case +### 3. Custom components -In practice, a Box component can save you a lot of time. -In this example, we demonstrate how to reproduce a Banner component. +In addition to Material-UI components, you can add the `sx` prop to your custom components too, by using the `experimentalStyled` utility from `@material-ui/core/styles`. -{{"demo": "pages/system/basics/RealWorld.js", "bg": true}} +```jsx +import { experimentalStyled as styled } from '@material-ui/core/styles'; -## Prior art +const Div = styled('div')``; +``` -`@material-ui/system` synthesizes ideas & APIs from several different sources: +### 4. Any element with the babel plugin -- [Tachyons](https://tachyons.io/) was one of the first (2014) CSS libraries to promote the [Atomic CSS pattern](https://css-tricks.com/lets-define-exactly-atomic-css/) (or Functional CSS). -- Tachyons was later on (2017) followed by [Tailwind CSS](https://tailwindcss.com/). They have made Atomic CSS more popular. -- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. The way they group their "Helper classes" was used as inspiration. -- In the React world, [Styled System](https://github.com/jxnblk/styled-system) was one of the first (2017) to promote the style functions. - It can be used as a generic Box component replacing the atomic CSS helpers as well as helpers to write new components. -- Large companies such as Pinterest, GitHub, and Segment.io are using the same approach in different flavours: - - [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/) - - [Gestalt Box](https://pinterest.github.io/gestalt/#/Box) - - [Primer Box](https://primer.style/components/docs/Box) -- The actual implementation and the object responsive API was inspired by the [Smooth-UI's system](https://smooth-ui.smooth-code.com/docs-basics-system). +TODO [#23220](https://github.com/mui-org/material-ui/issues/23220). diff --git a/docs/src/pages/system/api/api-de.md b/docs/src/pages/system/properties/properties-de.md similarity index 100% rename from docs/src/pages/system/api/api-de.md rename to docs/src/pages/system/properties/properties-de.md diff --git a/docs/src/pages/system/api/api-es.md b/docs/src/pages/system/properties/properties-es.md similarity index 100% rename from docs/src/pages/system/api/api-es.md rename to docs/src/pages/system/properties/properties-es.md diff --git a/docs/src/pages/system/api/api-fr.md b/docs/src/pages/system/properties/properties-fr.md similarity index 100% rename from docs/src/pages/system/api/api-fr.md rename to docs/src/pages/system/properties/properties-fr.md diff --git a/docs/src/pages/system/api/api-ja.md b/docs/src/pages/system/properties/properties-ja.md similarity index 100% rename from docs/src/pages/system/api/api-ja.md rename to docs/src/pages/system/properties/properties-ja.md diff --git a/docs/src/pages/system/api/api-pt.md b/docs/src/pages/system/properties/properties-pt.md similarity index 100% rename from docs/src/pages/system/api/api-pt.md rename to docs/src/pages/system/properties/properties-pt.md diff --git a/docs/src/pages/system/api/api-ru.md b/docs/src/pages/system/properties/properties-ru.md similarity index 100% rename from docs/src/pages/system/api/api-ru.md rename to docs/src/pages/system/properties/properties-ru.md diff --git a/docs/src/pages/system/api/api-zh.md b/docs/src/pages/system/properties/properties-zh.md similarity index 100% rename from docs/src/pages/system/api/api-zh.md rename to docs/src/pages/system/properties/properties-zh.md diff --git a/docs/src/pages/system/api/api.md b/docs/src/pages/system/properties/properties.md similarity index 99% rename from docs/src/pages/system/api/api.md rename to docs/src/pages/system/properties/properties.md index eaeb225d98a6b2..dd00333256819a 100644 --- a/docs/src/pages/system/api/api.md +++ b/docs/src/pages/system/properties/properties.md @@ -1,6 +1,6 @@ -# API +# Properties -

The API reference of the @material-ui/system package.

+

The properties reference of the @material-ui/system package.

| Group | Import name | Prop | CSS property | Theme key | | :-------------------------------- | :--------------- | :----------------- | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- | diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 5d55c45c7f0107..71abc9e73a3e58 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -212,9 +212,6 @@ "/components/trap-focus": "Trap Focus", "/components/tree-view": "Tree View", "/api-docs": "Component API", - "/styles": "Styles", - "/styles/basics": "Basics", - "/styles/advanced": "Advanced", "/system": "System", "/system/basics": "Basics", "/system/borders": "Borders", @@ -227,6 +224,10 @@ "/system/spacing": "Spacing", "/system/screen-readers": "Screen Readers", "/system/typography": "Typography", + "/system/properties": "Properties", + "/styles": "Styles", + "/styles/basics": "Basics", + "/styles/advanced": "Advanced", "/customization": "Customization", "/customization/theme": "Theme", "/customization/theming": "Theming", diff --git a/test/regressions/index.js b/test/regressions/index.js index 6e74c96d78175b..a768232f7b89f6 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -144,6 +144,9 @@ const blacklist = [ 'docs-production-error', // No components, page for DX 'docs-styles-advanced', // Redudant 'docs-styles-basics/StressTest.png', // Need interaction + 'docs-system-basics/BreakpointsAsArray.png', // Unit tests are enough + 'docs-system-basics/BreakpointsAsObject.png', // Unit tests are enough + 'docs-system-basics/ValueAsFunction.png', // Unit tests are enough 'docs-system-borders', // Unit tests are enough 'docs-system-display', // Unit tests are enough 'docs-system-flexbox', // Unit tests are enough