[BottomNavigation] Add component prop (#13960)

* [BottomNavigation] add component prop

* sort default props

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

@@ -8,6 +8,7 @@ export interface BottomNavigationProps
     'onChange'
   > {
   children: React.ReactNode;
+  component?: React.ReactType<BottomNavigationProps>;
   onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
   showLabels?: boolean;
   value?: any;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
 
@@ -19,6 +20,7 @@ function BottomNavigation(props) {
     children: childrenProp,
     classes,
     className: classNameProp,
+    component: Component,
     onChange,
     showLabels,
     value,
@@ -50,9 +52,9 @@ function BottomNavigation(props) {
   });
 
   return (
-    <div className={className} {...other}>
+    <Component className={className} {...other}>
       {children}
-    </div>
+    </Component>
   );
 }
 
@@ -70,6 +72,11 @@ BottomNavigation.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: componentPropType,
   /**
    * Callback fired when the value changes.
    *
@@ -89,6 +96,7 @@ BottomNavigation.propTypes = {
 };
 
 BottomNavigation.defaultProps = {
+  component: 'div',
   showLabels: false,
 };
 

pages/api/bottom-navigation.md

@@ -20,6 +20,7 @@ import BottomNavigation from '@material-ui/core/BottomNavigation';
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name required">children *</span> | <span class="prop-type">node</span> |   | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">component</span> | <span class="prop-type">componentPropType</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">onChange</span> | <span class="prop-type">func</span> |   | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
 | <span class="prop-name">showLabels</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |   | The value of the currently selected `BottomNavigationAction`. |