[Stepper] Remove Paper and built-in padding

docs/pages/api-docs/stepper.md

@@ -38,7 +38,7 @@ The `MuiStepper` name can be used for providing [default props](/customization/g
 
 The `ref` is forwarded to the root element.
 
-Any other props supplied will be provided to the root element ([Paper](/api/paper/)).
+Any other props supplied will be provided to the root element (native element).
 
 ## CSS
 
@@ -57,11 +57,6 @@ You can override the style of the component thanks to one of these customization
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Stepper/Stepper.js) for more detail.
 
-## Inheritance
-
-The props of the [Paper](/api/paper/) component are also available.
-You can take advantage of this behavior to [target nested components](/guides/api/#spread).
-
 ## Demos
 
 - [Steppers](/components/steppers/)

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

@@ -470,6 +470,19 @@ const theme = createMuitheme({
   +<Button ref={ref} />
   ```
 
+  ### Skeleton
+
+- Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Skeleton variant="circle" />
+  -<Skeleton variant="rect" />
+  -<Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname',  }} />
+  +<Skeleton variant="circular" />
+  +<Skeleton variant="rectangular" />
+  +<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />
+  ```
+
 ### Slider
 
 - TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
@@ -511,18 +524,24 @@ const theme = createMuitheme({
   />
   ```
 
-  ### Skeleton
+  ### Stepper
 
-- Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
+- The root component (Paper) was replaced with a div. Stepper no longer has elevation, nor inherits Paper's props.
 
-  ```diff
-  -<Skeleton variant="circle" />
-  -<Skeleton variant="rect" />
-  -<Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname',  }} />
-  +<Skeleton variant="circular" />
-  +<Skeleton variant="rectangular" />
-  +<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />
-  ```
+```diff
+-<Stepper elevation={2}>
+-  <Step>
+-    <StepLabel>Hello world</StepLabel>
+-  </Step>
+-</Stepper>
++<Paper square elevation={2}>
++  <Stepper>
++    <Step>
++      <StepLabel>Hello world</StepLabel>
++    </Step>
++  </Stepper>
++<Paper>
+```
 
 ### TablePagination
 

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

@@ -62,6 +62,5 @@ export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
  * API:
  *
  * - [Stepper API](https://material-ui.com/api/stepper/)
- * - inherits [Paper API](https://material-ui.com/api/paper/)
  */
 export default function Stepper(props: StepperProps): JSX.Element;

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import Paper from '../Paper';
 import StepConnector from '../StepConnector';
 import StepperContext from './StepperContext';
 
@@ -57,9 +56,7 @@ const Stepper = React.forwardRef(function Stepper(props, ref) {
 
   return (
     <StepperContext.Provider value={contextValue}>
-      <Paper
-        square
-        elevation={0}
+      <div
         className={clsx(
           classes.root,
           classes[orientation],
@@ -72,7 +69,7 @@ const Stepper = React.forwardRef(function Stepper(props, ref) {
         {...other}
       >
         {steps}
-      </Paper>
+      </div>
     </StepperContext.Provider>
   );
 });

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
-import Paper from '../Paper';
 import Step from '../Step';
 import StepLabel from '../StepLabel';
 import StepConnector from '../StepConnector';
@@ -27,27 +26,13 @@ describe('<Stepper />', () => {
     </Stepper>,
     () => ({
       classes,
-      inheritComponent: Paper,
+      inheritComponent: 'div',
       mount,
       refInstanceof: window.HTMLDivElement,
       skip: ['componentProp'],
     }),
   );
 
-  it('has no elevation by default', () => {
-    const { container } = render(
-      <Stepper>
-        <Step />
-      </Stepper>,
-    );
-
-    const paperClasses = getClasses(<Paper />);
-
-    const paper = container.querySelector(`.${paperClasses.elevation0}`);
-
-    expect(paper).not.equal(null);
-  });
-
   describe('rendering children', () => {
     it('renders 3 Step and 2 StepConnector components', () => {
       const { container } = render(