Merge branch 'next' into feat/slider-emotion

CHANGELOG.md

@@ -1,5 +1,144 @@
 ### [Versions](https://material-ui.com/versions/)
 
+## 5.0.0-alpha.10
+
+###### _Sep 15, 2020_
+
+Big thanks to the 16 contributors who made this release possible.
+Here are some highlights ✨:
+
+- Keep working on the breaking changes before v5-beta.
+  As always, you should find a clear and simple upgrade path for each of them.
+- And many more 🐛 bug fixes and 📚 improvements.
+
+### `@material-ui/[email protected]`
+
+#### Breaking changes
+
+- [Accordion] Normalize focusVisible logic (#22567) @oliviertassinari
+  Rename `focused` to `focusVisible` for consistency with the other components:
+
+  ```diff
+  <Accordion
+    classes={{
+  -   focused: 'custom-focus-visible-classname',
+  +   focusVisible: 'custom-focus-visible-classname',
+    }}
+  />
+  ```
+
+- [Stepper] Remove Paper and built-in padding (#22564) @mbrookes
+  The root component (Paper) was replaced with a `<div>`. Stepper no longer has elevation, nor inherits Paper's props. This change is meant to encourage composition.
+
+  ```diff
+  -<Stepper elevation={2}>
+  -  <Step>
+  -    <StepLabel>Hello world</StepLabel>
+  -  </Step>
+  -</Stepper>
+  +<Paper square elevation={2}>
+  +  <Stepper>
+  +    <Step>
+  +      <StepLabel>Hello world</StepLabel>
+  +    </Step>
+  +  </Stepper>
+  +<Paper>
+  ```
+
+  Remove the built-in 24px padding for consistency with the other components that avoid reserving space anytime it's possible.
+
+  ```diff
+  -<Stepper>
+  -  <Step>
+  -    <StepLabel>Hello world</StepLabel>
+  -  </Step>
+  -</Stepper>
+  +<Stepper style={{ padding: 24 }}>
+  +  <Step>
+  +    <StepLabel>Hello world</StepLabel>
+  +  </Step>
+  +</Stepper>
+  ```
+
+- [theme] Always return default spacing value with px units (#22552) @mbrookes
+
+  `theme.spacing` now returns single values with px units by default.
+  This change improves the integration with styled-components & emotion (with the CSS template strings syntax).
+
+  Before:
+
+  ```
+  theme.spacing(2) => 16
+  ```
+
+  After:
+
+  ```
+  theme.spacing(2) => '16px'
+  ```
+
+  You can restore the previous behavior with:
+
+  ```diff
+  -const theme = createMuiTheme();
+  +const theme = createMuiTheme({
+  +  spacing: x => x * 8,
+  +});
+  ```
+
+- [theme] Remove palette.text.hint key (#22537) @mbrookes
+
+  The `theme.palette.text.hint` key was available but unused in Material-UI v4 components.
+  You can use `adaptV4Theme()` to restore the previous behavior.
+
+#### Changes
+
+- [BottomNavigation] onClick does not fire if tapped while scrolling (#22524) @EliasJorgensen
+- [Button] Remove dead code (#22566) @oliviertassinari
+- [Chip] Fix focus visible style (#22430) @alexmotoc
+- [ImageList] Refactor using CSS grid & React context (#22395) @mbrookes
+- [Slider] Improve integration with form libraries (#22548) @NoNonsense126
+- [StepIcon] Add className in render SvgIcon (#22559) @ZouYouShun
+- [SwipeableDrawer] Avoid blocking events (#22525) @JadRizk
+- [theme] Support spacing and border radius with CSS unit (#22530) @madmanwithabike
+- [theme] Fix theme object global leak (#22517) @eps1lon
+- [theme] Increase usage of the disabled design tokens (#22570) @LorenzHenk
+
+### `@material-ui/[email protected]`
+
+#### Breaking changes
+
+- [Rating] Use different shape for empty and filled icons (#22554) @oliviertassinari
+  Change the default empty icon to improve accessibility (1.4.1 WCAG 2.1).
+  If you have a custom `icon` prop but no `emptyIcon` prop, you can restore the previous behavior with:
+
+  ```diff
+  <Rating
+    icon={customIcon}
+  + emptyIcon={null}
+  />
+  ```
+
+#### Changes
+
+- [Autocomplete] Improve TypeScript in the Google Maps demo (#22555) @L-U-C-K-Y
+- [Rating] Explain some styles in code comments (#22571) @eps1lon
+
+### Docs
+
+- [docs] Improve Font Awesome integration (#22496) @chrislambe
+- [docs] Clarify SSG acronym in Next.js example (#22558) @leerob
+- [docs] Add redirection for links published on npm (#22575) @oliviertassinari
+- [docs] Add LightyearVPN to showcase (#22568) @lightyearvpn
+- [docs] Fix typo, extra 'you' (#22560) @jedsmit
+- [docs] Option to disable ads (#22574) @oliviertassinari
+
+### Core
+
+- [core] Remove usage of deprecated event.keyCode (#22569) @oliviertassinari
+- [core] Remove references to other objects from created theme (#22523) @eps1lon
+- [core] Batch small changes (#22565) @oliviertassinari
+
 ## 5.0.0-alpha.9
 
 ###### _Sep 6, 2020_

docs/next.config.js

@@ -33,9 +33,11 @@ module.exports = {
     const plugins = config.plugins.concat([
       new webpack.DefinePlugin({
         'process.env': {
+          COMMIT_REF: JSON.stringify(process.env.COMMIT_REF),
           ENABLE_AD: JSON.stringify(process.env.ENABLE_AD),
           GITHUB_AUTH: JSON.stringify(process.env.GITHUB_AUTH),
           LIB_VERSION: JSON.stringify(pkg.version),
+          PULL_REQUEST: JSON.stringify(process.env.PULL_REQUEST === 'true'),
           REACT_MODE: JSON.stringify(reactMode),
         },
       }),

docs/pages/api-docs/autocomplete.md

@@ -82,7 +82,7 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat
 | <span class="prop-name">popupIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;ArrowDropDownIcon /></span> | The icon to display in place of the default popup icon. |
 | <span class="prop-name">renderGroup</span> | <span class="prop-type">func</span> |  | Render the group.<br><br>**Signature:**<br>`function(option: any) => ReactNode`<br>*option:* The group to render. |
 | <span class="prop-name required">renderInput<abbr title="required">*</abbr></span> | <span class="prop-type">func</span> |  | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br> |
-| <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: T, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |
+| <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(props: object, option: T, state: object) => ReactNode`<br>*props:* The props to apply on the li element.<br>*option:* The option to render.<br>*state:* The state of the component. |
 | <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> |  | Render the selected value.<br><br>**Signature:**<br>`function(value: T[], getTagProps: function) => ReactNode`<br>*value:* The `value` provided to the component.<br>*getTagProps:* A tag props getter. |
 | <span class="prop-name">selectOnFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">!props.freeSolo</span> | If `true`, the input's text will be selected on focus. It helps the user clear the selected value. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the autocomplete. |

docs/pages/api-docs/chip.md

@@ -40,7 +40,7 @@ The `MuiChip` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">label</span> | <span class="prop-type">node</span> |  | The content of the label. |
 | <span class="prop-name">onDelete</span> | <span class="prop-type">func</span> |  | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the chip. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'outlined'</span> | <span class="prop-default">'default'</span> | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;string</span> | <span class="prop-default">'default'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/rating.md

@@ -37,7 +37,7 @@ The `MuiRating` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;Star fontSize="inherit" /></span> | The icon to display. |
 | <span class="prop-name">IconContainerComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">function IconContainer(props) {  const { value, ...other } = props;  return &lt;span {...other} />;}</span> | The component containing the icon. |
 | <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | Maximum rating. |
-| <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | The name attribute of the radio `input` elements. If `readOnly` is false, the prop is required, this input name`should be unique within the parent form. |
+| <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | The name attribute of the radio `input` elements. This input `name` should be unique within the page. Being unique within a form is insufficient since the `name` is used to generated IDs. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: number) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
 | <span class="prop-name">onChangeActive</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the hover state changes.<br><br>**Signature:**<br>`function(event: object, value: number) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
 | <span class="prop-name">precision</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The minimum increment value change allowed. |
@@ -60,8 +60,8 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the root element if keyboard focused.
 | <span class="prop-name">visuallyHidden</span> | <span class="prop-name">.MuiRating-visuallyHidden</span> | Visually hide an element.
-| <span class="prop-name">pristine</span> | <span class="prop-name">.MuiRating-pristine</span> | Styles applied to the pristine label.
 | <span class="prop-name">label</span> | <span class="prop-name">.MuiRating-label</span> | Styles applied to the label elements.
+| <span class="prop-name">labelEmptyValueActive</span> | <span class="prop-name">.MuiRating-labelEmptyValueActive</span> | Styles applied to the label of the "no value" input when it is active.
 | <span class="prop-name">icon</span> | <span class="prop-name">.MuiRating-icon</span> | Styles applied to the icon wrapping elements.
 | <span class="prop-name">iconEmpty</span> | <span class="prop-name">.MuiRating-iconEmpty</span> | Styles applied to the icon wrapping elements when empty.
 | <span class="prop-name">iconFilled</span> | <span class="prop-name">.MuiRating-iconFilled</span> | Styles applied to the icon wrapping elements when filled.

docs/pages/blog/marija-najdova-joining.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'blog/marija-najdova-joining';
+const requireRaw = require.context('!raw-loader!./', false, /marija-najdova-joining\.md$/);
+
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/blog/marija-najdova-joining.md

@@ -0,0 +1,18 @@
+---
+title: Marija Najdova joins Material-UI
+description: We are excited to share that Marija Najdova has joined Material-UI. She has started this week full-time and is now part of the community team.
+date: 2020-09-15T00:00:00.000Z
+authors: ['oliviertassinari']
+---
+
+We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined Material-UI. She has started this week full-time, and is now part of the community team.
+
+Before joining Material-UI, Marija worked on the React implementation of [Fluent UI](https://www.microsoft.com/design/fluent/) at Microsoft. She's passionate about React, design systems, and component driven development. At Microsoft, as part of the Fluent UI core team since 2018, she was responsible for the icons, animations and various theme related features.
+
+Marija is off to a running start, having made important changes happen during her free time, even before starting! These include a new structure for the theme object, as well as the ability to [add custom variants](https://next.material-ui.com/customization/components/#adding-new-component-variants) in v5:
+
+She is now actively working on the unstyled components and [the update of the style engine](https://github.com/mui-org/material-ui/issues/22342). These are two items we've been eager to push forward since the release of v1 but that required someone to be dedicated to tackling them.
+
+The community team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/mui-org/material-ui/projects/25).
+
+We couldn’t be more excited to have Marija on the team! You can follow her on [Twitter](https://twitter.com/marijanajdova).

docs/pages/blog/spotlight-damien-tassone.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'blog/spotlight-damien-tassone';
+const requireRaw = require.context('!raw-loader!./', false, /spotlight-damien-tassone\.md$/);
+
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/blog/spotlight-damien-tassone.md

@@ -0,0 +1,18 @@
+---
+title: A spotlight on Damien Tassone joining the team
+description: Damien Tassone has joined Material-UI. He's the first full-time member to focus on enterprise components.
+date: 2020-09-15T00:00:00.000Z
+authors: ['oliviertassinari']
+---
+
+A few months ago, right in the middle of the COVID-19 outbreak, [Damien Tassone](https://twitter.com/madKakoO) joined Material-UI. He's the first full-time member to focus on enterprise components. Back then, we only made a quick mention of it. It's never too late to introduce him properly.
+
+Prior to joining Material-UI, Damien worked in the finance industry in London for a decade. Part of the initial Agile Market team at RBS, and more recently leading a large Commodity Trading application at Adaptive, Damien has developed his React experience as part of large projects where Components driven design plays a huge role in successfully delivering applications. He loves TypeScript.
+
+Right from the start, Damien has made fast and significant progress. He has been an amazing addition to the team, and thanks to him, we are on the verge of releasing a new advanced component: the [Data Grid](https://material-ui.com/components/data-grid).
+
+<img src="/static/blog/spotlight-damien-tassone/data-grid.png" style="margin-bottom: 3rem;" alt="Data Grid" />
+
+The enterprise team will continue developing the data grid component, and progressively extend to new advanced components as we grow the team. Here's a quick view of [the enterprise roadmap](https://github.com/mui-org/material-ui-x/projects/1).
+
+You can follow Damien on [Twitter](https://twitter.com/madKakoO).

docs/public/_redirects

@@ -142,3 +142,4 @@ https://v3-9-0.material-ui.com/* https://v3.material-ui.com/:splat 301!
 # Unlike the store that expect to be hosted under a subfolder,
 # material-ui-x is configured to be hosted at the root.
 /_next/* https://material-ui-x.netlify.app/_next/:splat 200
+/static/x/* https://material-ui-x.netlify.app/static/x/:splat 200

docs/src/modules/components/TopLayoutBlog.js

@@ -20,7 +20,10 @@ const styles = (theme) => ({
   container: {
     marginBottom: theme.spacing(20),
     maxWidth: `calc(680px + ${theme.spacing(12)})`,
-    '& .markdownElement': {
+    '& h1': {
+      marginBottom: theme.spacing(4),
+    },
+    '& .markdown-body': {
       fontSize: 18,
       lineHeight: 1.7,
       [theme.breakpoints.up('md')]: {
@@ -46,10 +49,11 @@ const styles = (theme) => ({
 function TopLayoutBlog(props) {
   const { classes, docs } = props;
   const { description, rendered, title } = docs.en;
+  const finalTitle = title || docs.en.headers.title;
 
   return (
     <AppFrame disableDrawer>
-      <Head title={`${title} - Material-UI`} description={description} />
+      <Head title={`${finalTitle} - Material-UI`} description={description} />
       <div className={classes.root}>
         <AppContainer className={classes.container}>
           <Link
@@ -61,6 +65,11 @@ function TopLayoutBlog(props) {
             {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
             {'< Back to blog'}
           </Link>
+          {docs.en.headers.title ? (
+            <MarkdownElement>
+              <h1>{docs.en.headers.title}</h1>
+            </MarkdownElement>
+          ) : null}
           {rendered.map((chunk, index) => {
             return <MarkdownElement key={index} renderedMarkdown={chunk} />;
           })}

docs/src/modules/utils/getDemoConfig.js

@@ -3,7 +3,9 @@ import { getDependencies } from './helpers';
 
 function jsDemo(demoData) {
   return {
-    dependencies: getDependencies(demoData.raw),
+    dependencies: getDependencies(demoData.raw, {
+      muiCommitRef: process.env.PULL_REQUEST ? process.env.COMMIT_REF : undefined,
+    }),
     files: {
       'demo.js': demoData.raw,
       'index.js': `
@@ -19,7 +21,10 @@ ReactDOM.render(<Demo />, document.querySelector('#root'));
 
 function tsDemo(demoData) {
   return {
-    dependencies: getDependencies(demoData.raw, { codeLanguage: CODE_VARIANTS.TS }),
+    dependencies: getDependencies(demoData.raw, {
+      codeLanguage: CODE_VARIANTS.TS,
+      muiCommitRef: process.env.PULL_REQUEST ? process.env.COMMIT_REF : undefined,
+    }),
     files: {
       'demo.tsx': demoData.raw,
       'index.tsx': `