Add EuiComment

[andreadelrio]

Summary

Add EuiComment component in preparation for the upcoming addition of EuiCommentList. Internally EuiComment uses two components EuiCommentTimeline and EuiCommentEvent.
There are two types of comments available: regular and update.

Desktop view

Mobile view

Notes:

• We might need to further optimize this for Amsterdam Dark.
• Pending: I’m still talking to @myasonik about a11y on this.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[cchaos]

Overall this is really great. Design wise I just spotted a few alignment and color issues, but largely looks awesome!

Component-wise I found a few places where it could be a bit smarter. And documentation-wise I think there should be more sections explaining the different pieces of the component. These are some example sections I'd add:

• Basic example: What are all the bits that I can pass (username, event, timestamp, children)? Including Timeline icon: What's the default vs what consumers can pass in and recommended sizing.
• Regular vs update types. What are the differences and why pick one over the other
• Actions: What are they and why would I use them?

---

Design

I'd really like to see these line up a bit better on their baseline

What do you think about lightening the background color of the default icon and matching the background color of the comment title?

It looks like there's a rogue background color being added to the timeline icon.

Take a look at the Amsterdam version and consider if you'd make any changes there.

[thompsongl]

Just an FYI, I'm going to hold off on reviewing until Caroline has finished her pass.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[andreadelrio]

What do you think about lightening the background color of the default icon and matching the background color of the comment title?

I gave this a go and it's in the current version (i.e. $euiColorLightestShade). While I think it looks great in light themes, I'm not 100% convinced it stands out enough in dark themes. See:

background-color: $euiColorLightestShade;

background-color: $euiColorLightShade;

@cchaos I've added some new sections, improved timelineIcon and optimized for Amsterdam. This should be ready for another round of review. Thanks!

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[myasonik]

In the case of a regular comment or an update comment with a body, can we make them <figure> elements and the header string the <figcaption>?

Otherwise, in the case of an update comment without an body, can those be wrapped in a <p>?

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[cchaos]

🎉 Looks great to me! All the browsers and mobile versions work now. All the tests are in place. Looks good in the themes. 🎉

[thompsongl]

This is fun!

Just one question/suggestion on timestamps, and some TS things. The API looks good

[andreadelrio]

@thompsongl thanks for your review, good catch with the relative dates case. I made the changes you suggested. I also did some small changes to include Michail's a11y improvements as I think they make sense. However, the code that I added is repetitive. I tried making it better but ended up with TS errors. Can you please take a look here? And this is what I was trying:

  let Element = 'div';
  let HeaderElement = 'div';

  if (type == 'regular' || (type == 'update' && children)) {
    Element = 'figure';
    HeaderElement = 'figcaption';
  }

Which was giving me these errors:

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[thompsongl]

@myasonik

I'm working on the TS issues mentioned, but I'm not sure I fully understand what element should be the figure.

Just this?

Or all of this?

[andreadelrio]

@myasonik

I'm working on the TS issues mentioned, but I'm not sure I fully understand what element should be the figure.

Just this?

Or all of this?

Just the side on the right (i.e. EuiCommentEvent)

[thompsongl]

Updated figure vs div logic, and simplified the props of both EuiCommentEvent and EuiCommentTimeline. The latter bit is only possible because neither are exported as part of the public API. Also, it allows for easier interface extension in EuiComment.

[thompsongl]

🎉

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/