Resolve conflicts

.codesandbox/ci.json

@@ -1,5 +1,6 @@
 {
   "buildCommand": "build:codesandbox",
+  "installCommand": "install:codesandbox",
   "packages": [
     "packages/material-ui",
     "packages/material-ui-icons",

.github/workflows/ci.yml

@@ -14,6 +14,9 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - uses: actions/checkout@v2
+        with:
+          # fetch all tags which are required for `yarn release:changelog`
+          fetch-depth: 0
       - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
@@ -23,3 +26,6 @@ jobs:
           # Don't need playwright in this job
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
       - run: yarn release:build
+      - run: yarn release:changelog
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.mocharc.js

@@ -8,7 +8,7 @@ module.exports = {
     'docs/.next/**',
   ],
   recursive: true,
-  timeout: (process.env.CIRCLECI === 'true' ? 3 : 2) * 1000, // Circle CI has low-performance CPUs.
+  timeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
   require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')],
   'watch-ignore': [

.stylelintrc.js

@@ -1,6 +1,11 @@
 module.exports = {
   processors: ['stylelint-processor-styled-components'],
   extends: 'stylelint-config-standard',
+  ignoreFiles: [
+    // TypeScript declaration files contain no styles.
+    // Stylelint is also reporting parseError on `docs/types/react-docgen.d.ts`.
+    '**/*.d.ts',
+  ],
   rules: {
     'value-no-vendor-prefix': true,
     'property-no-vendor-prefix': true,

CHANGELOG.md

@@ -1,5 +1,130 @@
 ### [Versions](https://material-ui.com/versions/)
 
+## 5.0.0-alpha.24
+
+<!-- generated comparing v5.0.0-alpha.23..next -->
+
+_Jan 26, 2021_
+
+Big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
+
+- 👩‍🎤 Convert 31 components to emotion. Around 40% of the components have been migrated so far thanks to the help of the community.
+- 🐛 Fix two long-standing issues with the Grid. Solve the horizontal scrollbar as well as dimensions when nesting (#24332) @greguintow.
+- 📚 Fix various display issues on API documentation pages (#24526, #24503, #24504. #24517, #24417).
+- 📐 Add a subset of the system as flatten props on the CSS utility components (`Grid` and `Box` so far, `Typography` and `Stack` coming later) (#24485, #24499) @mnajdova.
+
+  ```jsx
+  <Box m={2}>
+  ```
+
+### `@material-ui/core@5.0.0-alpha.24`
+
+- <!-- 85 --> [Dialog] Migrate DialogActions to emotion (#24613) @vicasas
+- <!-- 84 --> [Toolbar] Migrate to emotion (#24567) @natac13
+- <!-- 83 --> [Hidden] Fix unsupported props warning when sx prop is used (#24624) @mnajdova
+- <!-- 82 --> [List] Migrate ListItemText to emotion (#24602) @natac13
+- <!-- 80 --> [List] Migrate ListItemSecondaryAction to emotion (#24593) @xs9627
+- <!-- 79 --> [BottomNavigation] Migrate to emotion (#24556) @vinyldarkscratch
+- <!-- 77 --> [CardActions] Fix wrong classes export name (#24609) @mnajdova
+- <!-- 76 --> [Card] Migrate CardContent to emotion (#24600) @vicasas
+- <!-- 75 --> [Card] Migrate to emotion (#24597) @povilass
+- <!-- 74 --> [TextField] Migrate InputBase to emotion (#24555) @duganbrett
+- <!-- 73 --> [Accordion] Allow to disable gutter/spacing (#24532) @TimonPllkrn
+- <!-- 72 --> [List] Migrate to emotion (#24560) @vinyldarkscratch
+- <!-- 71 --> [Card] Migrate CardActions to emotion (#24604) @vicasas
+- <!-- 69 --> [List] Migrate ListSubheader to emotion (#24561) @vinyldarkscratch
+- <!-- 68 --> [Breadcrumbs] Migrate to emotion (#24522) @vinyldarkscratch
+- <!-- 67 --> [Divider] Migrate to emotion (#24558) @vinyldarkscratch
+- <!-- 66 --> [Switch] Migrate SwitchBase to emotion (#24552) @vinyldarkscratch
+- <!-- 65 --> [Hidden] Migrate to emotion (#24544) @vinyldarkscratch
+- <!-- 64 --> [List] Migrate ListItem to emotion (#24543) @xs9627
+- <!-- 62 --> [TextField] Fix Google Translate zero-width space issue (#24563) @d3mp
+- <!-- 61 --> [Table] Separate classes for different labels (#24568) @tonysepia
+- <!-- 58 --> [Accordion] Migrate AccordionSummary to emotion (#24540) @vinyldarkscratch
+- <!-- 57 --> [IconButton] Migrate to emotion (#24542) @vinyldarkscratch
+- <!-- 54 --> [Accordion] Migrate AccordionActions to emotion (#24538) @vinyldarkscratch
+- <!-- 53 --> [Accordion] Migrate AccordionDetails to emotion (#24539) @vinyldarkscratch
+- <!-- 50 --> [Link] Migrate to emotion (#24529) @praveenkumar-kalidass
+- <!-- 49 --> [Accordion] Migrate to emotion (#24518) @vinyldarkscratch
+- <!-- 46 --> [Backdrop] Migrate to emotion (#24523) @vinyldarkscratch
+- <!-- 39 --> [Grid] Add system props (#24499) @mnajdova
+- <!-- 38 --> [Icon] Migrate to emotion (#24516) @vinyldarkscratch
+- <!-- 36 --> [Collapse] Migrate to emotion (#24501) @vinyldarkscratch
+- <!-- 33 --> [SvgIcon] Migrate to emotion (#24506) @oliviertassinari
+- <!-- 32 --> [Avatar] Migrate AvatarGroup to emotion (#24452) @praveenkumar-kalidass
+- <!-- 31 --> [Box] Add back system props (#24485) @mnajdova
+- <!-- 30 --> [Alert] Migrate AlertTitle to emotion (#24448) @povilass
+- <!-- 26 --> [Alert] Migrate to emotion (#24442) @kutnickclose
+- <!-- 21 --> [l10n] Improve Hebrew translation (#24449) @eladmotola
+- <!-- 19 --> [Checkbox][Switch] Document defaultChecked (#24446) @praveenkumar-kalidass
+- <!-- 18 --> [AppBar] Migrate to emotion (#24439) @povilass
+- <!-- 16 --> [l10n] Improve German translation (#24436) @lukaselmer
+- <!-- 15 --> [Button][Badge] Support custom colors and sizes (#24408) @mnajdova
+- <!-- 10 --> [Grid] Fix horizontal scrollbar and nested dimensions (#24332) @greguintow
+- <!-- 07 --> [Grid] Migrate to emotion (#24395) @mnajdova
+- <!-- 06 --> [Badge] Fix TS custom variants (#24407) @mnajdova
+
+### `@material-ui/lab@5.0.0-alpha.24`
+
+- <!-- 48 --> [DatePicker] Remove unnecessary wrapping dom node (#24533) @mxsph
+- <!-- 12 --> [DateRangePicker] Remove variant prop override for Textfield (#24433) @praveenkumar-kalidass
+- <!-- 03 --> [lab] Reflect draft pattern of picker value in implementation (#24367) @eps1lon
+
+### `@material-ui/styled-engine@5.0.0-alpha.24`
+
+- <!-- 13 --> [styled-engine] Rename StylesProvider to StyledEngineProvider (#24429) @mnajdova
+
+### `@material-ui/system@5.0.0-alpha.24`
+
+- <!-- 44 --> [system] Fix handling of null-ish values (#24530) @oliviertassinari
+
+### `@material-ui/unstyled@5.0.0-alpha.24`
+
+- <!-- 08 --> [unstyled] Convert composeClasses to TypeScript (#24396) @eps1lon
+
+### `@material-ui/utils@5.0.0-alpha.24`
+
+- <!-- 60 --> [utils] `useEventCallback` `args` defaults to `unknown[]` (#24564) @eps1lon
+- <!-- 11 --> [utils] Fix requirePropFactory to merge validators (#24423) @mnajdova
+
+### docs
+
+- <!-- 86 --> [examples] Patch preact example not working (#24616)
+- <!-- 78 --> [docs] Add missing newline in component JSDOC (#24610) @eps1lon
+- <!-- 70 --> [docs] Add API of picker components (#24497) @eps1lon
+- <!-- 63 --> [examples] Add `locale` prop to the Nextjs Link component (#24596) @CyanoFresh
+- <!-- 52 --> [docs] List required props first in /api/* (#24526) @eps1lon
+- <!-- 45 --> [docs] Mention the system props when available in the API pages (#24503) @mnajdova
+- <!-- 43 --> [docs] Improve system properties page (#24524) @mnajdova
+- <!-- 42 --> [docs] Fix malformed component API description (#24504) @eps1lon
+- <!-- 41 --> [docs] Fix ToC "Component name" fragment link on /api/* (#24517) @eps1lon
+- <!-- 40 --> [docs] Fix ToC on /api pages linking to api-docs (#24515) @eps1lon
+- <!-- 37 --> [docs] Add comment explaining specificity bump on Select (#24509) @KarimMokhtar
+- <!-- 28 --> [docs] Compute spreadable from tests (#24490) @eps1lon
+- <!-- 27 --> [docs] Fix label bug in stepper vertical demo (#24491) @artola
+- <!-- 20 --> [docs] Update Divjoy URL (#24447) @mbrookes
+- <!-- 17 --> [docs] Improve packages description (#24330) @oliviertassinari
+- <!-- 14 --> [docs] Fix content-layout-shift (#24418) @oliviertassinari
+- <!-- 09 --> [docs] Document default values of external props (#24417) @eps1lon
+- <!-- 02 --> [docs] Update in-house ads (#24410) @mbrookes @ewldev
+
+### core
+
+- <!-- 87 --> [core] Skip downloading browser binaries in codesandbox/ci (#24628) @eps1lon
+- <!-- 81 --> [core] Batch small changes (#24599) @oliviertassinari
+- <!-- 59 --> [test] Simplify DatePicker tests (#24545) @eps1lon
+- <!-- 51 --> [core] Improve pseudo classes overrides error (#24535) @mnajdova
+- <!-- 35 --> [core] Fix styleProps to always contain all props (#24505) @mnajdova
+- <!-- 34 --> [test] Fix AvatarGroup failing test (#24512) @mnajdova
+- <!-- 29 --> [pickers] Sort tests (#24481) @eps1lon
+- <!-- 25 --> [test] Split tests in describeConformanceV5 to isolate them (#24479) @mnajdova
+- <!-- 24 --> [core] Do not forward classes prop by default in experimentalStyled (#24451) @mnajdova
+- <!-- 23 --> [core] Pass styleProps on all slots in the styled() components (#24454) @mnajdova
+- <!-- 22 --> [core] Batch small changes (#24445) @oliviertassinari
+- <!-- 01 --> [core] Normalize generating declaration files (#24411) @eps1lon
+
+All contributors of this release in alphabetical order: @artola, @CyanoFresh, @d3mp, @duganbrett, @eladmotola, @eps1lon, @ewldev, @greguintow, @KarimMokhtar, @kutnickclose, @lukaselmer, @mbrookes, @mnajdova, @mxsph, @natac13, @oliviertassinari, @povilass, @praveenkumar-kalidass, @TimonPllkrn, @tonysepia, @vicasas, @vinyldarkscratch, @xs9627
+
 ## 5.0.0-alpha.23
 
 ###### _Jan 14, 2021_

README.md

@@ -6,7 +6,7 @@
 
 <div align="center">
 
-[React](https://reactjs.org/) components for faster and simpler web development. Build your own design system, or start with [Material Design](https://material.io/design/introduction/).
+Quickly build beautiful [React](https://reactjs.org/) apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with [Material Design](https://material.io/design/introduction/).
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui-org/material-ui/blob/master/LICENSE)
 [![npm latest package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core)

benchmark/browser/README.md

@@ -16,29 +16,29 @@ For compareable results ask a maintainer to approve the CircleCI job `benchmark`
 
 ```
 noop (baseline):
-  05.82 ±00.29ms
+  06.13 ±00.83ms
 React primitives:
-  42.62 ±03.55ms
+  61.38 ±51.51ms
 React components:
-  128 ±4%
+  100 ±6%
 Styled Material-UI:
-  192 ±8%
+  160 ±11%
 Styled emotion:
-  179 ±8%
+  144 ±7%
 Styled SC:
-  224 ±13%
+  170 ±9%
 makeStyles:
-  184 ±9%
+  149 ±5%
 Box Baseline:
-  213 ±11%
+  170 ±12%
 Box Material-UI:
-  501 ±23%
+  402 ±14%
 Box Theme-UI:
-  447 ±20%
+  354 ±16%
 Box Chakra-UI:
-  364 ±17%
+  268 ±14%
 styled-components Box + @material-ui/system:
-  506 ±22%
+  373 ±13%
 styled-components Box + styled-system:
-  388 ±12%
+  298 ±13%
 ```

benchmark/package.json

@@ -1,6 +1,6 @@
 {
   "name": "benchmark",
-  "version": "5.0.0-alpha.23",
+  "version": "5.0.0-alpha.24",
   "private": "true",
   "scripts": {
     "browser": "yarn webpack --config browser/webpack.config.js && node browser/scripts/benchmark.js",
@@ -14,9 +14,9 @@
     "@chakra-ui/system": "^1.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@material-ui/core": "5.0.0-alpha.23",
-    "@material-ui/styles": "5.0.0-alpha.23",
-    "@material-ui/system": "5.0.0-alpha.23",
+    "@material-ui/core": "5.0.0-alpha.24",
+    "@material-ui/styles": "5.0.0-alpha.24",
+    "@material-ui/system": "5.0.0-alpha.24",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.6.1",

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "5.0.0-alpha.23",
+  "version": "5.0.0-alpha.24",
   "private": true,
   "author": "Material-UI Team",
   "license": "MIT",
@@ -29,17 +29,17 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@material-ui/core": "5.0.0-alpha.23",
+    "@material-ui/core": "5.0.0-alpha.24",
+    "@material-ui/docs": "5.0.0-alpha.24",
+    "@material-ui/icons": "5.0.0-alpha.24",
+    "@material-ui/lab": "5.0.0-alpha.24",
+    "@material-ui/styled-engine": "5.0.0-alpha.24",
+    "@material-ui/styled-engine-sc": "5.0.0-alpha.24",
+    "@material-ui/styles": "5.0.0-alpha.24",
+    "@material-ui/system": "5.0.0-alpha.24",
+    "@material-ui/types": "5.1.6",
+    "@material-ui/unstyled": "5.0.0-alpha.24",
     "@material-ui/data-grid": "^4.0.0-alpha.18",
-    "@material-ui/docs": "5.0.0-alpha.23",
-    "@material-ui/icons": "5.0.0-alpha.23",
-    "@material-ui/lab": "5.0.0-alpha.23",
-    "@material-ui/styled-engine": "5.0.0-alpha.23",
-    "@material-ui/styled-engine-sc": "5.0.0-alpha.23",
-    "@material-ui/styles": "5.0.0-alpha.23",
-    "@material-ui/system": "5.0.0-alpha.23",
-    "@material-ui/types": "5.1.5",
-    "@material-ui/unstyled": "5.0.0-alpha.23",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/css-mediaquery": "^0.1.0",
@@ -110,7 +110,7 @@
     "react-virtualized": "^9.21.1",
     "react-window": "^1.8.5",
     "recast": "^0.20.2",
-    "recharts": "^1.6.2",
+    "recharts": "^2.0.3",
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
     "rimraf": "^3.0.0",
@@ -126,7 +126,7 @@
     "@babel/preset-typescript": "^7.7.4",
     "@types/marked": "^1.2.1",
     "@types/recharts": "^1.8.14",
-    "babel-plugin-unwrap-createstyles": "5.0.0-alpha.23",
+    "babel-plugin-unwrap-createstyles": "5.0.0-alpha.24",
     "cross-fetch": "^3.0.5",
     "gm": "^1.23.0"
   }

docs/packages/feedback/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedback",
-  "version": "5.0.0-alpha.23",
+  "version": "5.0.0-alpha.24",
   "description": "Store and retrieve page ratings and comments",
   "main": "./index.js",
   "license": "MIT",

docs/pages/_app.js

@@ -11,7 +11,7 @@ import { create } from 'jss';
 import jssRtl from 'jss-rtl';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
-import { StylesProvider as CoreStylesProvider } from '@material-ui/core';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -21,7 +21,7 @@ import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS, LANGUAGES } from 'docs/src/modules/constants';
 import { useUserLanguage } from 'docs/src/modules/utils/i18n';
-import StyledEngineProvider, { cacheLtr } from 'docs/src/modules/utils/StyledEngineProvider';
+import DocsStyledEngineProvider, { cacheLtr } from 'docs/src/modules/utils/StyledEngineProvider';
 
 export { cacheLtr };
 
@@ -320,13 +320,13 @@ function AppWrapper(props) {
       </NextHead>
       <ReduxProvider store={redux}>
         <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-          <CoreStylesProvider injectFirst>
+          <StyledEngineProvider injectFirst>
             <StylesProvider jss={jss}>
               <ThemeProvider>
-                <StyledEngineProvider>{children}</StyledEngineProvider>
+                <DocsStyledEngineProvider>{children}</DocsStyledEngineProvider>
               </ThemeProvider>
             </StylesProvider>
-          </CoreStylesProvider>
+          </StyledEngineProvider>
         </PageContext.Provider>
         <LanguageNegotiation />
         <Analytics />

docs/pages/api-docs/accordion-actions.json

@@ -2,7 +2,8 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "disableSpacing": { "type": { "name": "bool" } }
+    "disableSpacing": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "AccordionActions",
   "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiAccordionActions" },
@@ -11,5 +12,6 @@
   "filename": "/packages/material-ui/src/AccordionActions/AccordionActions.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true,
+  "cssComponent": false
 }

docs/pages/api-docs/accordion-details.json

@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "AccordionDetails",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiAccordionDetails" },
@@ -10,5 +11,6 @@
   "filename": "/packages/material-ui/src/AccordionDetails/AccordionDetails.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true,
+  "cssComponent": false
 }