Components: Render popover as slot / fill

components/dropdown/test/index.js

@@ -8,6 +8,8 @@ import { mount } from 'enzyme';
  */
 import Dropdown from '../';
 
+jest.mock( '../../slot-fill/fill' );
+
 describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', () => {
 		const wrapper = mount( <Dropdown

components/index.js

@@ -22,7 +22,6 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
-export { default as PopoverProvider } from './popover/provider';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as Spinner } from './spinner';

components/popover/README.md

@@ -26,19 +26,20 @@ function ToggleButton( { isVisible, toggleVisible } ) {
 }
 ```
 
-If you want Popover elementss to render to a specific location on the page to allow style cascade to take effect, you must render a `PopoverProvider` further up the element tree, specifying a target:
+If you want Popover elements to render to a specific location on the page to allow style cascade to take effect, you must render a `Popover.Slot` further up the element tree:
 
-```
+```jsx
 import { render } from '@wordpress/element';
-import { PopoverContext } from '@wordpress/components';
-import App from './app';
+import { Popover } from '@wordpress/components';
+import Content from './Content';
 
 const app = document.getElementById( 'app' );
 
 render(
-	<PopoverContext target={ app }>
-		<App />
-	</PopoverContext>,
+	<div>
+		<Content />
+		<Popover.Slot />
+	</div>,
 	app
 );
 ```

components/popover/index.js

@@ -2,19 +2,20 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEqual, noop } from 'lodash';
+import { isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { createPortal, Component } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { focus, keycodes } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import PopoverDetectOutside from './detect-outside';
+import { Slot, Fill } from '../slot-fill';
 
 const { ESCAPE } = keycodes;
 
@@ -25,6 +26,13 @@ const { ESCAPE } = keycodes;
  */
 const ARROW_OFFSET = 20;
 
+/**
+ * Name of slot in which popover should fill.
+ *
+ * @type {String}
+ */
+const SLOT_NAME = 'Popover';
+
 export class Popover extends Component {
 	constructor() {
 		super( ...arguments );
@@ -222,7 +230,6 @@ export class Popover extends Component {
 			return null;
 		}
 
-		const { popoverTarget = document.body } = this.context;
 		const classes = classnames(
 			'components-popover',
 			className,
@@ -236,7 +243,7 @@ export class Popover extends Component {
 		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return (
 			<span ref={ this.bindNode( 'anchor' ) }>
-				{ createPortal(
+				<Fill name={ SLOT_NAME }>
 					<PopoverDetectOutside onClickOutside={ onClickOutside }>
 						<div
 							ref={ this.bindNode( 'popover' ) }
@@ -252,17 +259,14 @@ export class Popover extends Component {
 								{ children }
 							</div>
 						</div>
-					</PopoverDetectOutside>,
-					popoverTarget
-				) }
+					</PopoverDetectOutside>
+				</Fill>
 			</span>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }
 
-Popover.contextTypes = {
-	popoverTarget: noop,
-};
+Popover.Slot = () => <Slot name={ SLOT_NAME } />;
 
 export default Popover;

components/popover/test/index.js

@@ -7,7 +7,8 @@ import { shallow, mount } from 'enzyme';
  * Internal dependencies
  */
 import { Popover } from '../';
-import PopoverProvider from '../provider';
+
+jest.mock( '../../slot-fill/fill' );
 
 describe( 'Popover', () => {
 	describe( '#componentDidUpdate()', () => {
@@ -273,19 +274,5 @@ describe( 'Popover', () => {
 
 			expect( wrapper.find( '.components-popover' ).prop( 'role' ) ).toBe( 'tooltip' );
 		} );
-
-		it( 'should render into provider context', () => {
-			const element = require( '@wordpress/element' );
-			jest.spyOn( element, 'createPortal' );
-			const target = document.createElement( 'div' );
-
-			mount(
-				<PopoverProvider target={ target }>
-					<Popover isOpen>Hello</Popover>
-				</PopoverProvider>
-			);
-
-			expect( element.createPortal.mock.calls[ 0 ][ 1 ] ).toBe( target );
-		} );
 	} );
 } );

components/slot-fill/__mocks__/fill.js

@@ -0,0 +1 @@
+export default ( { children } ) => children;

components/tooltip/test/index.js

@@ -8,6 +8,8 @@ import { shallow, mount } from 'enzyme';
  */
 import Tooltip from '../';
 
+jest.mock( '../../slot-fill/fill' );
+
 describe( 'Tooltip', () => {
 	describe( '#render()', () => {
 		// Disable reason: The Tooltip component leverages array return values

editor/index.js

@@ -13,7 +13,7 @@ import 'moment-timezone/moment-timezone-utils';
  */
 import { EditableProvider } from '@wordpress/blocks';
 import { createElement, render } from '@wordpress/element';
-import { APIProvider, PopoverProvider, DropZoneProvider } from '@wordpress/components';
+import { APIProvider, DropZoneProvider, SlotFillProvider as WPSlotFillProvider } from '@wordpress/components';
 import { settings as dateSettings } from '@wordpress/date';
 
 /**
@@ -92,6 +92,15 @@ export function createEditorInstance( id, post, settings ) {
 			SlotFillProvider,
 		],
 
+		// Slot / Fill provider:
+		//
+		//  - context.getSlot
+		//  - context.registerSlot
+		//  - context.unregisterSlot
+		[
+			WPSlotFillProvider,
+		],
+
 		// Editable provider:
 		//
 		//  - context.onUndo
@@ -110,14 +119,6 @@ export function createEditorInstance( id, post, settings ) {
 			{ settings },
 		],
 
-		// Popover provider:
-		//
-		//  - context.popoverTarget
-		[
-			PopoverProvider,
-			{ target },
-		],
-
 		// APIProvider
 		//
 		//  - context.getAPISchema

editor/layout/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { NoticeList } from '@wordpress/components';
+import { NoticeList, Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -48,6 +48,7 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 				<MetaBoxes />
 			</div>
 			{ isSidebarOpened && <Sidebar /> }
+			<Popover.Slot />
 		</div>
 	);
 }