[Paper] Custom variant (#22216)

[Paper] Custom variant

docs/pages/api-docs/paper.md

@@ -33,7 +33,7 @@ The `MuiPaper` name can be used for providing [default props](/customization/glo
 | <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 HTML 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. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'elevation'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;string</span> | <span class="prop-default">'elevation'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 
@@ -46,6 +46,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">elevation</span> | <span class="prop-name">.MuiPaper-elevation</span> | Styles applied to the root element if `variant="elevation"`.
 | <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> | 

framer/Material-UI.framerfx/code/Paper.tsx

@@ -5,7 +5,6 @@ import MuiPaper from '@material-ui/core/Paper';
 interface Props {
   elevation: number;
   square: boolean;
-  variant: 'elevation' | 'outlined';
   width: number | string;
   height: number;
 }
@@ -19,7 +18,6 @@ export function Paper(props: Props): JSX.Element {
 Paper.defaultProps = {
   elevation: 2,
   square: false,
-  variant: 'elevation' as 'elevation',
   width: 100,
   height: 100,
 };
@@ -35,9 +33,4 @@ addPropertyControls(Paper, {
     type: ControlType.Boolean,
     title: 'Square',
   },
-  variant: {
-    type: ControlType.Enum,
-    title: 'Variant',
-    options: ['elevation', 'outlined'],
-  },
 });

framer/scripts/framerConfig.js

@@ -219,7 +219,10 @@ export const componentSettings = {
     template: 'self_closing.txt',
   },
   Paper: {
-    ignoredProps: [],
+    ignoredProps: [
+      // FIXME: `Union`
+      'variant',
+    ],
     propValues: {
       width: 100,
       height: 100,

packages/material-ui-styles/src/makeStyles/makeStyles.js

@@ -250,6 +250,7 @@ export default function makeStyles(stylesOrCreator, options = {}) {
         'MuiChip',
         'MuiDivider',
         'MuiFab',
+        'MuiPaper',
         'MuiToolbar',
         'MuiTypography',
       ];

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
+import { OverridableStringUnion } from '@material-ui/types';
 import { StandardProps } from '..';
 
+export interface PaperPropsVariantOverrides {}
+export type PaperVariantDefaults = Record<'elevation' | 'outlined', true>;
+
 export interface PaperProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, PaperClassKey> {
   /**
@@ -24,13 +28,14 @@ export interface PaperProps
   /**
    * The variant to use.
    */
-  variant?: 'elevation' | 'outlined';
+  variant?: OverridableStringUnion<PaperVariantDefaults, PaperPropsVariantOverrides>;
 }
 
 export type PaperClassKey =
   | 'root'
   | 'rounded'
   | 'outlined'
+  | 'elevation'
   | 'elevation0'
   | 'elevation1'
   | 'elevation2'

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@material-ui/utils';
+import { useThemeVariants } from '@material-ui/styles';
 import withStyles from '../styles/withStyles';
 
 export const styles = (theme) => {
@@ -27,6 +28,8 @@ export const styles = (theme) => {
     outlined: {
       border: `1px solid ${theme.palette.divider}`,
     },
+    /* Styles applied to the root element if `variant="elevation"`. */
+    elevation: {},
     ...elevations,
   };
 };
@@ -42,15 +45,27 @@ const Paper = React.forwardRef(function Paper(props, ref) {
     ...other
   } = props;
 
+  const themeVariantsClasses = useThemeVariants(
+    {
+      ...props,
+      component: Component,
+      square,
+      elevation,
+      variant,
+    },
+    'MuiPaper',
+  );
+
   return (
     <Component
       className={clsx(
         classes.root,
+        classes[variant],
         {
           [classes.rounded]: !square,
           [classes[`elevation${elevation}`]]: variant === 'elevation',
-          [classes.outlined]: variant === 'outlined',
         },
+        themeVariantsClasses,
         className,
       )}
       ref={ref}
@@ -104,7 +119,10 @@ Paper.propTypes = {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['elevation', 'outlined']),
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['elevation', 'outlined']),
+    PropTypes.string,
+  ]),
 };
 
 export default withStyles(styles, { name: 'MuiPaper' })(Paper);