diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx index 2d9557719a7..1ebd29824e6 100644 --- a/src-docs/src/views/comment/comment_types.tsx +++ b/src-docs/src/views/comment/comment_types.tsx @@ -21,7 +21,7 @@ const bodyUpdate = ( export default () => (
- + {body}
-
-
-
-
+ + `; @@ -63,10 +63,10 @@ exports[`EuiComment props event is rendered 1`] = ` -
-
-
-
+ + `; @@ -116,10 +116,10 @@ exports[`EuiComment props timelineIcon is rendered 1`] = ` -
-
-
-
+ + `; @@ -158,10 +158,10 @@ exports[`EuiComment props timestamp is rendered 1`] = ` -
-
-
- + + `; @@ -249,10 +249,10 @@ exports[`EuiComment renders a body 1`] = ` -
-
-
+
@@ -275,6 +275,6 @@ exports[`EuiComment renders a body 1`] = ` This is the body.

-
+ `; diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap index d614313b717..2a8600d3077 100644 --- a/src/components/comment/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiCommentEvent is rendered 1`] = ` -
-
-
-
+ + `; exports[`EuiCommentEvent props event is rendered 1`] = ` -
-
-
-
+ + `; exports[`EuiCommentEvent props timestamp is rendered 1`] = ` -
-
-
- + + `; exports[`EuiCommentEvent props type is rendered 1`] = ` diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 4005b66f980..1cff87e2bc0 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -50,9 +50,17 @@ export const EuiCommentEvent: FunctionComponent = ({ className ); + const Element = + type === 'regular' || (type === 'update' && children) ? 'figure' : 'div'; + + const HeaderElement = + type === 'regular' || (type === 'update' && children) + ? 'figcaption' + : 'div'; + return ( -
-
+ +
{username}
{event}
@@ -69,12 +77,12 @@ export const EuiCommentEvent: FunctionComponent = ({ ) : ( undefined )} -
+
{children ? (
{children}
) : ( undefined )} -
+ ); };