feedback part 2

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { EuiComment } from '../../../../src/components/comment';
-import { EuiIcon } from '../../../../src/components/icon';
 import { EuiAvatar } from '../../../../src/components/avatar';
 import { EuiBadge } from '../../../../src/components/badge';
 import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
@@ -29,12 +28,6 @@ const longBody = (
   </EuiText>
 );
 
-const bodyUpdate = (
-  <EuiText size="s">
-    <p>This type of comment can also have a body</p>
-  </EuiText>
-);
-
 const copyAction = (
   <EuiButtonIcon
     title="Custom action"
@@ -67,6 +60,12 @@ export default () => (
         />
       }
     />
+    <EuiComment
+      username="pancho1"
+      type="update"
+      event="edited case"
+      timestamp="Jan 9, 2020"
+    />
     <EuiComment
       actions={copyAction}
       username={
@@ -89,19 +88,8 @@ export default () => (
           </EuiFlexItem>
         </EuiFlexGroup>
       }
-      timestamp="Jan 4, 2020"
-      timelineIcon={
-        <div className="euiCommentTimeline__contentDefault">
-          <EuiIcon size="l" type="tag" />
-        </div>
-      }
-    />
-    <EuiComment
-      username="pancho1"
-      type="update"
-      event="edited case"
       timestamp="Jan 11, 2020"
-      timelineIcon={<EuiAvatar size="l" name="Pancho" />}
+      timelineIcon="tag"
     />
     <EuiComment
       username="elohar"
@@ -111,13 +99,5 @@ export default () => (
       timelineIcon={<EuiAvatar size="l" name="Eloha" />}>
       {longBody}
     </EuiComment>
-    <EuiComment
-      username="pancho1"
-      type="update"
-      event="edited case"
-      timestamp="Jan 21, 2020"
-      timelineIcon={<EuiAvatar size="l" name="Pancho" />}>
-      {bodyUpdate}
-    </EuiComment>
   </div>
 );

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

@@ -0,0 +1,108 @@
+import React, { Component, HTMLAttributes } from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+import { EuiButtonIcon } from '../../../../src/components/button';
+import { EuiText } from '../../../../src/components/text';
+import { EuiPopover } from '../../../../src/components/popover';
+import {
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+} from '../../../../src/components/context_menu';
+import { CommonProps } from '../../../../src/components/common';
+
+const body = (
+  <EuiText size="s">
+    <p>
+      This comment has custom actions available. See the upper right corner.
+    </p>
+  </EuiText>
+);
+
+export type CustomActionsProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {};
+
+interface CustomActionsState {
+  isPopoverOpen: boolean;
+}
+
+export default class extends Component<
+  // export class CustomActions extends Component<
+  CustomActionsProps,
+  CustomActionsState
+> {
+  state = {
+    isPopoverOpen: false,
+  };
+
+  togglePopover = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  render() {
+    const { isPopoverOpen } = this.state;
+    const customActions = (
+      <EuiPopover
+        // id={`${item.id}-actions`}
+        button={
+          <EuiButtonIcon
+            aria-label="Actions"
+            iconType="gear"
+            size="s"
+            color="text"
+            onClick={() => this.togglePopover()}
+          />
+        }
+        isOpen={isPopoverOpen}
+        closePopover={() => this.closePopover()}
+        panelPaddingSize="none"
+        anchorPosition="leftCenter">
+        <EuiContextMenuPanel
+          items={[
+            <EuiContextMenuItem
+              key="A"
+              icon="pencil"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Edit
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="B"
+              icon="share"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Share
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="C"
+              icon="copy"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Copy
+            </EuiContextMenuItem>,
+          ]}
+        />
+      </EuiPopover>
+    );
+    return (
+      <div>
+        <EuiComment
+          username="janed"
+          event="added a comment"
+          actions={customActions}
+          timestamp="Jan 1, 2020">
+          {body}
+        </EuiComment>
+      </div>
+    );
+  }
+}

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

@@ -10,10 +10,56 @@ import Comment from './comment';
 const commentSource = require('!!raw-loader!./comment');
 const commentHtml = renderToHtml(Comment);
 
+import CommentTypes from './comment_types';
+const commentTypesSource = require('!!raw-loader!./comment_types');
+const commentTypesHtml = renderToHtml(CommentTypes);
+
+import CommentTimelineIcons from './comment_timelineIcons';
+const commentTimelineIconsSource = require('!!raw-loader!./comment_timelineIcons');
+const commentTimelineIconsHtml = renderToHtml(CommentTimelineIcons);
+
+import CommentActions from './comment_actions';
+const commentActionsSource = require('!!raw-loader!./comment_actions');
+const commentActionsHtml = renderToHtml(CommentActions);
+
 const commentSnippet = `<EuiComment username="janed">
   {body}
 </EuiComment>`;
 
+const commentTypesSnippet = [
+  `<EuiComment username="janed">
+  {body}
+</EuiComment>
+`,
+  `<EuiComment type="update" username="janed" />
+`,
+  `<EuiComment type="update" username="janed">
+  {body}
+</EuiComment>
+`,
+];
+
+const commentTimelineIconsSnippet = [
+  `<EuiComment username="janed">
+  {body}
+</EuiComment>
+`,
+  `<EuiComment timelineIcon="tag" username="janed" />
+`,
+  `<EuiComment timelineIcon={
+    <EuiAvatar
+      name="Jane D"
+    />
+  } username="janed">
+  {body}
+</EuiComment>
+`,
+];
+
+const commentActionsSnippet = `<EuiComment username="janed" actions={customActions}>
+  {body}
+</EuiComment>`;
+
 export const CommentExample = {
   title: 'Comment',
   sections: [
@@ -31,29 +77,139 @@ export const CommentExample = {
       text: (
         <div>
           <p>
-            Use <EuiCode>EuiComment</EuiCode> for displaying comment threads
-            with <EuiCode>EuiCommentList</EuiCode>. There are two different
-            types of comments <EuiCode>regular</EuiCode> and{' '}
-            <EuiCode>update</EuiCode> available through the{' '}
-            <EuiCode>type</EuiCode> prop. Use comments of type{' '}
-            <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 backport missing label&rdquo;).
+            Use <strong>EuiComment</strong> for displaying comment threads with{' '}
+            <strong>EuiCommentList</strong>. Each <strong>EuiComment</strong>{' '}
+            has a header with the following parts: <EuiCode>username</EuiCode>,{' '}
+            <EuiCode>event</EuiCode>, <EuiCode>timeStamp</EuiCode> and{' '}
+            <EuiCode>actions</EuiCode>.
           </p>
+          <ul>
+            <li>
+              <EuiCode>username</EuiCode> can display a small avatar or icon
+              next to it.
+            </li>
+            <li>
+              <EuiCode>timeStamp</EuiCode> receives a date in the format of the
+              consumer&apos;s choice.
+            </li>
+            <li>
+              There are two different types of comments,
+              <EuiCode>regular</EuiCode> and <EuiCode>update</EuiCode> available
+              through the <EuiCode>type</EuiCode> prop.{' '}
+            </li>
+            <li>
+              <EuiCode>timelineIcon</EuiCode>s has default icons and styling for
+              both types of comments. It can also be customized as needed.
+            </li>
+            <li>
+              Use <EuiCode>children</EuiCode> to pass the body of the comment.
+            </li>
+          </ul>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentSnippet,
+      demo: <Comment />,
+    },
+    {
+      title: 'Comment types',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentTypesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentTypesHtml,
+        },
+      ],
+      text: (
+        <div>
           <p>
-            The <EuiCode>timelineIcon</EuiCode> can be customized as needed. It
-            is recommended to use an element of dimensions 40x40. The default{' '}
-            <EuiCode>timelineIcon</EuiCode> is a user icon.
+            Use the default <EuiCode>type</EuiCode> of comment,{' '}
+            <EuiCode>regular</EuiCode> to display comments that a user has
+            written.
           </p>
           <p>
-            Use <EuiCode>children</EuiCode> to pass the body of the comment.
+            Use comments of type <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
+            label&rdquo;).
           </p>
         </div>
       ),
       props: { EuiComment },
-      snippet: commentSnippet,
-      demo: <Comment />,
+      snippet: commentTypesSnippet,
+      demo: <CommentTypes />,
+    },
+    {
+      title: 'Custom timelineIcon',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentTimelineIconsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentTimelineIconsHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            There are three ways to use <EuiCode>timelineIcon</EuiCode>:
+          </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>.
+            </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.
+            </li>
+          </ol>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentTimelineIconsSnippet,
+      demo: <CommentTimelineIcons />,
+    },
+    {
+      title: 'Actions',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentActionsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentActionsHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            To allow the user to perform actions from within a comment, use the{' '}
+            <EuiCode>actions</EuiCode>prop. <EuiCode>actions</EuiCode> can be
+            any element. 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>.
+          </p>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentActionsSnippet,
+      demo: <CommentActions />,
     },
   ],
 };