[Backdrop] Document Fade inherited component (#20500)

mui · Apr 12, 2020 · aa7bd7a · aa7bd7a
1 parent dc0578c
commit aa7bd7a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/docs/pages/api-docs/backdrop.md b/docs/pages/api-docs/backdrop.md
@@ -36,7 +36,7 @@ The `MuiBackdrop` name can be used for providing [default props](/customization/
 
 The `ref` is forwarded to the root element.
 
-Any other props supplied will be provided to the root element (native element).
+Any other props supplied will be provided to the root element ([Fade](/api/fade/)).
 
 ## CSS
 
@@ -53,6 +53,11 @@ You can override the style of the component thanks to one of these customization
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Backdrop/Backdrop.js) for more detail.
 
+## Inheritance
+
+The props of the [Fade](/api/fade/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
+
 ## Demos
 
 - [Backdrop](/components/backdrop/)

diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
@@ -55,6 +55,15 @@ const theme = createMuiTheme();
 
 const inheritedComponentRegexp = /\/\/ @inheritedComponent (.*)/;
 
+/**
+ * Receives a component's test information and source code and return's an object
+ * containing the inherited component's name and pathname
+ *
+ * @param {object} testInfo Information retrieved from the component's describeConformance() in its test.js file
+ * @param {string} testInfo.forwardsRefTo The name of the element the ref is forwarded to
+ * @param {(string | undefined)} testInfo.inheritComponent The name of the component functionality is inherited from
+ * @param {string} src The component's source code
+ */
 function getInheritance(testInfo, src) {
   let inheritedComponentName = testInfo.inheritComponent;
 

diff --git a/packages/material-ui/src/Backdrop/Backdrop.d.ts b/packages/material-ui/src/Backdrop/Backdrop.d.ts
@@ -35,5 +35,6 @@ export type BackdropClassKey = 'root' | 'invisible';
  * API:
  *
  * - [Backdrop API](https://material-ui.com/api/backdrop/)
+ * - inherits [Fade API](https://material-ui.com/api/fade/)
  */
 export default function Backdrop(props: BackdropProps): JSX.Element;
diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js
@@ -3,6 +3,7 @@ import { assert } from 'chai';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import Backdrop from './Backdrop';
+import Fade from '../Fade';
 
 describe('<Backdrop />', () => {
   let mount;
@@ -20,7 +21,7 @@ describe('<Backdrop />', () => {
 
   describeConformance(<Backdrop open />, () => ({
     classes,
-    inheritComponent: 'div',
+    inheritComponent: Fade,
     mount,
     refInstanceof: window.HTMLDivElement,
     skip: [