diff --git a/docs/pages/api-docs/backdrop.md b/docs/pages/api-docs/backdrop.md index 8469fd5a948dcc..2d655c10079a7c 100644 --- 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 index accbf24f1b9d71..b5b63782d270b3 100644 --- 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 index 40ec74bd313ec0..3d7d920907a5c1 100644 --- 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 index e5d79ed71d7b91..0b4ace718ebf2b 100644 --- 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('', () => { let mount; @@ -20,7 +21,7 @@ describe('', () => { describeConformance(, () => ({ classes, - inheritComponent: 'div', + inheritComponent: Fade, mount, refInstanceof: window.HTMLDivElement, skip: [