From 3e74d9aa81f6b96bbeaeae73ea74582f854e9297 Mon Sep 17 00:00:00 2001
From: James Newell <james.newell@automattic.com>
Date: Wed, 20 Nov 2019 12:28:18 +1100
Subject: [PATCH] hide instructions when smaller than 320px

---
 packages/components/package.json                  |  1 +
 packages/components/src/placeholder/index.js      |  6 +++++-
 packages/components/src/placeholder/style.scss    |  1 +
 packages/components/src/placeholder/test/index.js | 14 ++++++++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 15f5c06e598a4..e53fece83feb8 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -44,6 +44,7 @@
 		"mousetrap": "^1.6.2",
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
+		"react-resize-aware": "^3.0.0-beta.7",
 		"react-spring": "^8.0.20",
 		"reakit": "^1.0.0-beta.12",
 		"rememo": "^3.0.0",
diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js
index b2f41381246ee..7b6a0412ccdd2 100644
--- a/packages/components/src/placeholder/index.js
+++ b/packages/components/src/placeholder/index.js
@@ -2,6 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isString } from 'lodash';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * Internal dependencies
@@ -15,10 +17,12 @@ import Icon from '../icon';
  * @return {Object}       The rendered placeholder.
  */
 function Placeholder( { icon, children, label, instructions, className, notices, preview, isColumnLayout, ...additionalProps } ) {
+	const [ resizeListener, { width } ] = useResizeAware();
 	const classes = classnames( 'components-placeholder', className );
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', { 'is-column-layout': isColumnLayout } );
 	return (
 		<div { ...additionalProps } className={ classes }>
+			{ resizeListener }
 			{ notices }
 			{ preview &&
 				<div className="components-placeholder__preview">
@@ -29,7 +33,7 @@ function Placeholder( { icon, children, label, instructions, className, notices,
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			{ !! instructions && <div className="components-placeholder__instructions">{ instructions }</div> }
+			{ !! instructions && ( width === null || width >= 320 ) && <div className="components-placeholder__instructions">{ instructions }</div> }
 			<div className={ fieldsetClasses }>
 				{ children }
 			</div>
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index f1f3b7f779da7..905e63605678e 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -1,4 +1,5 @@
 .components-placeholder {
+	position: relative;
 	margin-bottom: $default-block-margin;
 	padding: 1em;
 	min-height: 200px;
diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js
index ed27f2834c3d4..62f05f2b1e9b4 100644
--- a/packages/components/src/placeholder/test/index.js
+++ b/packages/components/src/placeholder/test/index.js
@@ -1,7 +1,9 @@
+jest.mock( 'react-resize-aware' );
 /**
  * External dependencies
  */
 import { shallow } from 'enzyme';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * Internal dependencies
@@ -9,6 +11,8 @@ import { shallow } from 'enzyme';
 import Placeholder from '../';
 
 describe( 'Placeholder', () => {
+	useResizeAware.mockReturnValue( [ <div key="1" />, { width: 320 } ] );
+
 	describe( 'basic rendering', () => {
 		it( 'should by default render label section and fieldset.', () => {
 			const placeholder = shallow( <Placeholder /> );
@@ -53,6 +57,16 @@ describe( 'Placeholder', () => {
 			expect( child.matchesElement( element ) ).toBe( true );
 		} );
 
+		it( 'should not display an instructions element when smaller than 320px', () => {
+			useResizeAware.mockReturnValue( [ <div key="1" />, { width: 319 } ] );
+			const element = <div>Instructions</div>;
+			const placeholder = shallow(
+				<Placeholder instructions={ element } />
+			);
+			const placeholderInstructions = placeholder.find( '.components-placeholder__instructions' );
+			expect( placeholderInstructions.exists() ).toBe( false );
+		} );
+
 		it( 'should display a fieldset from the children property', () => {
 			const element = <div>Fieldset</div>;
 			const placeholder = shallow( <Placeholder children={ element } /> );