[SwipeableDrawer] Add SwipeAreaProps property (#13592)

* Initial ...

* SwipeAreaProps improvements

* let's merge

Author: captain-yossarian

packages/material-ui/src/SwipeableDrawer/SwipeArea.js

@@ -36,11 +36,11 @@ export const styles = theme => ({
  * @ignore - internal component.
  */
 function SwipeArea(props) {
-  const { anchor, classes, width, ...other } = props;
+  const { anchor, classes, className, width, ...other } = props;
 
   return (
     <div
-      className={classNames(classes.root, classes[`anchor${capitalize(anchor)}`])}
+      className={classNames(classes.root, classes[`anchor${capitalize(anchor)}`], className)}
       style={{
         [isHorizontal(props) ? 'width' : 'height']: width,
       }}
@@ -58,6 +58,10 @@ SwipeArea.propTypes = {
    * @ignore
    */
   classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The width of the left most (or right most) area in pixels where the
    * drawer can be swiped open from.

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

@@ -11,6 +11,7 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
   onClose: React.ReactEventHandler<{}>;
   onOpen: React.ReactEventHandler<{}>;
   open: boolean;
+  SwipeAreaProps?: object;
   swipeAreaWidth?: number;
 }
 

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

@@ -360,6 +360,7 @@ class SwipeableDrawer extends React.Component {
       onOpen,
       open,
       PaperProps = {},
+      SwipeAreaProps,
       swipeAreaWidth,
       variant,
       ...other
@@ -391,7 +392,7 @@ class SwipeableDrawer extends React.Component {
         />
         {!disableDiscovery && !disableSwipeToOpen && variant === 'temporary' && (
           <NoSsr>
-            <SwipeArea anchor={anchor} width={swipeAreaWidth} />
+            <SwipeArea anchor={anchor} width={swipeAreaWidth} {...SwipeAreaProps} />
           </NoSsr>
         )}
       </React.Fragment>
@@ -454,6 +455,10 @@ SwipeableDrawer.propTypes = {
    * @ignore
    */
   PaperProps: PropTypes.object,
+  /**
+   * Properties applied to the swipe area element.
+   */
+  SwipeAreaProps: PropTypes.object,
   /**
    * The width of the left most (or right most) area in pixels where the
    * drawer can be swiped open from.

pages/api/swipeable-drawer.md

@@ -27,6 +27,7 @@ import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 | <span class="prop-name required">onClose *</span> | <span class="prop-type">func</span> |   | 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 required">onOpen *</span> | <span class="prop-type">func</span> |   | Callback fired when the component requests to be opened.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name required">open *</span> | <span class="prop-type">bool</span> |   | If `true`, the drawer is open. |
+| <span class="prop-name">SwipeAreaProps</span> | <span class="prop-type">object</span> |   | Properties applied to the swipe area element. |
 | <span class="prop-name">swipeAreaWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">20</span> | The width of the left most (or right most) area in pixels where the drawer can be swiped open from. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br></span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |