Add EuiComment

src-docs/src/views/comment/comment_example.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Link } from 'react-router';
+
 import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
@@ -49,6 +51,7 @@ const commentTimelineIconsSnippet = [
   `<EuiComment timelineIcon={
     <EuiAvatar
       name="Jane D"
+      size="l"
     />
   } username="janed">
   {body}
@@ -77,14 +80,14 @@ export const CommentExample = {
       text: (
         <div>
           <p>
-            Use <strong>EuiComment</strong> for displaying comment threads with{' '}
-            <strong>EuiCommentList</strong>. Each <strong>EuiComment</strong>{' '}
-            has two parts: a <EuiCode>timelineIcon</EuiCode> on the left and
-            content on the right. The <EuiCode>timelineIcon</EuiCode> provides a
-            visual indication of the <EuiCode>type</EuiCode> of comment it is.
-            For example, it can be an icon that represents what action was
-            performed or it can be a user avatar. The content has a header with
-            all the relevant metadata and a body.
+            Use <strong>EuiComment</strong> to display comments. Each{' '}
+            <strong>EuiComment</strong> has two parts: a{' '}
+            <EuiCode>timelineIcon</EuiCode> on the left and content on the
+            right. The <EuiCode>timelineIcon</EuiCode> provides a visual
+            indication of the <EuiCode>type</EuiCode> of comment it is. For
+            example, it can be an icon that represents what action was performed
+            or it can be a user avatar. The content has a header with all the
+            relevant metadata and a body.
           </p>
         </div>
       ),
@@ -107,12 +110,12 @@ export const CommentExample = {
       text: (
         <div>
           <p>
-            Use the default <EuiCode>type</EuiCode> of comment,{' '}
-            <EuiCode>regular</EuiCode> to display comments that a user has
+            The default <EuiCode>type</EuiCode> of comment is
+            <EuiCode>regular</EuiCode> and displays a comment that a user has
             written.
           </p>
           <p>
-            Use comments of type <EuiCode>update</EuiCode> to display comments
+            Change the type to <EuiCode>update</EuiCode> to display comments
             that generally do not have a body and are logging actions that
             either the user or the system has performed (e.g. &ldquo;jsmith
             edited a case&rdquo; or &ldquo;kibanamachine added the review
@@ -125,7 +128,7 @@ export const CommentExample = {
       demo: <CommentTypes />,
     },
     {
-      title: 'Custom timelineIcon',
+      title: 'Custom timeline icon',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -143,19 +146,21 @@ export const CommentExample = {
           </p>
           <ol>
             <li>
-              Use the defaults a) a user icon inside a 40x40 container for
-              comments of type
-              <EuiCode>regular</EuiCode> and b) a dot icon inside a 24x24
-              container for comments of type <EuiCode>update</EuiCode>.
+              Use the defaults; a user icon inside a large container for
+              <EuiCode>regular</EuiCode> comments; or a dot icon inside a small
+              container for <EuiCode>update</EuiCode> comments.
             </li>
             <li>
               Pass a string with any of the icon types that{' '}
               <strong>EuiIcon</strong> supports and it will receive the default
               styling.
             </li>
             <li>
-              Pass any other element (e.g. <strong>EuiAvatar</strong>). It is
-              recommended not to use an element larger that 40x40.
+              Pass any other element (e.g.{' '}
+              <Link to="/display/avatar">
+                <strong>EuiAvatar</strong>
+              </Link>
+              ). It is recommended not to use an element larger that 40x40.
             </li>
           </ol>
         </div>
@@ -187,9 +192,19 @@ export const CommentExample = {
             prop. These will be placed to the right of the metadata in the
             comment&apos;s header. You can use any element to display{' '}
             <EuiCode>actions</EuiCode>. For example, for something simple you
-            can use <strong>EuiButtonIcon</strong> and for something more
-            complex you can combine that with <strong>EuiPopover</strong> and{' '}
-            <strong>EuiContextMenu</strong>.
+            can use{' '}
+            <Link to="/navigation/button">
+              <strong>EuiButtonIcon</strong>
+            </Link>{' '}
+            and for something more complex you can combine that with{' '}
+            <Link to="/layout/popover">
+              <strong>EuiPopover</strong>
+            </Link>{' '}
+            and{' '}
+            <Link to="/navigation/context-menu">
+              <strong>EuiContextMenu</strong>
+            </Link>
+            .
           </p>
         </div>
       ),

src-docs/src/views/comment/comment_timelineIcons.tsx

@@ -8,7 +8,7 @@ const defaultBody = (
   <EuiText size="s">
     <p>
       This comment and the one below are using the default{' '}
-      <EuiCode>timelineIcon</EuiCode>s.
+      <EuiCode>timelineIcon</EuiCode>.
     </p>
   </EuiText>
 );

src-docs/src/views/comment/comment_types.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { EuiComment } from '../../../../src/components/comment';
-import { EuiButtonIcon } from '../../../../src/components/button';
 import { EuiText } from '../../../../src/components/text';
 import { EuiCode } from '../../../../src/components/code';
 
@@ -20,21 +19,11 @@ const bodyUpdate = (
   </EuiText>
 );
 
-const copyAction = (
-  <EuiButtonIcon
-    title="Custom action"
-    aria-label="Custom action"
-    color="subdued"
-    iconType="copy"
-  />
-);
-
 export default () => (
   <div>
     <EuiComment
       username="andred"
       event="added a comment"
-      actions={copyAction}
       timestamp="Jan 1, 2020">
       {body}
     </EuiComment>

src/components/comment/__snapshots__/comment.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`EuiComment is rendered 1`] = `
       class="euiCommentTimeline__content"
     >
       <div
-        class="euiCommentTimeline__default euiCommentTimeline--regular"
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
         <div
           data-euiicon-type="user"
@@ -39,9 +39,6 @@ exports[`EuiComment is rendered 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-      <div
-        class="euiCommentEvent__headerActions"
-      />
     </div>
   </div>
 </div>
@@ -58,7 +55,7 @@ exports[`EuiComment props event is rendered 1`] = `
       class="euiCommentTimeline__content"
     >
       <div
-        class="euiCommentTimeline__default euiCommentTimeline--regular"
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
         <div
           data-euiicon-type="user"
@@ -86,9 +83,6 @@ exports[`EuiComment props event is rendered 1`] = `
           commented
         </div>
       </div>
-      <div
-        class="euiCommentEvent__headerActions"
-      />
     </div>
   </div>
 </div>
@@ -105,7 +99,7 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
       class="euiCommentTimeline__content"
     >
       <div
-        class="euiCommentTimeline--regular"
+        class="euiCommentTimeline__icon--regular"
       >
         <div
           aria-label="Mario"
@@ -140,9 +134,6 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-      <div
-        class="euiCommentEvent__headerActions"
-      />
     </div>
   </div>
 </div>
@@ -159,7 +150,7 @@ exports[`EuiComment props timestamp is rendered 1`] = `
       class="euiCommentTimeline__content"
     >
       <div
-        class="euiCommentTimeline__default euiCommentTimeline--regular"
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
         <div
           data-euiicon-type="user"
@@ -193,9 +184,6 @@ exports[`EuiComment props timestamp is rendered 1`] = `
           </time>
         </div>
       </div>
-      <div
-        class="euiCommentEvent__headerActions"
-      />
     </div>
   </div>
 </div>
@@ -212,7 +200,7 @@ exports[`EuiComment props type is rendered 1`] = `
       class="euiCommentTimeline__content"
     >
       <div
-        class="euiCommentTimeline__default euiCommentTimeline--update"
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--update"
       >
         <div
           data-euiicon-type="dot"
@@ -238,9 +226,6 @@ exports[`EuiComment props type is rendered 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-      <div
-        class="euiCommentEvent__headerActions"
-      />
     </div>
   </div>
 </div>
@@ -257,7 +242,7 @@ exports[`EuiComment renders a body 1`] = `
       class="euiCommentTimeline__content"
     >
       <div
-        class="euiCommentTimeline__default euiCommentTimeline--regular"
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
         <div
           data-euiicon-type="user"
@@ -283,9 +268,6 @@ exports[`EuiComment renders a body 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-      <div
-        class="euiCommentEvent__headerActions"
-      />
     </div>
     <div
       class="euiCommentEvent__body"

src/components/comment/__snapshots__/comment_event.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCommentEvent is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiCommentEvent euiCommentEvent--regular testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiCommentEvent__header"
+  >
+    <div
+      class="euiCommentEvent__headerData"
+    >
+      <div
+        class="euiCommentEvent__headerUsername"
+      >
+        someuser
+      </div>
+      <div
+        class="euiCommentEvent__headerEvent"
+      />
+    </div>
+  </div>
+</div>
+`;

src/components/comment/__snapshots__/comment_timeline.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCommentTimeline is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiCommentTimeline testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiCommentTimeline__content"
+  >
+    <div
+      class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
+    >
+      <div
+        data-euiicon-type="user"
+      />
+    </div>
+  </div>
+</div>
+`;

src/components/comment/_comment_event.scss

@@ -44,6 +44,7 @@
     }
 
     min-height: $euiSizeXXL;
+    height: $euiSize; // vertical centering stops working in IE when there's a min-height and not a height.
     background-color: $euiColorLightestShade;
     border-bottom: $euiBorderThin;
     padding: 0 $euiSizeS;

src/components/comment/_comment_timeline.scss

@@ -6,7 +6,7 @@
   position: relative;
 }
 
-.euiCommentTimeline__default {
+.euiCommentTimeline__icon--default {
   flex-shrink: 0;
   display: flex;
   justify-content: center;
@@ -15,12 +15,12 @@
   border-radius: 50%;
   background-color: $euiColorLightestShade;
 
-  &.euiCommentTimeline--regular {
+  &.euiCommentTimeline__icon--regular {
     width: $euiSizeXXL;
     height: $euiSizeXXL;
   }
 
-  &.euiCommentTimeline--update {
+  &.euiCommentTimeline__icon--update {
     width: $euiSizeL;
     height: $euiSizeL;
   }

src/components/comment/comment_event.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiCommentEvent } from './comment_event';
+
+describe('EuiCommentEvent', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiCommentEvent username="someuser" {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/comment/comment_event.tsx

@@ -66,7 +66,11 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
             undefined
           )}
         </div>
-        <div className="euiCommentEvent__headerActions">{actions}</div>
+        {actions ? (
+          <div className="euiCommentEvent__headerActions">{actions}</div>
+        ) : (
+          undefined
+        )}
       </div>
       {children ? (
         <div className="euiCommentEvent__body">{children}</div>

src/components/comment/comment_timeline.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiCommentTimeline } from './comment_timeline';
+
+describe('EuiCommentTimeline', () => {
+  test('is rendered', () => {
+    const component = render(<EuiCommentTimeline {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});