Merge branch 'next' into migrate/MenuItem

* next: (34 commits) [Tab] Migrate to emotion (mui#24651) [TextField] Migrate Input component to emotion (mui#24638) [ImageList] Migrate ImageListItemBar to emotion (mui#24632) [CircularProgress] Migrate to emotion (mui#24622) [DataTable] Add example in docs for data table (mui#24428) [Card] Migrate CardActionArea to emotion (mui#24636) [core] Fix `next` using stale pages (mui#24635) [List] Migrate ListItemIcon to emotion (mui#24630) [ClickAwayListener] Fix `children` and `onClickAway` types (mui#24565) [docs] Include in docs directive to silence `eslint` erroneous warning (mui#24644) [Fab] Migrate to emotion (mui#24618) [TextField] Migrate FilledInput to emotion (mui#24634) [Card] Migrate CardHeader to emotion (mui#24626) [Card] Migrate CardMedia to emotion (mui#24625) [ImageList] Migrate ImageListItem to emotion (mui#24619) [website] Add vision block (mui#24603) [docs] Add sorting section (mui#24637) [TextField] Prepare removal of labelWidth prop (mui#24595) [Dialog] Migrate DialogTitle to emotion (mui#24623) [ImageList] Migrate to emotion (mui#24615) ...
xs9627 · Jan 27, 2021 · 8324055 · 8324055
2 parents 3d3ac3c + 8c32b4f
commit 8324055
Show file tree

Hide file tree

Showing 299 changed files with 4,250 additions and 1,911 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,5 +1,6 @@
 {
   "buildCommand": "build:codesandbox",
+  "installCommand": "install:codesandbox",
   "packages": [
     "packages/material-ui",
     "packages/material-ui-icons",

diff --git a/.dependabot/config.yml b/.dependabot/config.yml
@@ -22,10 +22,6 @@ update_configs:
           # They sometimes are mergable independently but create a different dependency when merged leading to a changed yarn.lock
           # TODO: Revisit once https://github.com/dependabot/dependabot-core/issues/1190 is resolved.
           dependency_name: '@typescript-eslint/parser'
-      - match:
-          # as of 3.x prevaled code is no longer transpiled
-          dependency_name: 'babel-plugin-preval'
-          version_requirement: '>= 3.0'
       - match:
           # https://github.com/mui-org/material-ui/pull/17604#issuecomment-536262291
           dependency_name: 'core-js'

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,9 +13,6 @@ const forbidCreateStylesMessage =
 
 module.exports = {
   root: true, // So parent files don't get applied
-  globals: {
-    preval: false, // Used in the documentation
-  },
   env: {
     es6: true,
     browser: true,

diff --git a/.github/workflows/ci.yml b/.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 }}
diff --git a/.mocharc.js b/.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': [

diff --git a/CHANGELOG.md b/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/[email protected]`
+
+- <!-- 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/[email protected]`
+
+- <!-- 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/[email protected]`
+
+- <!-- 13 --> [styled-engine] Rename StylesProvider to StyledEngineProvider (#24429) @mnajdova
+
+### `@material-ui/[email protected]`
+
+- <!-- 44 --> [system] Fix handling of null-ish values (#24530) @oliviertassinari
+
+### `@material-ui/[email protected]`
+
+- <!-- 08 --> [unstyled] Convert composeClasses to TypeScript (#24396) @eps1lon
+
+### `@material-ui/[email protected]`
+
+- <!-- 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_

diff --git a/benchmark/package.json b/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",

diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -52,7 +52,6 @@ module.exports = {
     'babel-plugin-optimize-clsx',
     // for IE11 support
     '@babel/plugin-transform-object-assign',
-    'babel-plugin-preval',
     [
       'babel-plugin-module-resolver',
       {

diff --git a/docs/next.config.js b/docs/next.config.js
@@ -72,7 +72,9 @@ module.exports = {
 
       config.externals = [
         (context, request, callback) => {
-          const hasDependencyOnRepoPackages = ['notistack'].includes(request);
+          const hasDependencyOnRepoPackages = ['notistack', '@material-ui/data-grid'].includes(
+            request,
+          );
 
           if (hasDependencyOnRepoPackages) {
             return callback(null);
@@ -107,7 +109,7 @@ module.exports = {
           // transpile 3rd party packages with dependencies in this repository
           {
             test: /\.(js|mjs|jsx)$/,
-            include: /node_modules(\/|\\)notistack/,
+            include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)data-grid)/,
             use: {
               loader: 'babel-loader',
               options: {

diff --git a/docs/package.json b/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,16 +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/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",
+    "@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",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/css-mediaquery": "^0.1.0",
@@ -59,7 +60,6 @@
     "autosuggest-highlight": "^3.1.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-optimize-clsx": "^2.4.1",
-    "babel-plugin-preval": "^2.0.0",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "clean-css": "^4.1.11",
@@ -125,7 +125,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"
   }

diff --git a/docs/packages/feedback/package.json b/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",

diff --git a/docs/pages/api-docs/bottom-navigation-action.json b/docs/pages/api-docs/bottom-navigation-action.json
@@ -5,6 +5,7 @@
     "icon": { "type": { "name": "node" } },
     "label": { "type": { "name": "node" } },
     "showLabel": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "any" } }
   },
   "name": "BottomNavigationAction",
@@ -18,6 +19,6 @@
   "filename": "/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
   "demos": "<ul><li><a href=\"/components/bottom-navigation/\">Bottom Navigation</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/pages/api-docs/bottom-navigation.json b/docs/pages/api-docs/bottom-navigation.json
@@ -5,6 +5,7 @@
     "component": { "type": { "name": "elementType" } },
     "onChange": { "type": { "name": "func" } },
     "showLabels": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "any" } }
   },
   "name": "BottomNavigation",
@@ -14,6 +15,6 @@
   "filename": "/packages/material-ui/src/BottomNavigation/BottomNavigation.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/bottom-navigation/\">Bottom Navigation</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/pages/api-docs/card-action-area.json b/docs/pages/api-docs/card-action-area.json
@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "CardActionArea",
   "styles": {
@@ -14,6 +15,6 @@
   "filename": "/packages/material-ui/src/CardActionArea/CardActionArea.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
   "demos": "<ul><li><a href=\"/components/cards/\">Cards</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/pages/api-docs/card-header.json b/docs/pages/api-docs/card-header.json
@@ -7,6 +7,7 @@
     "disableTypography": { "type": { "name": "bool" } },
     "subheader": { "type": { "name": "node" } },
     "subheaderTypographyProps": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } },
     "title": { "type": { "name": "node" } },
     "titleTypographyProps": { "type": { "name": "object" } }
   },
@@ -21,6 +22,6 @@
   "filename": "/packages/material-ui/src/CardHeader/CardHeader.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/cards/\">Cards</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/pages/api-docs/card-media.json b/docs/pages/api-docs/card-media.json
@@ -4,7 +4,8 @@
     "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "image": { "type": { "name": "string" } },
-    "src": { "type": { "name": "string" } }
+    "src": { "type": { "name": "string" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "CardMedia",
   "styles": { "classes": ["root", "media", "img"], "globalClasses": {}, "name": "MuiCardMedia" },
@@ -13,6 +14,6 @@
   "filename": "/packages/material-ui/src/CardMedia/CardMedia.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/cards/\">Cards</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/pages/api-docs/circular-progress.json b/docs/pages/api-docs/circular-progress.json
@@ -13,6 +13,7 @@
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "40"
     },
+    "sx": { "type": { "name": "object" } },
     "thickness": { "type": { "name": "number" }, "default": "3.6" },
     "value": { "type": { "name": "number" }, "default": "0" },
     "variant": {
@@ -42,6 +43,6 @@
   "filename": "/packages/material-ui/src/CircularProgress/CircularProgress.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/progress/\">Progress</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }