[EuiCommentList] Convert to Emotion, allow custom children and new event props

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

@@ -1,5 +1,8 @@
 import React from 'react';
-import { EuiComment } from '../../../../src/components/comment_list';
+import {
+  EuiCommentList,
+  EuiComment,
+} from '../../../../src/components/comment_list';
 import { EuiButtonIcon } from '../../../../src/components/button';
 import { EuiText } from '../../../../src/components/text';
 
@@ -22,7 +25,7 @@ const copyAction = (
 );
 
 export default () => (
-  <div>
+  <EuiCommentList>
     <EuiComment
       username="janed"
       event="added a comment"
@@ -31,5 +34,5 @@ export default () => (
     >
       {body}
     </EuiComment>
-  </div>
+  </EuiCommentList>
 );

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

@@ -1,13 +1,19 @@
-import React, { Component, HTMLAttributes } from 'react';
-import { EuiComment } from '../../../../src/components/comment_list';
-import { EuiButtonIcon } from '../../../../src/components/button';
-import { EuiText } from '../../../../src/components/text';
-import { EuiPopover } from '../../../../src/components/popover';
+import React, { useState } from 'react';
 import {
+  EuiCommentList,
+  EuiComment,
+  EuiButtonIcon,
+  EuiText,
+  EuiPopover,
   EuiContextMenuPanel,
   EuiContextMenuItem,
-} from '../../../../src/components/context_menu';
-import { CommonProps } from '../../../../src/components/common';
+  EuiLink,
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiTitle,
+} from '../../../../src/components/';
+import { useGeneratedHtmlId } from '../../../../src/services/';
 
 const body = (
   <EuiText size="s">
@@ -17,92 +23,124 @@ const body = (
   </EuiText>
 );
 
-export type CustomActionsProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {};
+export default () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
 
-interface CustomActionsState {
-  isPopoverOpen: boolean;
-}
+  const flyoutTitleId = useGeneratedHtmlId({
+    prefix: 'flyoutTitleId',
+  });
 
-export default class extends Component<CustomActionsProps, CustomActionsState> {
-  state = {
-    isPopoverOpen: false,
+  const togglePopover = () => {
+    setIsPopoverOpen(!isPopoverOpen);
   };
 
-  togglePopover = () => {
-    this.setState((prevState) => ({
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
+  const closePopover = () => {
+    setIsPopoverOpen(false);
   };
 
-  closePopover = () => {
-    this.setState({
-      isPopoverOpen: false,
-    });
+  const toggleFlyout = () => {
+    setIsFlyoutVisible(!isFlyoutVisible);
   };
 
-  render() {
-    const { isPopoverOpen } = this.state;
-    const customActions = (
-      <EuiPopover
-        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>,
-          ]}
+  const flyout = isFlyoutVisible && (
+    <EuiFlyout
+      ownFocus
+      onClose={() => setIsFlyoutVisible(false)}
+      aria-labelledby={flyoutTitleId}
+    >
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2 id={flyoutTitleId}>Malware detection alert</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText>
+          <p>
+            Use a flyout to show more details related to your comment event.
+          </p>
+        </EuiText>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+
+  const customActions = (
+    <EuiPopover
+      button={
+        <EuiButtonIcon
+          aria-label="Actions"
+          iconType="boxesHorizontal"
+          size="xs"
+          color="text"
+          onClick={togglePopover}
         />
-      </EuiPopover>
-    );
-    return (
-      <div>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={togglePopover}
+      panelPaddingSize="none"
+      anchorPosition="leftCenter"
+    >
+      <EuiContextMenuPanel
+        items={[
+          <EuiContextMenuItem key="A" icon="pencil" onClick={closePopover}>
+            Edit
+          </EuiContextMenuItem>,
+          <EuiContextMenuItem key="B" icon="share" onClick={closePopover}>
+            Share
+          </EuiContextMenuItem>,
+          <EuiContextMenuItem key="C" icon="copy" onClick={closePopover}>
+            Copy
+          </EuiContextMenuItem>,
+        ]}
+      />
+    </EuiPopover>
+  );
+
+  const updateActions = [
+    <EuiButtonIcon
+      key="copy-alert"
+      title="Copy alert link"
+      aria-label="Copy alert link"
+      iconType="link"
+      size="xs"
+      color="text"
+    />,
+    <EuiButtonIcon
+      key="show-details"
+      title="Show the alert details in a flyout"
+      aria-label="Show details"
+      iconType="popout"
+      size="xs"
+      color="text"
+      onClick={toggleFlyout}
+    />,
+  ];
+
+  return (
+    <>
+      <EuiCommentList aria-label="Actions">
         <EuiComment
           username="janed"
           event="added a comment"
           actions={customActions}
-          timestamp="Jan 1, 2020"
+          timestamp="on Jan 1, 2020"
         >
           {body}
         </EuiComment>
-      </div>
-    );
-  }
-}
+        <EuiComment
+          username="system"
+          timelineIcon="dot"
+          event={
+            <>
+              pushed a new incident <EuiLink>malware detection</EuiLink>
+            </>
+          }
+          actions={updateActions}
+          timestamp="on Jan 2, 2020"
+          eventColor="danger"
+        />
+      </EuiCommentList>
+      {flyout}
+    </>
+  );
+};

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  EuiCommentList,
+  EuiComment,
+  EuiCode,
+  EuiText,
+  EuiAvatar,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiCommentList aria-label="An example with different timeline icons">
+    <EuiComment username="andred" event="is using a default avatar">
+      <EuiText size="s">
+        <p>
+          The avatar initials is generated from the <EuiCode>username</EuiCode>{' '}
+          prop.
+        </p>
+      </EuiText>
+    </EuiComment>
+
+    <EuiComment
+      username="system"
+      timelineIcon="dot"
+      event={
+        <>
+          The <EuiCode>timelineIcon</EuiCode> is using a <EuiCode>dot</EuiCode>{' '}
+          icon.
+        </>
+      }
+    />
+
+    <EuiComment
+      username="cat"
+      event="is using a custom avatar"
+      timelineIcon={
+        <EuiAvatar
+          name="cat"
+          imageUrl="https://source.unsplash.com/64x64/?cat"
+        />
+      }
+    >
+      <EuiText size="s">
+        <p>
+          The <EuiCode>timelineIcon</EuiCode> is using a custom{' '}
+          <strong>EuiAvatar</strong>.
+        </p>
+      </EuiText>
+    </EuiComment>
+  </EuiCommentList>
+);