Merge branch 'next' into migrate/List

Author: mnajdova

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

@@ -3,7 +3,8 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "expandIcon": { "type": { "name": "node" } },
-    "focusVisibleClassName": { "type": { "name": "string" } }
+    "focusVisibleClassName": { "type": { "name": "string" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "AccordionSummary",
   "styles": {
@@ -20,6 +21,6 @@
   "filename": "/packages/material-ui/src/AccordionSummary/AccordionSummary.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
   "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/breadcrumbs.json

@@ -7,7 +7,8 @@
     "itemsAfterCollapse": { "type": { "name": "number" }, "default": "1" },
     "itemsBeforeCollapse": { "type": { "name": "number" }, "default": "1" },
     "maxItems": { "type": { "name": "number" }, "default": "8" },
-    "separator": { "type": { "name": "node" }, "default": "'/'" }
+    "separator": { "type": { "name": "node" }, "default": "'/'" },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Breadcrumbs",
   "styles": {
@@ -20,6 +21,6 @@
   "filename": "/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/breadcrumbs/\">Breadcrumbs</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/divider.json

@@ -10,6 +10,7 @@
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "default": "'horizontal'"
     },
+    "sx": { "type": { "name": "object" } },
     "textAlign": {
       "type": {
         "name": "enum",
@@ -51,6 +52,6 @@
   "filename": "/packages/material-ui/src/Divider/Divider.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/dividers/\">Dividers</a></li>\n<li><a href=\"/components/lists/\">Lists</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/icon-button.json

@@ -22,7 +22,8 @@
     "size": {
       "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
       "default": "'medium'"
-    }
+    },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "IconButton",
   "styles": {
@@ -45,6 +46,6 @@
   "filename": "/packages/material-ui/src/IconButton/IconButton.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
   "demos": "<ul><li><a href=\"/components/buttons/\">Buttons</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/list-item.json

@@ -18,7 +18,8 @@
     "disabled": { "type": { "name": "bool" } },
     "disableGutters": { "type": { "name": "bool" } },
     "divider": { "type": { "name": "bool" } },
-    "selected": { "type": { "name": "bool" } }
+    "selected": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "ListItem",
   "styles": {
@@ -47,6 +48,6 @@
   "filename": "/packages/material-ui/src/ListItem/ListItem.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/lists/\">Lists</a></li>\n<li><a href=\"/components/transfer-list/\">Transfer List</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/list-subheader.json

@@ -12,7 +12,8 @@
     "component": { "type": { "name": "elementType" } },
     "disableGutters": { "type": { "name": "bool" } },
     "disableSticky": { "type": { "name": "bool" } },
-    "inset": { "type": { "name": "bool" } }
+    "inset": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "ListSubheader",
   "styles": {
@@ -25,6 +26,6 @@
   "filename": "/packages/material-ui/src/ListSubheader/ListSubheader.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/lists/\">Lists</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/table-pagination.json

@@ -36,12 +36,13 @@
       "root",
       "toolbar",
       "spacer",
-      "caption",
+      "selectLabel",
       "selectRoot",
       "select",
       "selectIcon",
       "input",
       "menuItem",
+      "displayedRows",
       "actions"
     ],
     "globalClasses": {},

docs/src/modules/components/Link.tsx

@@ -16,7 +16,18 @@ interface NextLinkComposedProps
 
 export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
-    const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, ...other } = props;
+    const {
+      to,
+      linkAs,
+      href,
+      replace,
+      scroll,
+      passHref,
+      shallow,
+      prefetch,
+      locale,
+      ...other
+    } = props;
 
     return (
       <NextLink
@@ -27,6 +38,7 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
         scroll={scroll}
         shallow={shallow}
         passHref={passHref}
+        locale={locale}
       >
         <a ref={ref} {...other} />
       </NextLink>

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -1078,6 +1078,15 @@ As the core components use emotion as a styled engine, the props used by emotion
   + onPageChange={()=>{}}
   ```
 
+- Separate classes for different table pagination labels. This allows simpler customizations.
+
+  ```diff
+  <TablePagination
+  - classes={{ caption: 'foo' }}
+  + classes={{ selectLabel: 'foo', displayedRows: 'foo' }}
+  />
+  ```
+
 ### Tabs
 
 - TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.

docs/translations/api-docs/accordion-summary/accordion-summary.json

@@ -4,7 +4,8 @@
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "expandIcon": "The icon to display as the expand indicator.",
-    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/master/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
+    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/master/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },