From a49b0d6fa76f6611202ebf2249771a97518a047d Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Thu, 13 Aug 2020 16:53:37 -0400
Subject: [PATCH] fix missing top border on comment box (#3102)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../Comments/Comment/EditCommentForm/EditCommentForm.css  | 7 ++-----
 .../Comments/Comment/EditCommentForm/EditCommentForm.tsx  | 4 ++++
 .../tabs/Comments/Stream/CommentForm/CommentForm.css      | 1 +
 .../tabs/Comments/Stream/CommentForm/CommentForm.tsx      | 3 ++-
 .../Comments/Stream/PostCommentForm/PostCommentForm.tsx   | 2 +-
 .../stream/__snapshots__/editComment.spec.tsx.snap        | 8 ++++----
 6 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.css b/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.css
index 69b054ad2..94bf412cc 100644
--- a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.css
+++ b/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.css
@@ -1,6 +1,3 @@
-$commentsBorder: var(--palette-grey-300);
-
-.commentFormBox {
-  border: 1px solid $commentsBorder;
-  border-radius: var(--round-corners);
+.root {
+  margin-top: var(--spacing-2);
 }
diff --git a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx b/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
index 219bab47e..fb38f738e 100644
--- a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
@@ -11,6 +11,8 @@ import CommentForm from "../../Stream/CommentForm";
 import TopBarLeft from "../TopBarLeft";
 import Username from "../Username";
 
+import styles from "./EditCommentForm.css";
+
 export interface EditCommentFormProps {
   id: string;
   className?: string;
@@ -63,6 +65,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = (props) => {
         expired={props.expired}
         placeholder="Edit comment"
         placeHolderId="comments-editCommentForm-rte"
+        topBorder={true}
         disabledMessage={
           <Localized id="comments-editCommentForm-editTimeExpired">
             Edit time has expired. You can no longer edit this comment. Why not
@@ -76,6 +79,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = (props) => {
             </AriaInfo>
           </Localized>
         }
+        className={styles.root}
         rteConfig={props.rteConfig}
       />
     </div>
diff --git a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.css b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.css
index e9d74f02c..b4decdab5 100644
--- a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.css
+++ b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.css
@@ -3,6 +3,7 @@ $commentsBorder: var(--palette-grey-300);
 .commentFormBox {
   border: 1px solid $commentsBorder;
   border-radius: var(--round-corners);
+  overflow: hidden;
 }
 
 .noTopBorder {
diff --git a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
index 5c47a29d2..21b6ba6b7 100644
--- a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
@@ -79,6 +79,7 @@ interface Props {
   bodyInputID: string;
   siteID: string;
   topBorder?: boolean;
+  className?: string;
 }
 
 const CommentForm: FunctionComponent<Props> = (props) => {
@@ -122,7 +123,7 @@ const CommentForm: FunctionComponent<Props> = (props) => {
   );
 
   return (
-    <div className={CLASSES[props.classNameRoot].$root}>
+    <div className={cn(CLASSES[props.classNameRoot].$root, props.className)}>
       <Form onSubmit={onSubmit} initialValues={props.initialValues}>
         {({
           handleSubmit,
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx
index acacc50ac..09e103a60 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx
@@ -72,6 +72,7 @@ const PostCommentForm: FunctionComponent<Props> = (props) => {
         onSubmit={props.onSubmit}
         onChange={props.onChange}
         min={props.min}
+        topBorder={!props.showMessageBox}
         initialValues={props.initialValues}
         max={props.max}
         disabled={props.disabled}
@@ -107,7 +108,6 @@ const PostCommentForm: FunctionComponent<Props> = (props) => {
         submitStatus={
           <PostCommentSubmitStatusContainer status={props.submitStatus} />
         }
-        topBorder={false}
       />
     </div>
   );
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
index 407f988e5..5fe596c0d 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
@@ -328,7 +328,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"
@@ -524,7 +524,7 @@ exports[`edit a comment: edit form 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"
@@ -720,7 +720,7 @@ exports[`edit a comment: optimistic response 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"
@@ -1798,7 +1798,7 @@ exports[`shows expiry message: edit time expired 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"