[core] Batch small changes

docs/pages/api-docs/tabs.md

@@ -44,7 +44,7 @@ The `MuiTabs` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">TabIndicatorProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the tab indicator element. |
 | <span class="prop-name">TabScrollButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element. |
 | <span class="prop-name">textColor</span> | <span class="prop-type">'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'inherit'</span> | Determines the color of the `Tab`. |
-| <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. |
+| <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this prop to `false`. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'fullWidth'<br>&#124;&nbsp;'scrollable'<br>&#124;&nbsp;'standard'</span> | <span class="prop-default">'standard'</span> | Determines additional display behavior of the tabs:<br> - `scrollable` will invoke scrolling properties and allow for horizontally  scrolling (or swiping) of the tab bar.  -`fullWidth` will make the tabs grow to use all the available space,  which should be used for small views, like on mobile.  - `standard` will render the default state. |
 
 The `ref` is forwarded to the root element.

docs/src/modules/components/ThemeContext.js

@@ -222,6 +222,7 @@ export function ThemeProvider(props) {
     // Expose the theme as a global variable so people can play with it.
     if (process.browser) {
       window.theme = theme;
+      window.createMuiTheme = createMuiTheme;
     }
   }, [theme]);
 

docs/src/pages.js

@@ -63,20 +63,20 @@ const pages = [
         pathname: '/components',
         subheader: '/components/surfaces',
         children: [
+          { pathname: '/components/accordion' },
           { pathname: '/components/app-bar' },
-          { pathname: '/components/paper' },
           { pathname: '/components/cards' },
-          { pathname: '/components/accordion' },
+          { pathname: '/components/paper' },
         ],
       },
       {
         pathname: '/components',
         subheader: '/components/feedback',
         children: [
-          { pathname: '/components/progress' },
+          { pathname: '/components/backdrop' },
           { pathname: '/components/dialogs' },
+          { pathname: '/components/progress' },
           { pathname: '/components/snackbars' },
-          { pathname: '/components/backdrop' },
         ],
       },
       {

docs/src/pages/components/accordion/accordion.md

@@ -10,7 +10,7 @@ waiAria: https://www.w3.org/TR/wai-aria-practices/#accordion
 
 <p class="description">Accordions contain creation flows and allow lightweight editing of an element.</p>
 
-An accordion is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.
+An accordion is a lightweight container that may either be used standalone, or be connected to a larger surface, such as a card.
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 

docs/src/pages/components/snackbars/snackbars.md

@@ -8,7 +8,7 @@ waiAria: https://www.w3.org/TR/wai-aria-1.1/#alert
 
 # Snackbar
 
-<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
+<p class="description">Snackbars provide brief notifications. The component is also known as a toast.</p>
 
 Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
 

docs/src/pages/guides/localization/localization.md

@@ -78,5 +78,5 @@ However, Material-UI aims to support the [100 most popular locales](https://en.w
 
 ## RTL Support
 
-Right-to-left languages such as Arabic, Persian or Hebrew are supported.
+Right-to-left languages such as Arabic, Persian, or Hebrew are supported.
 Follow [this guide](/guides/right-to-left/) to use them.

docs/src/pages/guides/right-to-left/right-to-left.md

@@ -1,6 +1,6 @@
 # Right-to-left
 
-<p class="description">Right-to-left languages such as Arabic, Persian or Hebrew are supported. To change the direction of Material-UI components you must follow the following steps.</p>
+<p class="description">Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of Material-UI components you must follow the following steps.</p>
 
 ## Steps
 

packages/material-ui/src/Step/Step.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
@@ -77,27 +76,7 @@ const Step = React.forwardRef(function Step(props, ref) {
       {...other}
     >
       {connector && alternativeLabel && index !== 0 ? connector : null}
-
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-
-        if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
-            console.error(
-              [
-                "Material-UI: The Step component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
-              ].join('\n'),
-            );
-          }
-        }
-
-        return React.cloneElement(child, {
-          ...child.props,
-        });
-      })}
+      {children}
     </div>
   );
 

packages/material-ui/src/TableSortLabel/TableSortLabel.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
-import Sort from '@material-ui/icons/Sort';
+import SortIcon from '@material-ui/icons/Sort';
 import TableSortLabel from './TableSortLabel';
 import ButtonBase from '../ButtonBase';
 
@@ -57,7 +57,7 @@ describe('<TableSortLabel />', () => {
     });
 
     it('should accept a custom icon for the sort icon', () => {
-      const { container } = render(<TableSortLabel IconComponent={Sort} />);
+      const { container } = render(<TableSortLabel IconComponent={SortIcon} />);
       const icon = container.querySelector(`svg.${classes.icon}[data-mui-test="SortIcon"]`);
       expect(icon).to.not.equal(null);
     });

packages/material-ui/src/Tabs/Tabs.d.ts

@@ -78,7 +78,7 @@ export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof Button
     textColor?: 'secondary' | 'primary' | 'inherit';
     /**
      * The value of the currently selected `Tab`.
-     * If you don't want any selected `Tab`, you can set this property to `false`.
+     * If you don't want any selected `Tab`, you can set this prop to `false`.
      */
     value?: any;
     /**

packages/material-ui/src/Tabs/Tabs.js

@@ -604,7 +604,7 @@ Tabs.propTypes = {
   textColor: PropTypes.oneOf(['inherit', 'primary', 'secondary']),
   /**
    * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this property to `false`.
+   * If you don't want any selected `Tab`, you can set this prop to `false`.
    */
   value: PropTypes.any,
   /**

test/utils/describeConformance.js

@@ -49,7 +49,7 @@ function findRootComponent(wrapper, { component }) {
 }
 
 function randomStringValue() {
-  return Math.random().toString(36).slice(2);
+  return `s${Math.random().toString(36).slice(2)}`;
 }
 
 /**