[Popover] Adding MocalClasses prop to popover component

Author: davibq

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

@@ -28,7 +28,7 @@ export interface PopoverProps
   getContentAnchorEl?: (element: HTMLElement) => HTMLElement;
   marginThreshold?: number;
   modal?: boolean;
-  ModalProps?: Partial<ModalProps>;
+  ModalClasses?: ModalClassKey;
   PaperProps?: Partial<PaperProps>;
   role?: string;
   transformOrigin?: PopoverOrigin;

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

@@ -278,7 +278,7 @@ class Popover extends React.Component {
       elevation,
       getContentAnchorEl,
       marginThreshold,
-      ModalProps,
+      ModalClasses,
       onEnter,
       onEntered,
       onEntering,
@@ -295,11 +295,6 @@ class Popover extends React.Component {
       ...other
     } = this.props;
 
-    const allModalProps = {
-      ...other,
-      ...ModalProps,
-    };
-
     let transitionDuration = transitionDurationProp;
 
     if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
@@ -314,10 +309,11 @@ class Popover extends React.Component {
 
     return (
       <Modal
+        classes={ModalClasses}
         container={container}
         open={open}
         BackdropProps={{ invisible: true }}
-        {...allModalProps}
+        {...other}
       >
         <TransitionComponent
           appear
@@ -431,9 +427,9 @@ Popover.propTypes = {
    */
   marginThreshold: PropTypes.number,
   /**
-   * Properties applied to the [`Modal`](/api/modal) element.
+   * `classes` property applied to the [`Modal`](/api/modal) element.
    */
-  ModalProps: PropTypes.object,
+  ModalClasses: PropTypes.object,
   /**
    * Callback fired when the component requests to be closed.
    *

pages/api/popover.md

@@ -26,7 +26,7 @@ title: Popover API
 | <span class="prop-name">elevation</span> | <span class="prop-type">number | <span class="prop-default">8</span> | The elevation of the popover. |
 | <span class="prop-name">getContentAnchorEl</span> | <span class="prop-type">func |   | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` property. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. |
 | <span class="prop-name">marginThreshold</span> | <span class="prop-type">number | <span class="prop-default">16</span> | Specifies how close to the edge of the window the popover can appear. |
-| <span class="prop-name">ModalProps</span> | <span class="prop-type">object |   | Properties applied to the [`Modal`](/api/modal) element. |
+| <span class="prop-name">ModalClasses</span> | <span class="prop-type">object |   | Override or extend the styles applied to the Modal component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func |   | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">onEnter</span> | <span class="prop-type">func |   | Callback fired before the component is entering. |
 | <span class="prop-name">onEntered</span> | <span class="prop-type">func |   | Callback fired when the component has entered. |