[docs] Improve ListItem and BottomNavigationAction docs (#12295)

* [docs] Improve ListItem and BottomNavigationAction docs

* [docs] Update documentation to the correct place

Add notes to the contributing guide

* [docs] Reformat API doc comment to make lint pass

CONTRIBUTING.md

@@ -54,6 +54,13 @@ You can now access the documentation site [locally](http://localhost:3000).
 
 Test coverage is limited at present, but where possible, please add tests for any changes you make. Tests can be run with `yarn test`.
 
+### Updating the component API documentation
+
+To update the component API documentation (auto generated from component PropTypes comments), run:
+```sh
+yarn docs:api
+```
+
 ### Coding style
 
 Please follow the coding style of the current code base. Material-UI uses eslint, so if possible, enable linting in your editor to get real-time feedback. The linting rules are also run when Webpack recompiles your changes, and can be run manually with `yarn lint`.

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

@@ -146,7 +146,9 @@ BottomNavigationAction.propTypes = {
    */
   selected: PropTypes.bool,
   /**
-   * If `true`, the BottomNavigationAction will show its label.
+   * If `true`, the `BottomNavigationAction` will show its label.
+   * By default, only the selected `BottomNavigationAction`
+   * inside `BottomNavigation` will show its label.
    */
   showLabel: PropTypes.bool,
   /**

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

@@ -35,7 +35,7 @@ export const styles = theme => ({
     paddingTop: 8,
     paddingBottom: 8,
   },
-  /* Styles applied to the inner `component` element if `dense={true}`. */
+  /* Styles applied to the inner `component` element if `disabled={true}`. */
   disabled: {
     opacity: 0.5,
   },
@@ -190,7 +190,7 @@ ListItem.propTypes = {
    */
   dense: PropTypes.bool,
   /**
-   * @ignore
+   * If `true`, the list item will be disabled.
    */
   disabled: PropTypes.bool,
   /**

pages/api/bottom-navigation-action.md

@@ -19,7 +19,7 @@ title: BottomNavigationAction API
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node |   | The icon element. |
 | <span class="prop-name">label</span> | <span class="prop-type">node |   | The label element. |
-| <span class="prop-name">showLabel</span> | <span class="prop-type">bool |   | If `true`, the BottomNavigationAction will show its label. |
+| <span class="prop-name">showLabel</span> | <span class="prop-type">bool |   | If `true`, the `BottomNavigationAction` will show its label. By default, only the selected `BottomNavigationAction` inside `BottomNavigation` will show its label. |
 | <span class="prop-name">value</span> | <span class="prop-type">any |   | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)).

pages/api/list-item.md

@@ -22,6 +22,7 @@ title: ListItem API
 | <span class="prop-name">ContainerComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">'li'</span> | The container component used when a `ListItemSecondaryAction` is rendered. |
 | <span class="prop-name">ContainerProps</span> | <span class="prop-type">object |   | Properties applied to the container element when the component is used to display a `ListItemSecondaryAction`. |
 | <span class="prop-name">dense</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the list item will be disabled. |
 | <span class="prop-name">disableGutters</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the left and right padding is removed. |
 | <span class="prop-name">divider</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, a 1px light border is added to the bottom of the list item. |
 
@@ -40,7 +41,7 @@ This property accepts the following keys:
 | <span class="prop-name">focusVisible</span> | Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`.
 | <span class="prop-name">default</span> | Legacy styles applied to the root element. Use `root` instead.
 | <span class="prop-name">dense</span> | Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`.
-| <span class="prop-name">disabled</span> | Styles applied to the inner `component` element if `dense={true}`.
+| <span class="prop-name">disabled</span> | Styles applied to the inner `component` element if `disabled={true}`.
 | <span class="prop-name">divider</span> | Styles applied to the inner `component` element if `divider={true}`.
 | <span class="prop-name">gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
 | <span class="prop-name">button</span> | Styles applied to the inner `component` element if `button={true}`.