[docs] Show inherited components (#7846)

docs/scripts/buildApi.js

@@ -64,6 +64,7 @@ function buildDocs(options) {
   reactAPI.name = path.parse(componentPath).name;
   reactAPI.styles = styles;
   reactAPI.pagesMarkdown = pagesMarkdown;
+  reactAPI.src = src;
   let markdown;
   try {
     markdown = generateMarkdown(reactAPI);

docs/src/modules/utils/generateMarkdown.js

@@ -2,6 +2,7 @@
 
 import { parse as parseDoctrine } from 'doctrine';
 import recast from 'recast';
+import kebabCase from 'lodash/kebabCase';
 import { pageToTitle } from './helpers';
 
 function getDeprecatedInfo(type) {
@@ -196,6 +197,26 @@ you need to use the following style sheet name: \`${reactAPI.styles.name}\`.`
     : '';
 }
 
+const inheritedComponentRegexp = /\/\/ @inheritedComponent (.*)/;
+
+function generateInheritance(reactAPI) {
+  const inheritedComponent = reactAPI.src.match(inheritedComponentRegexp);
+
+  if (!inheritedComponent) {
+    return '';
+  }
+
+  const component = inheritedComponent[1];
+
+  return `
+## Inheritance
+
+The properties of the [<${component} />](/api/${kebabCase(
+    component,
+  )}) component are also available.
+`;
+}
+
 function generateDemos(reactAPI) {
   const pagesMarkdown = reactAPI.pagesMarkdown.reduce((accumulator, page) => {
     if (page.components.includes(reactAPI.name)) {
@@ -224,6 +245,7 @@ export default function generateMarkdown(reactAPI: Object) {
     `${generateProps(reactAPI)}\n` +
     'Any other properties supplied will be spread to the root element.\n' +
     `${generateClasses(reactAPI)}\n` +
+    `${generateInheritance(reactAPI)}` +
     `${generateDemos(reactAPI)}\n`
   );
 }

pages/api/app-bar.md

@@ -33,6 +33,10 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiAppBar`.
 
+## Inheritance
+
+The properties of the [<Paper />](/api/paper) component are also available.
+
 ## Demos
 
 - [App Bar](/demos/app-bar)

pages/api/bottom-navigation-button.md

@@ -34,6 +34,10 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiBottomNavigationButton`.
 
+## Inheritance
+
+The properties of the [<ButtonBase />](/api/button-base) component are also available.
+
 ## Demos
 
 - [Bottom Navigation](/demos/bottom-navigation)

pages/api/button.md

@@ -47,6 +47,10 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiButton`.
 
+## Inheritance
+
+The properties of the [<ButtonBase />](/api/button-base) component are also available.
+
 ## Demos
 
 - [Buttons](/demos/buttons)

pages/api/card-header.md

@@ -31,6 +31,10 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiCardHeader`.
 
+## Inheritance
+
+The properties of the [<CardContent />](/api/card-content) component are also available.
+
 ## Demos
 
 - [Cards](/demos/cards)

pages/api/card.md

@@ -12,6 +12,10 @@
 Any other properties supplied will be spread to the root element.
 
 
+## Inheritance
+
+The properties of the [<Paper />](/api/paper) component are also available.
+
 ## Demos
 
 - [Cards](/demos/cards)

pages/api/icon-button.md

@@ -38,6 +38,10 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiIconButton`.
 
+## Inheritance
+
+The properties of the [<ButtonBase />](/api/button-base) component are also available.
+
 ## Demos
 
 - [Buttons](/demos/buttons)

pages/api/mobile-stepper.md

@@ -42,6 +42,10 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiMobileStepper`.
 
+## Inheritance
+
+The properties of the [<Paper />](/api/paper) component are also available.
+
 ## Demos
 
 - [Stepper](/demos/stepper)

pages/api/tab.md

@@ -42,6 +42,10 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiTab`.
 
+## Inheritance
+
+The properties of the [<ButtonBase />](/api/button-base) component are also available.
+
 ## Demos
 
 - [Tabs](/demos/tabs)

pages/api/text-field.md

@@ -39,6 +39,10 @@
 Any other properties supplied will be spread to the root element.
 
 
+## Inheritance
+
+The properties of the [<FormControl />](/api/form-control) component are also available.
+
 ## Demos
 
 - [Autocomplete](/demos/autocomplete)

src/AppBar/AppBar.js

@@ -1,4 +1,5 @@
 // @flow
+// @inheritedComponent Paper
 
 import React from 'react';
 import type { Element } from 'react';

src/BottomNavigation/BottomNavigationButton.js

@@ -1,4 +1,5 @@
 // @flow weak
+// @inheritedComponent ButtonBase
 
 import React, { Component, cloneElement, isValidElement } from 'react';
 import PropTypes from 'prop-types';

src/Button/Button.js

@@ -1,4 +1,5 @@
 // @flow
+// @inheritedComponent ButtonBase
 
 import React from 'react';
 import type { Element } from 'react';

src/Card/Card.js

@@ -1,4 +1,5 @@
 // @flow
+// @inheritedComponent Paper
 
 import React from 'react';
 import Paper from '../Paper';

src/Card/CardHeader.js

@@ -1,4 +1,5 @@
 // @flow
+// @inheritedComponent CardContent
 
 import React from 'react';
 import type { Element } from 'react';

src/GridList/GridListTile.js

@@ -10,6 +10,7 @@ import withStyles from '../styles/withStyles';
 export const styles = {
   root: {
     boxSizing: 'border-box',
+    flexShrink: 0,
   },
   tile: {
     position: 'relative',

src/IconButton/IconButton.js

@@ -1,4 +1,5 @@
 // @flow weak
+// @inheritedComponent ButtonBase
 
 import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';

src/MobileStepper/MobileStepper.js

@@ -1,4 +1,5 @@
 // @flow weak
+// @inheritedComponent Paper
 
 import React from 'react';
 import PropTypes from 'prop-types';

src/Tabs/Tab.js

@@ -1,4 +1,5 @@
 // @flow weak
+// @inheritedComponent ButtonBase
 
 import React, { Component, isValidElement } from 'react';
 import PropTypes from 'prop-types';

src/TextField/TextField.js

@@ -1,4 +1,5 @@
 // @flow
+// @inheritedComponent FormControl
 
 import React from 'react';
 import type { Element } from 'react';