Summary

This PR adds new props and other enhancements to EuiCommentList/EuiComment. Part of the discussions that led to these enhancements can be found here: #5692.

Other enhancements are a result of our consumer's feedback on the usage of this component:

1. There were incorrect usages of this component. For example to create life cycle timelines. This led to the creation of the EuiTimeline.
2. Based on user/consumers feedback the mix of avatars/update icons was confusing.
3. There was no way to call out an update (have a different background color). So in a very long list of comments if an update was important it was lost.
4. Consumers were overriding styles to include custom components in a comment list, for example, to add a markdown editor.

This is the Figma file where you can find all the research and design ideas:
https://www.figma.com/file/OlPQKfamN8WzA7jT7dI16z/CommentList?node-id=0%3A1

Converted to Emotion

The EuiCommentList and EuiComment were updated to use EuiTimeline and EuiTimelineItem respectively. So this reduces a lot of the custom styles. At the end, there was only one component that required custom styles and it was converted to emotion: comment_event.styles.ts

Custom children

Now consumers can add custom components without the username and a panel appearing.

New props

New props eventIcon, eventIconAriaLabel, and eventColor:

.

Also, a new gutterSize prop which is inherited from EuiTimeline was added.

Timeline icon

The timelineIcon is now only for avatars. To display an icon for an update/event consumers should be using the new eventIcon prop.

If no timelineIcon is provided, it will default to the username's initials. Before this update, the timelineIcon was defaulting to a user avatar. Using avatars with username's initials makes more sense for a comment list because it makes it easier to distinguish different users by initials/colors.

EuiComment.actions now accepts ReactNode[]

Updated EuiComment.actions type to accept ReactNode[]

New docs examples

Two new section were added to the docs:

Breaking changes

• Changed EuiCommentEvent.username type from ReactNode to string The reason for that is that now the timeline icon defaults to an avatar with an initial username letter. So we need to make sure the username is a string to pass to the EuiAvatar.name.
• Updated EuiCommentList and EuiComment to use EuiTimeline and EuiTimelineItem respectively. This change makes the EuiCommentList to be always required. It also improves the a11y by using better semantic elements (ol > li)
• Removed EuiComment.type. It is no longer required to say what is the type of comment. The comment is now flexible enough and adapts to the props passed.

Checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately