feat: add a variant prop to Paper

Author: netochaves

docs/pages/api/paper.md

@@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">elevation</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Shadow depth, corresponds to `dp` in the spec. It accepts values between 0 and 24 inclusive. |
 | <span class="prop-name">square</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, rounded corners are disabled. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'elevation'<br>&#124;&nbsp;'outlined'</span> | <span class="prop-default">'elevation'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 
@@ -43,6 +44,7 @@ Any other props supplied will be provided to the root element (native element).
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiPaper-root</span> | Styles applied to the root element.
 | <span class="prop-name">rounded</span> | <span class="prop-name">.MuiPaper-rounded</span> | Styles applied to the root element if `square={false}`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaper-outlined</span> | Styles applied to the root element if `variant="outlined"`
 | <span class="prop-name">elevation0</span> | <span class="prop-name">.MuiPaper-elevation0</span> | 
 | <span class="prop-name">elevation1</span> | <span class="prop-name">.MuiPaper-elevation1</span> | 
 | <span class="prop-name">elevation2</span> | <span class="prop-name">.MuiPaper-elevation2</span> | 

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

@@ -6,11 +6,13 @@ export interface PaperProps
   component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
   elevation?: number;
   square?: boolean;
+  variant?: 'elevation' | 'outlined';
 }
 
 export type PaperClassKey =
   | 'root'
   | 'rounded'
+  | 'outlined'
   | 'elevation0'
   | 'elevation1'
   | 'elevation2'

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

@@ -22,6 +22,10 @@ export const styles = theme => {
     rounded: {
       borderRadius: theme.shape.borderRadius,
     },
+    /* Styles applied to the root element if `variant="outlined"` */
+    outlined: {
+      border: `1px solid ${theme.palette.divider}`,
+    },
     ...elevations,
   };
 };
@@ -33,6 +37,7 @@ const Paper = React.forwardRef(function Paper(props, ref) {
     component: Component = 'div',
     square = false,
     elevation = 1,
+    variant = 'elevation',
     ...other
   } = props;
 
@@ -46,9 +51,10 @@ const Paper = React.forwardRef(function Paper(props, ref) {
     <Component
       className={clsx(
         classes.root,
-        classes[`elevation${elevation}`],
         {
           [classes.rounded]: !square,
+          [classes[`elevation${elevation}`]]: variant === 'elevation',
+          [classes.outlined]: variant === 'outlined',
         },
         className,
       )}
@@ -86,6 +92,10 @@ Paper.propTypes = {
    * If `true`, rounded corners are disabled.
    */
   square: PropTypes.bool,
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(['elevation', 'outlined']),
 };
 
 export default withStyles(styles, { name: 'MuiPaper' })(Paper);

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

@@ -49,6 +49,13 @@ describe('<Paper />', () => {
     });
   });
 
+  describe('prop: variant', () => {
+    it('adds a outlined class', () => {
+      const wrapper = mount(<Paper variant="outlined">Hello World</Paper>);
+      assert.strictEqual(wrapper.find(`.${classes.root}`).some(`.${classes.outlined}`), true);
+    });
+  });
+
   it('should set the elevation elevation class', () => {
     const wrapper = shallow(<Paper elevation={16}>Hello World</Paper>);
     assert.strictEqual(