Remove findDOMNode usage from the inserter (#11363)

WordPress · Nov 1, 2018 · 6919650 · 6919650
1 parent 9c8923a
commit 6919650
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 186 deletions.
diff --git a/packages/block-library/src/more/test/__snapshots__/edit.js.snap b/packages/block-library/src/more/test/__snapshots__/edit.js.snap
@@ -3,13 +3,13 @@
 exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 <React.Fragment>
   <IfBlockEditSelected(InspectorControlsFill)>
-    <PanelBody>
+    <ForwardRef(PanelBody)>
       <WithInstanceId(ToggleControl)
         checked={false}
         label="Hide the teaser before the \\"More\\" tag"
         onChange={[Function]}
       />
-    </PanelBody>
+    </ForwardRef(PanelBody)>
   </IfBlockEditSelected(InspectorControlsFill)>
   <div
     className="wp-block-more"
@@ -28,13 +28,13 @@ exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 exports[`core/more/edit should match snapshot when noTeaser is true 1`] = `
 <React.Fragment>
   <IfBlockEditSelected(InspectorControlsFill)>
-    <PanelBody>
+    <ForwardRef(PanelBody)>
       <WithInstanceId(ToggleControl)
         checked={true}
         label="Hide the teaser before the \\"More\\" tag"
         onChange={[Function]}
       />
-    </PanelBody>
+    </ForwardRef(PanelBody)>
   </IfBlockEditSelected(InspectorControlsFill)>
   <div
     className="wp-block-more"

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### Polish
 
+- Forward `ref` in the `PanelBody` component.
 - Tooltip are no longer removed when Button becomes disabled, it's left to the component rendering the Tooltip.
 
 ## 5.0.1 (2018-10-30)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import Button from '../button';
 import Icon from '../icon';
 import { G, Path, SVG } from '../primitives';
 
-class PanelBody extends Component {
+export class PanelBody extends Component {
 	constructor( props ) {
 		super( ...arguments );
 		this.state = {
@@ -38,12 +38,12 @@ class PanelBody extends Component {
 	}
 
 	render() {
-		const { title, children, opened, className, icon } = this.props;
+		const { title, children, opened, className, icon, forwardedRef } = this.props;
 		const isOpened = opened === undefined ? this.state.opened : opened;
 		const classes = classnames( 'components-panel__body', className, { 'is-opened': isOpened } );
 
 		return (
-			<div className={ classes }>
+			<div className={ classes } ref={ forwardedRef }>
 				{ !! title && (
 					<h2 className="components-panel__body-title">
 						<Button
@@ -72,4 +72,9 @@ class PanelBody extends Component {
 	}
 }
 
-export default PanelBody;
+const forwardedPanelBody = ( props, ref ) => {
+	return <PanelBody { ...props } forwardedRef={ ref } />;
+};
+forwardedPanelBody.displayName = 'PanelBody';
+
+export default forwardRef( forwardedPanelBody );
diff --git a/packages/components/src/panel/test/__snapshots__/color.js.snap b/packages/components/src/panel/test/__snapshots__/color.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PanelColor should match snapshot when title is provided 1`] = `
-<PanelBody
+<[object Object]
   title={
     Array [
       <span

diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
@@ -6,7 +6,7 @@ import { shallow, mount } from 'enzyme';
 /**
  * Internal dependencies
  */
-import PanelBody from '../body';
+import { PanelBody } from '../body';
 
 jest.mock( '../../button' );
 

diff --git a/...it-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/...it-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,77 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `
-<PanelBody
-  className="my-plugin-post-publish-panel"
-  initialOpen={true}
-  key="1---0/.0"
-  title="My panel title"
->
-  <div
-    className="components-panel__body my-plugin-post-publish-panel is-opened"
-  >
-    <h2
-      className="components-panel__body-title"
-    >
-      <Button
-        aria-expanded={true}
-        className="components-panel__body-toggle"
-        onClick={[Function]}
-      >
-        <button
-          aria-expanded={true}
-          className="components-button components-panel__body-toggle"
-          onClick={[Function]}
-          type="button"
-        >
-          <SVG
-            className="components-panel__arrow"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <svg
-              aria-hidden="true"
-              className="components-panel__arrow"
-              focusable="false"
-              height="24px"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24px"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <G>
-                <g>
-                  <Path
-                    d="M0,0h24v24H0V0z"
-                    fill="none"
-                  >
-                    <path
-                      d="M0,0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </Path>
-                </g>
-              </G>
-              <G>
-                <g>
-                  <Path
-                    d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                  >
-                    <path
-                      d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                    />
-                  </Path>
-                </g>
-              </G>
-            </svg>
-          </SVG>
-          My panel title
-        </button>
-      </Button>
-    </h2>
-    My panel content
-  </div>
-</PanelBody>
-`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><svg class=\\"components-panel__arrow\\" width=\\"24px\\" height=\\"24px\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><g><path fill=\\"none\\" d=\\"M0,0h24v24H0V0z\\"></path></g><g><path d=\\"M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z\\"></path></g></svg>My panel title</button></h2>My panel content</div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js
@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { mount } from 'enzyme';
-
 /**
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
+import { render } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,19 +13,21 @@ jest.mock( '../../../../../../components/src/button' );
 
 describe( 'PluginPostPublishPanel', () => {
 	test( 'renders fill properly', () => {
-		const wrapper = mount(
+		const div = document.createElement( 'div' );
+		render(
 			<SlotFillProvider>
 				<PluginPostPublishPanel
 					className="my-plugin-post-publish-panel"
 					title="My panel title"
 					initialOpen={ true }
 				>
-					My panel content
+				My panel content
 				</PluginPostPublishPanel>
 				<PluginPostPublishPanel.Slot />
-			</SlotFillProvider>
+			</SlotFillProvider>,
+			div
 		);
 
-		expect( wrapper.find( 'Slot' ).children() ).toMatchSnapshot();
+		expect( div.innerHTML ).toMatchSnapshot();
 	} );
 } );
diff --git a/...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,77 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `
-<PanelBody
-  className="my-plugin-pre-publish-panel"
-  initialOpen={true}
-  key="1---0/.0"
-  title="My panel title"
->
-  <div
-    className="components-panel__body my-plugin-pre-publish-panel is-opened"
-  >
-    <h2
-      className="components-panel__body-title"
-    >
-      <Button
-        aria-expanded={true}
-        className="components-panel__body-toggle"
-        onClick={[Function]}
-      >
-        <button
-          aria-expanded={true}
-          className="components-button components-panel__body-toggle"
-          onClick={[Function]}
-          type="button"
-        >
-          <SVG
-            className="components-panel__arrow"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <svg
-              aria-hidden="true"
-              className="components-panel__arrow"
-              focusable="false"
-              height="24px"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24px"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <G>
-                <g>
-                  <Path
-                    d="M0,0h24v24H0V0z"
-                    fill="none"
-                  >
-                    <path
-                      d="M0,0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </Path>
-                </g>
-              </G>
-              <G>
-                <g>
-                  <Path
-                    d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                  >
-                    <path
-                      d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                    />
-                  </Path>
-                </g>
-              </G>
-            </svg>
-          </SVG>
-          My panel title
-        </button>
-      </Button>
-    </h2>
-    My panel content
-  </div>
-</PanelBody>
-`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><svg class=\\"components-panel__arrow\\" width=\\"24px\\" height=\\"24px\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><g><path fill=\\"none\\" d=\\"M0,0h24v24H0V0z\\"></path></g><g><path d=\\"M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z\\"></path></g></svg>My panel title</button></h2>My panel content</div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js
@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { mount } from 'enzyme';
-
 /**
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
+import { render } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,7 +13,8 @@ jest.mock( '../../../../../../components/src/button' );
 
 describe( 'PluginPrePublishPanel', () => {
 	test( 'renders fill properly', () => {
-		const wrapper = mount(
+		const div = document.createElement( 'div' );
+		render(
 			<SlotFillProvider>
 				<PluginPrePublishPanel
 					className="my-plugin-pre-publish-panel"
@@ -27,9 +24,10 @@ describe( 'PluginPrePublishPanel', () => {
 					My panel content
 				</PluginPrePublishPanel>
 				<PluginPrePublishPanel.Slot />
-			</SlotFillProvider>
+			</SlotFillProvider>,
+			div
 		);
 
-		expect( wrapper.find( 'Slot' ).children() ).toMatchSnapshot();
+		expect( div.innerHTML ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## 6.1.1 (Unreleased)
 
+### Polish
+
+- Remove `findDOMNode` usage from the `Inserter` component.
+
 ## 6.1.0 (2018-10-30)
 
 ### Deprecations

diff --git a/packages/editor/src/components/inserter/menu.js b/packages/editor/src/components/inserter/menu.js
@@ -21,7 +21,7 @@ import scrollIntoView from 'dom-scroll-into-view';
  * WordPress dependencies
  */
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
-import { Component, findDOMNode, createRef } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import { withSpokenMessages, PanelBody } from '@wordpress/components';
 import {
 	getCategories,
@@ -163,7 +163,7 @@ export class InserterMenu extends Component {
 				this.props.setTimeout( () => {
 					// We need a generic way to access the panel's container
 					// eslint-disable-next-line react/no-find-dom-node
-					scrollIntoView( findDOMNode( this.panels[ panel ] ), this.inserterResults.current, {
+					scrollIntoView( this.panels[ panel ], this.inserterResults.current, {
 						alignWithTop: true,
 					} );
 				} );