[Popover] Allow to pass repeated props to modal (#12459)

* [Popover] Adding ModalClasses prop to popover component

* let's merge

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

@@ -111,7 +111,7 @@ InputLabel.propTypes = {
    */
   focused: PropTypes.bool,
   /**
-   * `classes` property applied to the `FormLabel` element.
+   * `classes` property applied to the [`FormLabel`](/api/form-label) element.
    */
   FormLabelClasses: PropTypes.object,
   /**

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

@@ -196,7 +196,7 @@ Menu.propTypes = {
    */
   PaperProps: PropTypes.object,
   /**
-   * `classes` property applied to the `Popover` element.
+   * `classes` property applied to the [`Popover`](/api/popover) element.
    */
   PopoverClasses: PropTypes.object,
   /**

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

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

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

@@ -278,6 +278,7 @@ class Popover extends React.Component {
       elevation,
       getContentAnchorEl,
       marginThreshold,
+      ModalClasses,
       onEnter,
       onEntered,
       onEntering,
@@ -307,7 +308,13 @@ class Popover extends React.Component {
       containerProp || (anchorEl ? ownerDocument(getAnchorEl(anchorEl)).body : undefined);
 
     return (
-      <Modal container={container} open={open} BackdropProps={{ invisible: true }} {...other}>
+      <Modal
+        classes={ModalClasses}
+        container={container}
+        open={open}
+        BackdropProps={{ invisible: true }}
+        {...other}
+      >
         <TransitionComponent
           appear
           in={open}
@@ -419,6 +426,10 @@ Popover.propTypes = {
    * Specifies how close to the edge of the window the popover can appear.
    */
   marginThreshold: PropTypes.number,
+  /**
+   * `classes` property applied to the [`Modal`](/api/modal) element.
+   */
+  ModalClasses: PropTypes.object,
   /**
    * Callback fired when the component requests to be closed.
    *

pages/api/input-label.md

@@ -21,7 +21,7 @@ title: InputLabel API
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool |   | If `true`, apply disabled class. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool |   | If `true`, the label will be displayed in an error state. |
 | <span class="prop-name">focused</span> | <span class="prop-type">bool |   | If `true`, the input of this label is focused. |
-| <span class="prop-name">FormLabelClasses</span> | <span class="prop-type">object |   | `classes` property applied to the `FormLabel` element. |
+| <span class="prop-name">FormLabelClasses</span> | <span class="prop-type">object |   | `classes` property applied to the [`FormLabel`](/api/form-label) element. |
 | <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'<br> |   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
 | <span class="prop-name">required</span> | <span class="prop-type">bool |   | if `true`, the label will indicate that the input is required. |
 | <span class="prop-name">shrink</span> | <span class="prop-type">bool |   | If `true`, the label is shrunk. |

pages/api/menu.md

@@ -28,7 +28,7 @@ title: Menu API
 | <span class="prop-name">onExited</span> | <span class="prop-type">func |   | Callback fired when the Menu has exited. |
 | <span class="prop-name">onExiting</span> | <span class="prop-type">func |   | Callback fired when the Menu is exiting. |
 | <span class="prop-name required">open *</span> | <span class="prop-type">bool |   | If `true`, the menu is visible. |
-| <span class="prop-name">PopoverClasses</span> | <span class="prop-type">object |   | `classes` property applied to the `Popover` element. |
+| <span class="prop-name">PopoverClasses</span> | <span class="prop-type">object |   | `classes` property applied to the [`Popover`](/api/popover) element. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | The length of the transition in `ms`, or 'auto' |
 
 Any other properties supplied will be spread to the root element ([Popover](/api/popover)).

pages/api/popover.md

@@ -26,6 +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">ModalClasses</span> | <span class="prop-type">object |   | `classes` property applied to the [`Modal`](/api/modal) element. |
 | <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. |