&
+ 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 = (
+ this.togglePopover()}
+ />
+ }
+ isOpen={isPopoverOpen}
+ closePopover={() => this.closePopover()}
+ panelPaddingSize="none"
+ anchorPosition="leftCenter">
+ {
+ this.closePopover();
+ }}>
+ Edit
+ ,
+ {
+ this.closePopover();
+ }}>
+ Share
+ ,
+ {
+ this.closePopover();
+ }}>
+ Copy
+ ,
+ ]}
+ />
+
+ );
+ return (
+
+
+ {body}
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js
index 45b26310fea..7b2fe9c028d 100644
--- a/src-docs/src/views/comment/comment_example.js
+++ b/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 = `
{body}
`;
+const commentTypesSnippet = [
+ `
+ {body}
+
+`,
+ `
+`,
+ `
+ {body}
+
+`,
+];
+
+const commentTimelineIconsSnippet = [
+ `
+ {body}
+
+`,
+ `
+`,
+ `
+ } username="janed">
+ {body}
+
+`,
+];
+
+const commentActionsSnippet = `
+ {body}
+`;
+
export const CommentExample = {
title: 'Comment',
sections: [
@@ -31,29 +77,139 @@ export const CommentExample = {
text: (
- Use EuiComment for displaying comment threads
- with EuiCommentList. There are two different
- types of comments regular and{' '}
- update available through the{' '}
- type prop. Use comments of type{' '}
- update 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. “jsmith edited a case” or
- “kibanamachine added the backport missing label”).
+ Use EuiComment for displaying comment threads with{' '}
+ EuiCommentList. Each EuiComment{' '}
+ has a header with the following parts: username,{' '}
+ event, timeStamp and{' '}
+ actions.
+
+ -
+ username can display a small avatar or icon
+ next to it.
+
+ -
+ timeStamp receives a date in the format of the
+ consumer's choice.
+
+ -
+ There are two different types of comments,
+ regular and update available
+ through the type prop.{' '}
+
+ -
+ timelineIcons has default icons and styling for
+ both types of comments. It can also be customized as needed.
+
+ -
+ Use children to pass the body of the comment.
+
+
+
+ ),
+ props: { EuiComment },
+ snippet: commentSnippet,
+ demo: ,
+ },
+ {
+ title: 'Comment types',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: commentTypesSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: commentTypesHtml,
+ },
+ ],
+ text: (
+
- The timelineIcon can be customized as needed. It
- is recommended to use an element of dimensions 40x40. The default{' '}
- timelineIcon is a user icon.
+ Use the default type of comment,{' '}
+ regular to display comments that a user has
+ written.
- Use children to pass the body of the comment.
+ Use comments of type update 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. “jsmith
+ edited a case” or “kibanamachine added the review
+ label”).
),
props: { EuiComment },
- snippet: commentSnippet,
- demo: ,
+ snippet: commentTypesSnippet,
+ demo: ,
+ },
+ {
+ title: 'Custom timelineIcon',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: commentTimelineIconsSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: commentTimelineIconsHtml,
+ },
+ ],
+ text: (
+
+
+ There are three ways to use timelineIcon:
+
+
+ -
+ Use the defaults a) a user icon inside a 40x40 container for
+ comments of type
+ regular and b) a dot icon inside a 24x24
+ container for comments of type update.
+
+ -
+ Pass a string with any of the icon types that{' '}
+ EuiIcon supports and it will receive the default
+ styling.
+
+ -
+ Pass any other element (e.g. EuiAvatar). It is
+ recommended not to use an element larger that 40x40.
+
+
+
+
+ To allow the user to perform actions from within a comment, use the{' '}
+ actionsprop. actions can be
+ any element. For example, for something simple you can use{' '}
+ EuiButtonIcon and for something more complex you
+ can combine that with EuiPopover and{' '}
+ EuiContextMenu.
+
+
+ These two comments are using the default timelineIcons.
+
+
+);
+
+const iconStringBody = (
+
+
+ This comment passed the string “tag” to the{' '}
+ timelineIcon prop.
+
+
+);
+
+const customIconBody = (
+
+
+ This comment has a custom element as its timelineIcon.
+
+
+);
+
+export default () => (
+
+
+
+ {defaultBody}
+
+
+
+
+
+
+ {iconStringBody}
+
+
+
+
+
+ }>
+ {customIconBody}
+
+
+
+);
diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx
new file mode 100644
index 00000000000..3a27eb72bc6
--- /dev/null
+++ b/src-docs/src/views/comment/comment_types.tsx
@@ -0,0 +1,55 @@
+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';
+
+const body = (
+
+
+ This is the body of a comment of type regular
+
+
+);
+
+const bodyUpdate = (
+
+
+ Comments of type update can also have a body
+
+
+);
+
+const copyAction = (
+
+);
+
+export default () => (
+
+
+ {body}
+
+
+
+ {bodyUpdate}
+
+
+);
diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap
index a73db9351f0..06fdaf1d2d3 100644
--- a/src/components/comment/__snapshots__/comment.test.tsx.snap
+++ b/src/components/comment/__snapshots__/comment.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiComment is rendered 1`] = `
class="euiCommentTimeline__content"
>
-
`;
@@ -65,7 +59,7 @@ exports[`EuiComment props event is rendered 1`] = `
class="euiCommentTimeline__content"
>
-
`;
@@ -119,16 +107,20 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
class="euiCommentTimeline__content"
>
@@ -150,17 +142,11 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
-
-
`;
@@ -176,7 +162,7 @@ exports[`EuiComment props timestamp is rendered 1`] = `
class="euiCommentTimeline__content"
>
-
`;
exports[`EuiComment props type is rendered 1`] = `
-
`;
exports[`EuiComment renders a body 1`] = `