Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Backdrop] Document Fade inherited component #20500

Merged
merged 3 commits into from
Apr 12, 2020
Merged

[Backdrop] Document Fade inherited component #20500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5465c99
Added Fade as inherited to component to Backdrop
Josh-Weston Apr 11, 2020
8700a97
Ran prettier against changed files
Josh-Weston Apr 11, 2020
f879b62
Removed bread crumb commenting trail
Josh-Weston Apr 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 6 additions & 1 deletion docs/pages/api-docs/backdrop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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/)
Expand Down
9 changes: 9 additions & 0 deletions docs/scripts/buildApi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
1 change: 1 addition & 0 deletions packages/material-ui/src/Backdrop/Backdrop.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
3 changes: 2 additions & 1 deletion packages/material-ui/src/Backdrop/Backdrop.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -20,7 +21,7 @@ describe('<Backdrop />', () => {

describeConformance(<Backdrop open />, () => ({
classes,
inheritComponent: 'div',
inheritComponent: Fade,
mount,
refInstanceof: window.HTMLDivElement,
skip: [
Expand Down