Reusable blocks: Fix dismiss notice after error (#28015)

WordPress · Jan 7, 2021 · 62e074b · 62e074b
1 parent 4834daf
commit 62e074b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js
@@ -30,7 +30,7 @@ class ImportForm extends Component {
 	}
 
 	onChangeFile( event ) {
-		this.setState( { file: event.target.files[ 0 ] } );
+		this.setState( { file: event.target.files[ 0 ], error: null } );
 	}
 
 	onSubmit( event ) {
@@ -71,6 +71,10 @@ class ImportForm extends Component {
 			} );
 	}
 
+	onDismissError() {
+		this.setState( { error: null } );
+	}
+
 	render() {
 		const { instanceId } = this.props;
 		const { file, isLoading, error } = this.state;
@@ -80,7 +84,14 @@ class ImportForm extends Component {
 				className="list-reusable-blocks-import-form"
 				onSubmit={ this.onSubmit }
 			>
-				{ error && <Notice status="error">{ error }</Notice> }
+				{ error && (
+					<Notice
+						status="error"
+						onRemove={ () => this.onDismissError() }
+					>
+						{ error }
+					</Notice>
+				) }
 				<label
 					htmlFor={ inputId }
 					className="list-reusable-blocks-import-form__label"

diff --git a/packages/list-reusable-blocks/src/components/import-form/style.scss b/packages/list-reusable-blocks/src/components/import-form/style.scss
@@ -4,10 +4,18 @@
 }
 
 .list-reusable-blocks-import-form__button {
-	margin-top: 20px;
+	margin-top: 10px;
+	margin-bottom: 10px;
 	float: right;
 }
 
-.list-reusable-blocks-import-form .components-notice__content {
-	margin: 0;
+.list-reusable-blocks-import-form {
+	.components-notice__content {
+		margin: 0;
+	}
+
+	.components-notice.is-dismissible {
+		padding-right: 0;
+		margin: 5px 0;
+	}
 }