Panel: Improve scroll view handling when expanding (#23327)

* Add scrollIntoView interaction for PanelBody Refactor interactions with Reakit/Disclosure. Add custom hooks for ref and rendering handling. * Adjust PanelBody story to include scrollIntoView example * Adjust bottom padding for Layout sidebar * Allow for opened prop to control disclosure state * Update PanelBody tests * Update snapshots * Fix tests for PanelColorSettings + Update snapshots * Add new PanelBody props to README * Add react-merge-refs dependency * Use react-merge-refs util * Update test snapshots * Remove disableSmoothScrollIntoView prop from PanelBody * Update snapshots * Remove focusable prop * Remove use-combined-refs - No longer needed * Remove onToggle from useUpdateEffect deps array * Adjust onToggle callback handling * Remove Reakit/Disclosure integration (for now) * Update PanelBody tests * Update snapshots * Fix initialOpen handling for PanelBody * Remove unnecessary act wrappers in panel body tests
WordPress · Jul 14, 2020 · bb00ad8 · bb00ad8
1 parent eb856ef
commit bb00ad8
Show file tree

Hide file tree

Showing 12 changed files with 347 additions and 258 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/panel-color-settings/test/index.js b/packages/block-editor/src/components/panel-color-settings/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { noop } from 'lodash';
 
 /**
@@ -11,120 +11,106 @@ import PanelColorSettings from '../';
 
 describe( 'PanelColorSettings', () => {
 	it( 'should not render anything if there are no colors to choose', async () => {
-		let root;
-
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-						},
-					] }
-				/>
-			);
-		} );
-
-		expect( root.toJSON() ).toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).toBe( '' );
 	} );
 
 	it( 'should render a color panel if at least one setting supports custom colors', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-							disableCustomColors: false,
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						disableCustomColors: false,
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 
 	it( 'should render a color panel if at least one setting specifies some colors to choose', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-							colors: [
-								{
-									slug: 'red',
-									name: 'Red',
-									color: '#ff0000',
-								},
-							],
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [
+							{
+								slug: 'red',
+								name: 'Red',
+								color: '#ff0000',
+							},
+						],
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 
 	it( 'should not render anything if none of the setting panels has colors to choose', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ false }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-							colors: [],
-							disableCustomColors: true,
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-							colors: [],
-							disableCustomColors: true,
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ false }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [],
+						disableCustomColors: true,
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						colors: [],
+						disableCustomColors: true,
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 } );
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,14 +3,14 @@
 exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 <React.Fragment>
   <InspectorControls>
-    <ForwardRef(PanelBody)>
+    <PanelBody>
       <ToggleControl
         checked={false}
         help={[Function]}
         label="Hide the excerpt on the full content page"
         onChange={[Function]}
       />
-    </ForwardRef(PanelBody)>
+    </PanelBody>
   </InspectorControls>
   <div
     className="wp-block-more"
@@ -33,14 +33,14 @@ 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>
   <InspectorControls>
-    <ForwardRef(PanelBody)>
+    <PanelBody>
       <ToggleControl
         checked={true}
         help={[Function]}
         label="Hide the excerpt on the full content page"
         onChange={[Function]}
       />
-    </ForwardRef(PanelBody)>
+    </PanelBody>
   </InspectorControls>
   <div
     className="wp-block-more"

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -53,6 +53,7 @@
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
 		"react-dates": "^17.1.1",
+		"react-merge-refs": "^1.0.0",
 		"react-resize-aware": "^3.0.1",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^7.0.15",