Add modal using react modal

[boblinthorst]

Description

Adds a modal component, making use of react-modal. The contents of the modal, and the opening and closing of the modal, is the responsibility of the implementor. An example of the implementation of this modal can be found in the test section.
An alternative solution to: #6261

How has this been tested?

To test the modal yourself, add the following to layout/index.js:

this one at the top of the file.

import ModalWrapper from '../modalWrapper';

And this one somewhere in the return

<ModalWrapper
	title="This is my modal"
	icon={ <span className="dashicons dashicons-admin-multisite"></span> }
	style={ {
		content: {
			width: '700px',
			height: '400px',
		},
	} }
>
	<p> super insteresting Content </p>
</ModalWrapper>

And create the file modalWrapper.js at components/modal, containing:

import Modal from '.';
import { Component } from '@wordpress/element';

class ModalWrapper extends Component {

	constructor( props ) {
		super( props );

		this.state = {
			isOpen: true,
		};

		this.onClose = this.onClose.bind( this );
	}

	onClose() {
		this.setState( {
			isOpen: false,
		} );
	}

	render() {
		const { children } = this.props;
		return <Modal { ...this.props } isOpen={ this.state.isOpen } onRequestClose={ this.onClose } >
			{ children }
		</Modal>;
	}
}

Screenshots

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[abotteram]

Only reviewed styling.

[abotteram]

The prefix should be .components-modal according to the coding standards.
You could use the following structure for better readability:

.components-modal {
    &__screen-overlay {}
    &__content {}
    &__header {}
}

[abotteram]

screen takeover reference should be removed

[boblinthorst]

done

[abotteram]

Use bodyOpenClassName props to overwrite ReactModal__Body--open.
While we're on the topic it would be favourable if portalClassName was also changed to something that is more suitable to WordPress.

[boblinthorst]

renamed to WordPress-modal for now.

[aduth]

Can you elaborate on how this approach differs from #6261, in more detail than just that it uses react-modal. Do you think react-modal is a good fit, and in what ways? Will we be able to use it as a base for non-modal UIs like popovers and dropdown menus, or will we still need a custom implementation for those?

[aduth]

Are there plans to continue work here, or should this be closed in favor of #6261 ?

[boblinthorst]

There are no plans to continue here. This was made as a comparison pr between #6261 and a react-modal solution. As this decision has already been made, this pr has served its purpose.

closed in favor of #6261