mobile small improvement

elastic · Mar 26, 2020 · 9e2a095 · 9e2a095
1 parent 4776ea4
commit 9e2a095
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx
@@ -26,12 +26,18 @@ export default () => (
       {body}
     </EuiComment>
     <EuiComment
-      username="mariob"
+      username="juanab"
       type="update"
       actions={copyAction}
       event="pushed incident X0Z235"
       timestamp="on Jan 3, 2020"
-      timelineIcon={<EuiAvatar size="l" name="Mario" />}
+      timelineIcon={
+        <EuiAvatar
+          imageUrl="https://source.unsplash.com/64x64/?woman"
+          size="l"
+          name="Juana"
+        />
+      }
     />
     <EuiComment
       actions={copyAction}

diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap
@@ -36,7 +36,12 @@ exports[`EuiComment is rendered 1`] = `
         >
           someuser
         </div>
-         
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+        <div
+          class="euiCommentEvent__headerTimestamp"
+        />
       </div>
       <div
         class="euiCommentEvent__headerActions"
@@ -83,7 +88,14 @@ exports[`EuiComment props event is rendered 1`] = `
         >
           someuser
         </div>
-        commented 
+        <div
+          class="euiCommentEvent__headerEvent"
+        >
+          commented
+        </div>
+        <div
+          class="euiCommentEvent__headerTimestamp"
+        />
       </div>
       <div
         class="euiCommentEvent__headerActions"
@@ -135,7 +147,12 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
         >
           someuser
         </div>
-         
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+        <div
+          class="euiCommentEvent__headerTimestamp"
+        />
       </div>
       <div
         class="euiCommentEvent__headerActions"
@@ -182,7 +199,14 @@ exports[`EuiComment props timestamp is rendered 1`] = `
         >
           someuser
         </div>
-         21 days ago
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+        <div
+          class="euiCommentEvent__headerTimestamp"
+        >
+          21 days ago
+        </div>
       </div>
       <div
         class="euiCommentEvent__headerActions"
@@ -229,7 +253,12 @@ exports[`EuiComment props type is rendered 1`] = `
         >
           someuser
         </div>
-         
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+        <div
+          class="euiCommentEvent__headerTimestamp"
+        />
       </div>
       <div
         class="euiCommentEvent__headerActions"
@@ -276,7 +305,12 @@ exports[`EuiComment renders a body 1`] = `
         >
           someuser
         </div>
-         
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+        <div
+          class="euiCommentEvent__headerTimestamp"
+        />
       </div>
       <div
         class="euiCommentEvent__headerActions"

diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx
@@ -52,7 +52,8 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
       <div className="euiCommentEvent__header">
         <div className="euiCommentEvent__headerData">
           <div className="euiCommentEvent__headerUsername">{username}</div>
-          {event} {timestamp}
+          <div className="euiCommentEvent__headerEvent">{event}</div>
+          <div className="euiCommentEvent__headerTimestamp">{timestamp}</div>
         </div>
         <div className="euiCommentEvent__headerActions">{actions}</div>
       </div>