Inline commenting: UX Enhancements for Comments

packages/editor/src/components/collab-sidebar/add-comment.js

@@ -45,7 +45,7 @@ export function AddComment( {
 	return (
 		<VStack
 			spacing="3"
-			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
+			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread"
 		>
 			<HStack alignment="left" spacing="3">
 				<CommentAuthorInfo />

packages/editor/src/components/collab-sidebar/comment-button.js

@@ -17,13 +17,18 @@ const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
 const AddCommentButton = ( { onClick } ) => {
 	return (
 		<CommentIconSlotFill.Fill>
-			<MenuItem
-				icon={ commentIcon }
-				onClick={ onClick }
-				aria-haspopup="dialog"
-			>
-				{ _x( 'Comment', 'Add comment button' ) }
-			</MenuItem>
+			{ ( { onClose } ) => (
+				<MenuItem
+					icon={ commentIcon }
+					onClick={ () => {
+						onClick();
+						onClose();
+					} }
+					aria-haspopup="dialog"
+				>
+					{ _x( 'Comment', 'Add comment button' ) }
+				</MenuItem>
+			) }
 		</CommentIconSlotFill.Fill>
 	);
 };

packages/editor/src/components/collab-sidebar/comment-form.js

@@ -42,7 +42,10 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 					__next40pxDefaultSize
 					accessibleWhenDisabled
 					variant="primary"
-					onClick={ () => onSubmit( inputComment ) }
+					onClick={ () => {
+						onSubmit( inputComment );
+						setInputComment( '' );
+					} }
 					disabled={
 						0 === sanitizeCommentString( inputComment ).length
 					}