[EuiComment] Revert username prop to accept a ReactNode

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

@@ -28,6 +28,7 @@ export default () => (
   <EuiCommentList>
     <EuiComment
       username="janed"
+      timelineAvatarAriaLabel="Jane Doe"
       event="added a comment"
       actions={copyAction}
       timestamp="on Jan 1, 2020"

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

@@ -121,6 +121,7 @@ export default () => {
       <EuiCommentList aria-label="Actions">
         <EuiComment
           username="janed"
+          timelineAvatarAriaLabel="Jane Doe"
           event="added a comment"
           actions={customActions}
           timestamp="on Jan 1, 2020"
@@ -129,7 +130,8 @@ export default () => {
         </EuiComment>
         <EuiComment
           username="system"
-          timelineIcon="dot"
+          timelineAvatarAriaLabel="System"
+          timelineAvatar="dot"
           event={
             <>
               pushed a new incident <EuiLink>malware detection</EuiLink>

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

@@ -9,7 +9,11 @@ import {
 
 export default () => (
   <EuiCommentList aria-label="An example with different timeline icons">
-    <EuiComment username="andred" event="is using a default avatar">
+    <EuiComment
+      username="andred"
+      timelineAvatarAriaLabel="Andre Diaz"
+      event="is using a default avatar"
+    >
       <EuiText size="s">
         <p>
           The avatar initials is generated from the <EuiCode>username</EuiCode>{' '}
@@ -20,19 +24,21 @@ export default () => (
 
     <EuiComment
       username="system"
-      timelineIcon="dot"
+      timelineAvatarAriaLabel="System"
+      timelineAvatar="dot"
       event={
         <>
-          The <EuiCode>timelineIcon</EuiCode> is using a <EuiCode>dot</EuiCode>{' '}
-          icon.
+          The <EuiCode>timelineAvatar</EuiCode> is using a{' '}
+          <EuiCode>dot</EuiCode> icon.
         </>
       }
     />
 
     <EuiComment
       username="cat"
+      timelineAvatarAriaLabel="Beatiful cat"
       event="is using a custom avatar"
-      timelineIcon={
+      timelineAvatar={
         <EuiAvatar
           name="cat"
           imageUrl="https://source.unsplash.com/64x64/?cat"
@@ -41,7 +47,7 @@ export default () => (
     >
       <EuiText size="s">
         <p>
-          The <EuiCode>timelineIcon</EuiCode> is using a custom{' '}
+          The <EuiCode>timelineAvatar</EuiCode> is using a custom{' '}
           <strong>EuiAvatar</strong>.
         </p>
       </EuiText>

src-docs/src/views/comment/comment_example.js

@@ -52,11 +52,11 @@ const commentAvatarSnippet = [
 </EuiCommentList>
 `,
   `<EuiCommentList aria-label="Timeline icon example">
-  <EuiComment timelineIcon="tag" username="janed" />
+  <EuiComment timelineAvatar="tag" username="janed" />
 </EuiCommentList>
 `,
   `<EuiCommentList aria-label="Timeline icon example">
-  <EuiComment timelineIcon={avatar} username="janed">
+  <EuiComment timelineAvatar={avatar} username="janed">
     {body}
   </EuiComment>
 </EuiCommentList>
@@ -96,7 +96,10 @@ export const CommentListExample = {
             For accessibility, it is highly recommended to provide a descriptive{' '}
             <EuiCode>aria-label</EuiCode> or the ID of an external label to the{' '}
             <EuiCode>aria-labelledby</EuiCode> prop of the{' '}
-            <strong>EuiCommentList</strong>.
+            <strong>EuiCommentList</strong>. A{' '}
+            <EuiCode>timelineAvatarAriaLabel</EuiCode> should be provided for
+            every <strong>EuiComment</strong> with or without a{' '}
+            <EuiCode>timelineAvatar</EuiCode> as <EuiCode>IconType</EuiCode>.
           </>
         }
       />
@@ -145,17 +148,17 @@ export const CommentListExample = {
           <EuiText>
             <ol style={{ listStyleType: 'upper-alpha' }}>
               <li>
-                <EuiCode>timelineIcon</EuiCode>: Shows an icon that should
+                <EuiCode>timelineAvatar</EuiCode>: Shows an avatar that should
                 indicate who is the author of the comment. To customize, pass a{' '}
                 <EuiCode>string</EuiCode> as a{' '}
-                <EuiCode>EuiIcon[&apos;type&apos;]</EuiCode> or a{' '}
-                <EuiCode>ReactNode</EuiCode>, preferably a{' '}
+                <EuiCode>EuiIcon[&apos;type&apos;]</EuiCode> or a a{' '}
                 <Link to="/display/avatar">
                   <strong>EuiAvatar</strong>
                 </Link>
-                . If no icon is provided, it will default to the{' '}
-                <EuiCode>username</EuiCode>
-                &apos;s initials.
+                . Use in conjunction with{' '}
+                <EuiCode>timelineAvatarAriaLabel</EuiCode> to pass an aria label
+                to the avatar. If no avatar is provided, it will default to an
+                avatar with a <EuiCode>userAvatar</EuiCode> icon.
               </li>
               <li>
                 <EuiCode>eventIcon</EuiCode>: Icon that shows before the
@@ -207,7 +210,7 @@ export const CommentListExample = {
       playground: commentConfig,
     },
     {
-      title: 'Timeline icon',
+      title: 'Timeline avatar',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -220,28 +223,24 @@ export const CommentListExample = {
           <ul>
             <li>
               By default, each <strong>EuiComment</strong> shows an avatar with
-              the initial letter of the <EuiCode>username</EuiCode>. It also
-              uses the <EuiCode>username</EuiCode> for the avatar title
-              attribute.
+              the <EuiCode>userAvatar</EuiCode> icon. A{' '}
+              <EuiCode>timelineAvatarAriaLabel</EuiCode>
+              should be provided when using this default option.
             </li>
             <li>
-              If your <strong>EuiComment</strong> doesn&apos;t have a{' '}
-              <EuiCode>username</EuiCode>, or if you don&apos;t want to use it
-              for generating the title attribute and initials you can use the{' '}
-              <EuiCode>timelineIcon</EuiCode> prop instead.
-            </li>
-            <li>
-              You can also show an icon by passing to the{' '}
-              <EuiCode>timelineIcon</EuiCode> any of the icon types that{' '}
+              You can customize your avatar by passing to the{' '}
+              <EuiCode>timelineAvatar</EuiCode> any of the icon types that{' '}
               <Link to="/display/icons">
                 <strong>EuiIcon</strong>
               </Link>{' '}
               supports. The icon will show inside a <EuiCode>subdued</EuiCode>{' '}
               avatar. Consider this option when showing a system update.
+              Providing a <EuiCode>timelineAvatarAriaLabel</EuiCode> is
+              recommended.
             </li>
             <li>
               You can further customize the timeline icon by passing to the{' '}
-              <EuiCode>timelineIcon</EuiCode> a{' '}
+              <EuiCode>timelineAvatar</EuiCode> a{' '}
               <Link to="/display/avatar">
                 <strong>EuiAvatar</strong>
               </Link>

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

@@ -49,13 +49,15 @@ const eventWithMultipleTags = (
 const commentsData: EuiCommentListProps['comments'] = [
   {
     username: 'janed',
+    timelineAvatarAriaLabel: 'Jane Doe',
     event: 'added a comment',
     timestamp: 'on Jan 1, 2020',
     children: body,
     actions: copyAction,
   },
   {
     username: 'luisg',
+    timelineAvatarAriaLabel: 'Luis G',
     event: eventWithMultipleTags,
     timestamp: '22 hours ago',
     eventIcon: 'tag',
@@ -64,13 +66,15 @@ const commentsData: EuiCommentListProps['comments'] = [
   },
   {
     username: 'system',
-    timelineIcon: 'dot',
+    timelineAvatarAriaLabel: 'System',
+    timelineAvatar: 'dot',
     event: 'pushed a new incident',
     timestamp: '20 hours ago',
     eventColor: 'danger',
   },
   {
     username: 'pancho1',
+    timelineAvatarAriaLabel: 'Pancho Pérez',
     children: (
       <EuiTextArea
         fullWidth

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

@@ -57,26 +57,30 @@ const longBody = (
 const comments: EuiCommentProps[] = [
   {
     username: 'janed',
+    timelineAvatarAriaLabel: 'Jane Doe',
     event: 'added a comment',
     timestamp: 'on Jan 1, 2020',
     children: body,
     actions: copyAction,
   },
   {
     username: 'juanab',
+    timelineAvatarAriaLabel: 'Juana Barros',
     actions: copyAction,
     event: 'pushed incident X0Z235',
     timestamp: 'on Jan 3, 2020',
   },
   {
     username: 'pancho1',
+    timelineAvatarAriaLabel: 'Pancho Pérez',
     event: 'edited case',
     timestamp: 'on Jan 9, 2020',
     eventIcon: 'pencil',
     eventIconAriaLabel: 'edit',
   },
   {
     username: 'pedror',
+    timelineAvatarAriaLabel: 'Pedro Rodriguez',
     actions: copyAction,
     event: complexEvent,
     timestamp: 'on Jan 11, 2020',
@@ -85,7 +89,7 @@ const comments: EuiCommentProps[] = [
   },
   {
     username: 'elohar',
-
+    timelineAvatarAriaLabel: 'Elohar Jackson',
     event: 'added a comment',
     timestamp: 'on Jan 14, 2020',
     children: longBody,

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

@@ -55,7 +55,7 @@ export default ({ snippet }: { snippet: ReactNode }) => {
       style={{ maxWidth: '540px' }}
     >
       <EuiCommentList>
-        <EuiComment username="Avatar">
+        <EuiComment username="avatar" timelineAvatarAriaLabel="Avatar">
           <div
             css={css`
               border-radius: ${euiTheme.border.radius.small};

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

@@ -12,6 +12,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiToolTip,
+  EuiAvatar,
 } from '../../../../src/components';
 
 const actionButton = (
@@ -38,9 +40,24 @@ const complexEvent = (
   </EuiFlexGroup>
 );
 
+const UserActionUsername = ({
+  username,
+  fullname,
+}: {
+  username: string;
+  fullname: string;
+}) => {
+  return (
+    <EuiToolTip position="top" content={<p>{fullname}</p>}>
+      <strong>{username}</strong>
+    </EuiToolTip>
+  );
+};
+
 const initialComments: EuiCommentProps[] = [
   {
-    username: 'emma',
+    username: <UserActionUsername username="emma" fullname="Emma Watson" />,
+    timelineAvatar: <EuiAvatar name="emma" />,
     event: 'added a comment',
     timestamp: 'on 3rd March 2022',
     children: (
@@ -51,21 +68,24 @@ const initialComments: EuiCommentProps[] = [
     actions: actionButton,
   },
   {
-    username: 'emma',
+    username: <UserActionUsername username="emma" fullname="Emma Watson" />,
+    timelineAvatar: <EuiAvatar name="emma" />,
     event: complexEvent,
     timestamp: 'on 3rd March 2022',
     eventIcon: 'tag',
     eventIconAriaLabel: 'tag',
   },
   {
     username: 'system',
-    timelineIcon: 'dot',
+    timelineAvatar: 'dot',
+    timelineAvatarAriaLabel: 'System',
     event: 'pushed a new incident',
     timestamp: 'on 4th March 2022',
     eventColor: 'danger',
   },
   {
-    username: 'tiago',
+    username: <UserActionUsername username="tiago" fullname="Tiago Pontes" />,
+    timelineAvatar: <EuiAvatar name="tiago" />,
     event: 'added a comment',
     timestamp: 'on 4th March 2022',
     actions: actionButton,
@@ -77,7 +97,8 @@ const initialComments: EuiCommentProps[] = [
     ),
   },
   {
-    username: 'emma',
+    username: <UserActionUsername username="emma" fullname="Emma Watson" />,
+    timelineAvatar: <EuiAvatar name="emma" />,
     event: (
       <>
         marked case as <EuiBadge color="warning">In progress</EuiBadge>
@@ -119,7 +140,10 @@ export default () => {
       setComments([
         ...comments,
         {
-          username: 'emma',
+          username: (
+            <UserActionUsername username="emma" fullname="Emma Watson" />
+          ),
+          timelineAvatar: <EuiAvatar name="emma" />,
           event: 'added a comment',
           timestamp: `on ${date}`,
           actions: actionButton,
@@ -143,7 +167,10 @@ export default () => {
     <>
       <EuiCommentList aria-label="Comment system example">
         {commentsList}
-        <EuiComment username="juana">
+        <EuiComment
+          username="juana"
+          timelineAvatar={<EuiAvatar name="juana" />}
+        >
           <EuiMarkdownEditor
             aria-label="Markdown editor"
             aria-describedby={errorElementId.current}

src-docs/src/views/copy/copy_to_clipboard.js

@@ -34,8 +34,8 @@ export default () => {
   return (
     <EuiCommentList aria-label="Copy to clipboard example">
       <EuiComment
-        component="div"
         username="Gusteau"
+        timelineAvatarAriaLabel="Gusteau"
         event="added a comment"
         actions={
           <EuiToolTip