From 24682657a20449a8981b51ca674484d7b7fa09e9 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 1/3] Hide Placeholder instructions when smaller than 320px

---
 .../src/components/media-placeholder/index.js |  1 -
 .../components/media-placeholder/style.scss   |  6 ---
 packages/components/package.json              |  1 +
 .../components/src/form-file-upload/index.js  |  8 ++--
 .../src/form-file-upload/style.scss           |  5 ---
 packages/components/src/placeholder/index.js  | 12 +++++-
 .../components/src/placeholder/style.scss     | 43 ++++++++++++++++---
 .../components/src/placeholder/test/index.js  | 14 ++++++
 packages/components/src/style.scss            |  1 -
 9 files changed, 65 insertions(+), 26 deletions(-)
 delete mode 100644 packages/components/src/form-file-upload/style.scss

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index c2cba7aaf28589..2d377446c87a42 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -345,7 +345,6 @@ export class MediaPlaceholder extends Component {
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
-										icon="upload"
 									>
 										{ __( 'Upload' ) }
 									</IconButton>
diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
index 794163e6678a82..8a8c7488fb37dc 100644
--- a/packages/block-editor/src/components/media-placeholder/style.scss
+++ b/packages/block-editor/src/components/media-placeholder/style.scss
@@ -1,6 +1,4 @@
 .block-editor-media-placeholder__url-input-container {
-	width: 100%;
-
 	// Reset the margin to ensure the url popover is adjacent to the button.
 	.block-editor-media-placeholder__button {
 		margin-bottom: 0;
@@ -47,10 +45,6 @@
 	display: block;
 }
 
-.components-form-file-upload .block-editor-media-placeholder__button {
-	margin-right: $grid-size-small;
-}
-
 .block-editor-media-placeholder.is-appender {
 	min-height: 100px;
 	outline: $border-width dashed $dark-gray-150;
diff --git a/packages/components/package.json b/packages/components/package.json
index ce48be95d2aae5..248d62d01fe774 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -46,6 +46,7 @@
 		"mousetrap": "^1.6.2",
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
+		"react-resize-aware": "^3.0.0",
 		"react-spring": "^8.0.20",
 		"reakit": "^1.0.0-beta.12",
 		"rememo": "^3.0.0",
diff --git a/packages/components/src/form-file-upload/index.js b/packages/components/src/form-file-upload/index.js
index 1314e4d5b85ae0..28ce218c3ac6a9 100644
--- a/packages/components/src/form-file-upload/index.js
+++ b/packages/components/src/form-file-upload/index.js
@@ -6,7 +6,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import IconButton from '../icon-button';
+import Button from '../button';
 
 class FormFileUpload extends Component {
 	constructor() {
@@ -27,7 +27,6 @@ class FormFileUpload extends Component {
 		const {
 			accept,
 			children,
-			icon = 'upload',
 			multiple = false,
 			onChange,
 			render,
@@ -36,13 +35,12 @@ class FormFileUpload extends Component {
 
 		const ui = render ?
 			render( { openFileDialog: this.openFileDialog } ) : (
-				<IconButton
-					icon={ icon }
+				<Button
 					onClick={ this.openFileDialog }
 					{ ...props }
 				>
 					{ children }
-				</IconButton>
+				</Button>
 			);
 		return (
 			<div className="components-form-file-upload">
diff --git a/packages/components/src/form-file-upload/style.scss b/packages/components/src/form-file-upload/style.scss
deleted file mode 100644
index 3acfdffecf3123..00000000000000
--- a/packages/components/src/form-file-upload/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.components-form-file-upload {
-	.components-button.is-large {
-		padding-left: 6px;
-	}
-}
diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js
index b2f41381246eed..0907714c0b4e3c 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,18 @@ import Icon from '../icon';
  * @return {Object}       The rendered placeholder.
  */
 function Placeholder( { icon, children, label, instructions, className, notices, preview, isColumnLayout, ...additionalProps } ) {
-	const classes = classnames( 'components-placeholder', className );
+	const [ resizeListener, { width } ] = useResizeAware();
+	const classes = classnames(
+		'components-placeholder',
+		( width >= 320 ? 'size-lg' : '' ),
+		( width >= 160 && width < 320 ? 'size-md' : '' ),
+		( width < 160 ? 'size-sm' : '' ),
+		className
+	);
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', { 'is-column-layout': isColumnLayout } );
 	return (
 		<div { ...additionalProps } className={ classes }>
+			{ resizeListener }
 			{ notices }
 			{ preview &&
 				<div className="components-placeholder__preview">
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 071306678b3738..125813d9eb5857 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -1,15 +1,15 @@
 .components-placeholder {
+	position: relative;
 	margin-bottom: $default-block-margin;
 	padding: 1em;
 	min-height: 200px;
 	width: 100%;
-	text-align: center;
+	text-align: left;
 
 	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
 	@supports (position: sticky) {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
 		justify-content: center;
 	}
 
@@ -30,8 +30,6 @@
 
 .components-placeholder__label {
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	font-weight: 600;
 	margin-bottom: 1em;
 
@@ -46,9 +44,7 @@
 .components-placeholder__fieldset form {
 	display: flex;
 	flex-direction: row;
-	justify-content: center;
 	width: 100%;
-	max-width: 400px;
 	flex-wrap: wrap;
 	z-index: z-index(".components-placeholder__fieldset");
 
@@ -79,7 +75,8 @@
 }
 
 .components-placeholder__fieldset .components-button {
-	margin-right: 4px;
+	margin-right: $grid-size;
+	margin-bottom: $grid-size; // If buttons wrap we need vertical space between.
 
 	&:last-child {
 		margin-right: 0;
@@ -98,3 +95,35 @@
 		margin-right: 0;
 	}
 }
+
+// Element queries to show different layouts at various sizes.
+.components-placeholder {
+
+	// Medium and small sizes.
+	&.size-md,
+	&.size-sm {
+		.components-placeholder__instructions {
+			display: none;
+		}
+
+		.components-placeholder__fieldset,
+		.components-placeholder__fieldset form {
+			flex-direction: column;
+		}
+
+		.components-placeholder__fieldset .components-button {
+			margin-right: auto;
+		}
+	}
+
+	// Small sizes.
+	&.size-sm {
+		.block-editor-block-icon {
+			display: none;
+		}
+
+		.components-button {
+			padding: 0 $grid-size 2px;
+		}
+	}
+}
diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js
index ed27f2834c3d42..62f05f2b1e9b49 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 } /> );
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 80ac1ac25c10e2..b429d051bf0204 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -20,7 +20,6 @@
 @import "./external-link/style.scss";
 @import "./focal-point-picker/style.scss";
 @import "./font-size-picker/style.scss";
-@import "./form-file-upload/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";

From e4846083a0e6cc570227fd3d7642212ac5fda6db Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 16 Dec 2019 08:52:54 +0100
Subject: [PATCH 2/3] React Resize Aware.

---
 package-lock.json                             | 10 +++++--
 .../block-pattern-picker/style.scss           |  7 ++---
 .../src/components/media-placeholder/index.js |  4 +--
 packages/block-library/src/cover/editor.scss  | 18 +++----------
 packages/block-library/src/table/edit.js      |  1 -
 packages/block-library/src/table/editor.scss  | 27 ++++++++++---------
 packages/components/src/button/style.scss     |  2 +-
 .../src/circular-option-picker/style.scss     |  4 ---
 packages/components/src/placeholder/index.js  |  7 +++--
 .../components/src/placeholder/style.scss     | 14 +++++++---
 10 files changed, 46 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 65420496fede33..0bef734947572d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7726,6 +7726,7 @@
 				"mousetrap": "^1.6.2",
 				"re-resizable": "^6.0.0",
 				"react-dates": "^17.1.1",
+				"react-resize-aware": "^3.0.0",
 				"react-spring": "^8.0.20",
 				"reakit": "^1.0.0-beta.12",
 				"rememo": "^3.0.0",
@@ -22840,7 +22841,7 @@
 			"dependencies": {
 				"clone-deep": {
 					"version": "0.2.4",
-					"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+					"resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
 					"integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
 					"dev": true,
 					"requires": {
@@ -22874,7 +22875,7 @@
 					"dependencies": {
 						"kind-of": {
 							"version": "2.0.1",
-							"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+							"resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
 							"integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
 							"dev": true,
 							"requires": {
@@ -28595,6 +28596,11 @@
 			"integrity": "sha512-ITw8t/HOFNose2yf1y9pPFSSeB9ISOq2JdHpuZvj/Qb+iSsLml8GkkHdDlURzieO7B3dFDtMrrneZLl3N5z/hg==",
 			"dev": true
 		},
+		"react-resize-aware": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/react-resize-aware/-/react-resize-aware-3.0.0.tgz",
+			"integrity": "sha512-UyLk1KNbFHDye9AFLyr7HBGmzkRDGz2mYp6LDS+LCxM6DXGpviwS5Q4JRzXWdw0tk+n46UE/Kotku/cb8HCh0Q=="
+		},
 		"react-select": {
 			"version": "3.0.8",
 			"resolved": "https://registry.npmjs.org/react-select/-/react-select-3.0.8.tgz",
diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-pattern-picker/style.scss
index d5653af4c00b19..7f815c40b8ac25 100644
--- a/packages/block-editor/src/components/block-pattern-picker/style.scss
+++ b/packages/block-editor/src/components/block-pattern-picker/style.scss
@@ -19,16 +19,17 @@
 
 .block-editor-block-pattern-picker__patterns.block-editor-block-pattern-picker__patterns {
 	display: flex;
-	justify-content: center;
+	justify-content: flex-start;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 100%;
-	margin: $grid-size-small 0;
+	margin: $grid-size-large 0;
+	padding: 0;
 	list-style: none;
 
 	> li {
 		list-style: none;
-		margin: $grid-size;
+		margin: 0 $grid-size 0 0;
 		flex-shrink: 1;
 		max-width: 100px;
 	}
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 2d377446c87a42..c5b9f43752782c 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -339,7 +339,7 @@ export class MediaPlaceholder extends Component {
 						render={ ( { openFileDialog } ) => {
 							const content = (
 								<>
-									<IconButton
+									<Button
 										isSecondary
 										className={ classnames(
 											'block-editor-media-placeholder__button',
@@ -347,7 +347,7 @@ export class MediaPlaceholder extends Component {
 										) }
 									>
 										{ __( 'Upload' ) }
-									</IconButton>
+									</Button>
 									{ mediaLibraryButton }
 									{ this.renderUrlSelectionUI() }
 									{ this.renderCancelLink() }
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index a824f33c85b2f2..24e4a9a039a11c 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -13,9 +13,9 @@
 		color: $light-gray-100;
 	}
 
-	// wp-block-cover class is used just to increase selector specificity
+	// The .wp-block-cover class is used just to increase selector specificity.
 	.wp-block-cover__inner-container {
-		// avoid text align inherit from cover image align.
+		// Avoid text align inherit from cover image align.
 		text-align: left;
 	}
 
@@ -24,24 +24,12 @@
 		margin-right: 0;
 	}
 
-	&.components-placeholder {
-		// use opacity to work in various editor styles
-		background: $dark-opacity-light-200;
-		min-height: 200px;
-
-		.is-dark-theme & {
-			background: $light-opacity-light-200;
-		}
-	}
-
 	.wp-block-cover__placeholder-background-options {
-		// wraps about 6 color swatches
-		max-width: 260px;
 		margin-top: 1em;
 		width: 100%;
 	}
 
-	// Apply max-width to floated items that have no intrinsic width
+	// Apply max-width to floated items that have no intrinsic width.
 	[data-align="left"] &,
 	[data-align="right"] & {
 		max-width: $content-width / 2;
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 3d837bb3c0a90d..9419b9985202dc 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -502,7 +502,6 @@ export class TableEdit extends Component {
 					label={ __( 'Table' ) }
 					icon={ <BlockIcon icon={ icon } showColors /> }
 					instructions={ __( 'Insert a table for sharing data.' ) }
-					isColumnLayout
 				>
 					<form className="wp-block-table__placeholder-form" onSubmit={ this.onCreateTable }>
 						<TextControl
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index 195144afe1be76..4bbab7aaeeae1d 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -46,22 +46,25 @@
 		border-style: double;
 	}
 
-	// Extra specificity to override default Placeholder styles.
-	&__placeholder-form.wp-block-table__placeholder-form {
-		text-align: left;
-		align-items: center;
+	figcaption {
+		@include caption-style-theme();
 	}
+}
 
-	&__placeholder-input {
-		width: 100px;
-	}
+// Extra specificity to override default Placeholder styles.
+.wp-block-table__placeholder-form.wp-block-table__placeholder-form {
+	.wp-block-table__placeholder-input {
+		width: $grid-size * 14;
+		margin-right: $grid-size;
+		margin-bottom: 0;
 
-	&__placeholder-button {
-		min-width: 100px;
-		justify-content: center;
+		input {
+			height: $icon-button-size;
+		}
 	}
 
-	figcaption {
-		@include caption-style-theme();
+	.wp-block-table__placeholder-button {
+		margin-top: auto;
+		margin-right: auto;
 	}
 }
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 16ecb23879e2ab..154120ffd2c2b1 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -9,7 +9,7 @@
 	background: none;
 	transition: box-shadow 0.1s linear;
 	@include reduce-motion("transition");
-	height: 36px;
+	height: $icon-button-size;
 	align-items: center;
 	box-sizing: border-box;
 	padding: 0 8px;
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 825e8208a373f5..659dbbe78df44c 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -32,10 +32,6 @@ $color-palette-circle-spacing: 12px;
 		height: 100%;
 		width: 100%;
 	}
-
-	&:nth-child(6n+6) {
-		margin-right: 0;
-	}
 }
 
 .components-circular-option-picker__option-wrapper::before {
diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js
index 0907714c0b4e3c..efd3bee886f6fe 100644
--- a/packages/components/src/placeholder/index.js
+++ b/packages/components/src/placeholder/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 import useResizeAware from 'react-resize-aware';
 
 /**
@@ -20,9 +19,9 @@ function Placeholder( { icon, children, label, instructions, className, notices,
 	const [ resizeListener, { width } ] = useResizeAware();
 	const classes = classnames(
 		'components-placeholder',
-		( width >= 320 ? 'size-lg' : '' ),
-		( width >= 160 && width < 320 ? 'size-md' : '' ),
-		( width < 160 ? 'size-sm' : '' ),
+		( width >= 320 ? 'is-large' : '' ),
+		( width >= 160 && width < 320 ? 'is-medium' : '' ),
+		( width < 160 ? 'is-small' : '' ),
 		className
 	);
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', { 'is-column-layout': isColumnLayout } );
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 125813d9eb5857..eaa031c77f5d4e 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -1,4 +1,4 @@
-.components-placeholder {
+.components-placeholder.components-placeholder { // This needs specificity to override individual block styles.
 	position: relative;
 	margin-bottom: $default-block-margin;
 	padding: 1em;
@@ -11,6 +11,7 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
+		align-items: flex-start;
 	}
 
 	// Use opacity to work in various editor styles.
@@ -19,6 +20,10 @@
 	.is-dark-theme & {
 		background: $light-opacity-light-200;
 	}
+
+	.components-base-control__label {
+		font-size: $default-font-size;
+	}
 }
 
 .components-placeholder__instructions,
@@ -33,6 +38,7 @@
 	font-weight: 600;
 	margin-bottom: 1em;
 
+	> svg,
 	.dashicon,
 	.block-editor-block-icon {
 		fill: currentColor;
@@ -100,8 +106,8 @@
 .components-placeholder {
 
 	// Medium and small sizes.
-	&.size-md,
-	&.size-sm {
+	&.is-medium,
+	&.is-small {
 		.components-placeholder__instructions {
 			display: none;
 		}
@@ -117,7 +123,7 @@
 	}
 
 	// Small sizes.
-	&.size-sm {
+	&.is-small {
 		.block-editor-block-icon {
 			display: none;
 		}

From 3ee790859a3808c70aeaa803a92fb0c35fba63b2 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 19 Dec 2019 10:04:25 +0100
Subject: [PATCH 3/3] Fix unit tests

---
 .../src/embed/test/__snapshots__/index.js.snap         | 10 +++++++++-
 packages/components/src/form-file-upload/test/index.js |  6 +++---
 packages/components/src/placeholder/test/index.js      | 10 ----------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index f0439c6a4c69f5..eff8cabaaad89c 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -2,8 +2,16 @@
 
 exports[`core/embed block edit matches snapshot 1`] = `
 <div
-  class="components-placeholder wp-block-embed"
+  class="components-placeholder is-small wp-block-embed"
 >
+  <iframe
+    aria-hidden="true"
+    aria-label="resize-listener"
+    frameborder="0"
+    src="about:blank"
+    style="display:block;opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1"
+    tabindex="-1"
+  />
   <div
     class="components-placeholder__label"
   >
diff --git a/packages/components/src/form-file-upload/test/index.js b/packages/components/src/form-file-upload/test/index.js
index 5a81c898d81bb1..1f9faad4e5cd27 100644
--- a/packages/components/src/form-file-upload/test/index.js
+++ b/packages/components/src/form-file-upload/test/index.js
@@ -9,7 +9,7 @@ import { noop } from 'lodash';
  */
 import FormFileUpload from '../';
 
-describe( 'InserterMenu', () => {
+describe( 'FormFileUpload', () => {
 	it( 'should show an Icon Button and a hidden input', () => {
 		const wrapper = shallow(
 			<FormFileUpload
@@ -22,9 +22,9 @@ describe( 'InserterMenu', () => {
 			</FormFileUpload>
 		);
 
-		const iconButton = wrapper.find( 'ForwardRef(IconButton)' );
+		const button = wrapper.find( 'ForwardRef(Button)' );
 		const input = wrapper.find( 'input' );
-		expect( iconButton.prop( 'children' ) ).toBe( 'My Upload Button' );
+		expect( button.prop( 'children' ) ).toBe( 'My Upload Button' );
 		expect( input.prop( 'style' ).display ).toBe( 'none' );
 	} );
 } );
diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js
index 62f05f2b1e9b49..7f8cbc82e52175 100644
--- a/packages/components/src/placeholder/test/index.js
+++ b/packages/components/src/placeholder/test/index.js
@@ -57,16 +57,6 @@ 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 } /> );