From 6426c5a39f38a719beed699c89617d871bad4f85 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 22 Jul 2022 12:26:58 +0100 Subject: [PATCH 01/15] [EuiComment] Revert `username` prop to accept a `ReactNode` --- .../__snapshots__/comment.test.tsx.snap | 64 ++++++++----------- .../__snapshots__/comment_list.test.tsx.snap | 56 +++++++--------- .../comment_timeline.test.tsx.snap | 36 +++++++---- src/components/comment_list/comment.tsx | 5 +- src/components/comment_list/comment_event.tsx | 2 +- .../comment_list/comment_timeline.test.tsx | 21 +++--- .../comment_list/comment_timeline.tsx | 20 +++--- 7 files changed, 101 insertions(+), 103 deletions(-) diff --git a/src/components/comment_list/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap index ac3502b677a..184d25ed2e1 100644 --- a/src/components/comment_list/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment_list/__snapshots__/comment.test.tsx.snap @@ -13,17 +13,15 @@ exports[`EuiComment is rendered 1`] = ` class="emotion-euiTimelineItemIcon__content" > @@ -48,17 +46,15 @@ exports[`EuiComment props event is rendered 1`] = ` class="emotion-euiTimelineItemIcon__content" > @@ -110,17 +106,15 @@ exports[`EuiComment props timestamp is rendered 1`] = ` class="emotion-euiTimelineItemIcon__content" > @@ -174,17 +168,15 @@ exports[`EuiComment renders a body 1`] = ` class="emotion-euiTimelineItemIcon__content" > @@ -217,17 +209,15 @@ exports[`EuiComment renders a timeline icon 1`] = ` class="emotion-euiTimelineItemIcon__content" > diff --git a/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap index a7785e7d431..587114a44a2 100644 --- a/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap +++ b/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap @@ -17,17 +17,15 @@ exports[`EuiCommentList is rendered 1`] = ` class="emotion-euiTimelineItemIcon__content" > @@ -57,17 +55,15 @@ exports[`EuiCommentList props gutterSize l is rendered 1`] = ` class="emotion-euiTimelineItemIcon__content" > @@ -97,17 +93,15 @@ exports[`EuiCommentList props gutterSize m is rendered 1`] = ` class="emotion-euiTimelineItemIcon__content" > @@ -137,17 +131,15 @@ exports[`EuiCommentList props gutterSize xl is rendered 1`] = ` class="emotion-euiTimelineItemIcon__content" > diff --git a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap index b119a9a2cc7..0c11a2e044c 100644 --- a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap +++ b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap @@ -1,33 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = ` +exports[`EuiCommentTimeline props timelineIcon defaults to a avatar with a \`userAvatar\` icon 1`] = ` +`; + +exports[`EuiCommentTimeline props timelineIcon is rendered with a ReactNode 1`] = ` + `; -exports[`EuiCommentTimeline props username is rendered 1`] = ` +exports[`EuiCommentTimeline props timelineIcon is rendered with a string 1`] = ` `; diff --git a/src/components/comment_list/comment.tsx b/src/components/comment_list/comment.tsx index 5e406e4c8a2..ecbb7b827e0 100644 --- a/src/components/comment_list/comment.tsx +++ b/src/components/comment_list/comment.tsx @@ -36,9 +36,8 @@ export const EuiComment: FunctionComponent = ({ const isTypeUpdate = !children; const verticalAlign = isTypeUpdate ? 'center' : 'top'; - const mainIcon = ( - - ); + + const mainIcon = ; return ( { describe('props', () => { - describe('username', () => { - it('is rendered', () => { - const component = render( - - ); + describe('timelineIcon', () => { + it('defaults to a avatar with a `userAvatar` icon', () => { + const component = render(); expect(component).toMatchSnapshot(); }); - }); - describe('timelineIcon', () => { - it('is rendered', () => { + it('is rendered with a string', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + it('is rendered with a ReactNode', () => { const component = render( - + ); expect(component).toMatchSnapshot(); diff --git a/src/components/comment_list/comment_timeline.tsx b/src/components/comment_list/comment_timeline.tsx index bec167ac988..9b533111847 100644 --- a/src/components/comment_list/comment_timeline.tsx +++ b/src/components/comment_list/comment_timeline.tsx @@ -9,41 +9,43 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { CommonProps } from '../common'; import { EuiAvatar, EuiAvatarProps } from '../avatar'; -import { EuiCommentEventProps } from './comment_event'; export interface EuiCommentTimelineProps extends CommonProps { /** - * Main icon that accompanies the comment. Should indicate who is the author of the comment. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. If no icon is provided, it will default to the `username`'s initials. + * Main icon that accompanies the comment. Should indicate who is the author of the comment. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. If no icon is provided, it will default to a avatar with a `userAvatar` icon. */ timelineIcon?: ReactNode | EuiAvatarProps['iconType']; - - username: EuiCommentEventProps['username']; } export const EuiCommentTimeline: FunctionComponent = ({ timelineIcon, - username, }) => { let iconRender; const avatarClassName = 'euiCommentAvatar'; const iconIsString = typeof timelineIcon === 'string'; - const iconIsNode = typeof timelineIcon === 'object'; if (iconIsString) { iconRender = ( ); - } else if (iconIsNode) { + } else if (timelineIcon) { iconRender = timelineIcon; } else { - iconRender = ; + iconRender = ( + + ); } return <>{iconRender}; From 30959a3afec3a143e701cae5b224919b50d3a0fe Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 22 Jul 2022 12:49:45 +0100 Subject: [PATCH 02/15] Updating comment system example to show username with a tooltip --- src-docs/src/views/comment/comment_system.tsx | 41 +++++++++++++++---- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/comment/comment_system.tsx b/src-docs/src/views/comment/comment_system.tsx index badf7ddb1e1..921305f6a56 100644 --- a/src-docs/src/views/comment/comment_system.tsx +++ b/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,28 @@ const complexEvent = ( ); +const UserActionUsername = ({ + username, + fullname, +}: { + username: string; + fullname: string; +}) => { + return ( + {fullname}

} + data-test-subj="user-action-username-tooltip" + > + {username} + + ); +}; + const initialComments: EuiCommentProps[] = [ { - username: 'emma', + username: , + timelineIcon: , event: 'added a comment', timestamp: 'on 3rd March 2022', children: ( @@ -51,7 +72,8 @@ const initialComments: EuiCommentProps[] = [ actions: actionButton, }, { - username: 'emma', + username: , + timelineIcon: , event: complexEvent, timestamp: 'on 3rd March 2022', eventIcon: 'tag', @@ -59,13 +81,14 @@ const initialComments: EuiCommentProps[] = [ }, { username: 'system', - timelineIcon: 'dot', + timelineIcon: , event: 'pushed a new incident', timestamp: 'on 4th March 2022', eventColor: 'danger', }, { - username: 'tiago', + username: , + timelineIcon: , event: 'added a comment', timestamp: 'on 4th March 2022', actions: actionButton, @@ -77,7 +100,8 @@ const initialComments: EuiCommentProps[] = [ ), }, { - username: 'emma', + username: , + timelineIcon: , event: ( <> marked case as In progress @@ -119,7 +143,10 @@ export default () => { setComments([ ...comments, { - username: 'emma', + username: ( + + ), + timelineIcon: , event: 'added a comment', timestamp: `on ${date}`, actions: actionButton, @@ -143,7 +170,7 @@ export default () => { <> {commentsList} - + }> Date: Fri, 22 Jul 2022 13:47:33 +0100 Subject: [PATCH 03/15] Removing unnecessary `data-test-subj` --- src-docs/src/views/comment/comment_system.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src-docs/src/views/comment/comment_system.tsx b/src-docs/src/views/comment/comment_system.tsx index 921305f6a56..ec5d03313ee 100644 --- a/src-docs/src/views/comment/comment_system.tsx +++ b/src-docs/src/views/comment/comment_system.tsx @@ -48,11 +48,7 @@ const UserActionUsername = ({ fullname: string; }) => { return ( - {fullname}

} - data-test-subj="user-action-username-tooltip" - > + {fullname}

}> {username} ); From aa516b721e4991063cb50b331cd700b01008b99d Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 22 Jul 2022 16:05:39 +0100 Subject: [PATCH 04/15] Added `timelineIconAriaLabel` to improve a11y --- src-docs/src/views/comment/comment.tsx | 1 + .../src/views/comment/comment_actions.tsx | 2 ++ src-docs/src/views/comment/comment_avatar.tsx | 8 ++++++- .../src/views/comment/comment_flexible.tsx | 4 ++++ src-docs/src/views/comment/comment_list.tsx | 6 +++++- .../comment_timeline.test.tsx.snap | 16 ++++++++++++++ src/components/comment_list/comment.tsx | 8 ++++++- .../comment_list/comment_timeline.test.tsx | 21 ++++++++++++++++++- .../comment_list/comment_timeline.tsx | 16 ++++++++++---- 9 files changed, 74 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index a18870d37c0..861891c47ac 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -28,6 +28,7 @@ export default () => ( { { diff --git a/src-docs/src/views/comment/comment_avatar.tsx b/src-docs/src/views/comment/comment_avatar.tsx index 859f3d8766e..7806a7e7bbb 100644 --- a/src-docs/src/views/comment/comment_avatar.tsx +++ b/src-docs/src/views/comment/comment_avatar.tsx @@ -9,7 +9,11 @@ import { export default () => ( - +

The avatar initials is generated from the username{' '} @@ -20,6 +24,7 @@ export default () => ( @@ -31,6 +36,7 @@ export default () => ( `; + +exports[`EuiCommentTimeline props timelineIcon is rendered with timelineIconAriaLabel 1`] = ` +

+`; diff --git a/src/components/comment_list/comment.tsx b/src/components/comment_list/comment.tsx index ecbb7b827e0..5b830f68d74 100644 --- a/src/components/comment_list/comment.tsx +++ b/src/components/comment_list/comment.tsx @@ -27,6 +27,7 @@ export const EuiComment: FunctionComponent = ({ actions, timestamp, timelineIcon, + timelineIconAriaLabel, eventColor, eventIcon, eventIconAriaLabel, @@ -37,7 +38,12 @@ export const EuiComment: FunctionComponent = ({ const isTypeUpdate = !children; const verticalAlign = isTypeUpdate ? 'center' : 'top'; - const mainIcon = ; + const mainIcon = ( + + ); return ( { it('is rendered with a ReactNode', () => { const component = render( - + + } + /> + ); + + expect(component).toMatchSnapshot(); + }); + + it('is rendered with timelineIconAriaLabel', () => { + const component = render( + ); expect(component).toMatchSnapshot(); diff --git a/src/components/comment_list/comment_timeline.tsx b/src/components/comment_list/comment_timeline.tsx index 9b533111847..a56324c2dba 100644 --- a/src/components/comment_list/comment_timeline.tsx +++ b/src/components/comment_list/comment_timeline.tsx @@ -12,25 +12,33 @@ import { EuiAvatar, EuiAvatarProps } from '../avatar'; export interface EuiCommentTimelineProps extends CommonProps { /** - * Main icon that accompanies the comment. Should indicate who is the author of the comment. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. If no icon is provided, it will default to a avatar with a `userAvatar` icon. + * Main avatar that accompanies the comment. Should indicate who is the author of the comment. + * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`. + * If no `timelineIcon` is passed, the `userAvatar` icon will be used as the avatar. */ timelineIcon?: ReactNode | EuiAvatarProps['iconType']; + + /** + * Specify an `aria-label` for the `timelineIcon` when passed as an `IconType` or when nothing is passed. + * If no `aria-label` is passed we assume the icon is purely decorative. + */ + timelineIconAriaLabel?: string; } export const EuiCommentTimeline: FunctionComponent = ({ timelineIcon, + timelineIconAriaLabel, }) => { let iconRender; const avatarClassName = 'euiCommentAvatar'; - const iconIsString = typeof timelineIcon === 'string'; if (iconIsString) { iconRender = ( @@ -41,7 +49,7 @@ export const EuiCommentTimeline: FunctionComponent = ({ iconRender = ( From 1348cf454a054d83df7cea9376d3034d6bc59993 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 22 Jul 2022 17:28:58 +0100 Subject: [PATCH 05/15] Fixing lack of aria label in one docs example --- src-docs/src/views/comment/comment_props.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/comment/comment_props.tsx b/src-docs/src/views/comment/comment_props.tsx index bc64bad89d7..6d1d5cd34d0 100644 --- a/src-docs/src/views/comment/comment_props.tsx +++ b/src-docs/src/views/comment/comment_props.tsx @@ -55,7 +55,7 @@ export default ({ snippet }: { snippet: ReactNode }) => { style={{ maxWidth: '540px' }} > - +
Date: Fri, 22 Jul 2022 17:46:37 +0100 Subject: [PATCH 06/15] Removed the nested `aria-label` on the `EuiAvatar` icon to simplify a11y --- .../avatar/__snapshots__/avatar.test.tsx.snap | 16 ++++------------ src/components/avatar/avatar.tsx | 1 - .../__snapshots__/comment_event.test.tsx.snap | 4 +--- .../__snapshots__/comment_timeline.test.tsx.snap | 8 ++------ .../__snapshots__/timeline.test.tsx.snap | 16 ++++------------ .../__snapshots__/timeline_item.test.tsx.snap | 8 ++------ upcoming_changelogs/6071.md | 5 +++++ 7 files changed, 18 insertions(+), 40 deletions(-) create mode 100644 upcoming_changelogs/6071.md diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap index ad02a5ee700..882d6ab0a55 100644 --- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap +++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap @@ -106,9 +106,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = ` - name - + />
`; @@ -124,9 +122,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = ` class="euiAvatar__icon" color="primary" data-euiicon-type="bolt" - > - name - + /> `; @@ -142,9 +138,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = ` class="euiAvatar__icon" color="#000000" data-euiicon-type="bolt" - > - name - + /> `; @@ -160,9 +154,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = ` class="euiAvatar__icon" color="#000000" data-euiicon-type="bolt" - > - name - + /> `; diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index 19600e07e0f..34213b83b33 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -179,7 +179,6 @@ export const EuiAvatar: FunctionComponent = ({ className="euiAvatar__icon" size={iconSize || size} type={iconType} - aria-label={name} color={iconCustomColor === null ? undefined : iconCustomColor} /> ); diff --git a/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap index 7ef1e9244d8..a5c577bbd9a 100644 --- a/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap @@ -79,9 +79,7 @@ exports[`EuiCommentEvent props eventIcon and eventIconAriaLabel are rendered 1`] - edit - + />
- username - + />
`; @@ -54,8 +52,6 @@ exports[`EuiCommentTimeline props timelineIcon is rendered with timelineIconAria - timelineIconAriaLabel - + /> `; diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index 77109522b75..e4456d62f4e 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -23,9 +23,7 @@ exports[`EuiTimeline is rendered with items 1`] = ` - email - + /> @@ -99,9 +97,7 @@ exports[`EuiTimeline props gutterSize l is rendered 1`] = ` - email - + /> @@ -175,9 +171,7 @@ exports[`EuiTimeline props gutterSize m is rendered 1`] = ` - email - + /> @@ -251,9 +245,7 @@ exports[`EuiTimeline props gutterSize xl is rendered 1`] = ` - email - + /> diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap index e8e6232d2de..e16981232db 100644 --- a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap @@ -52,9 +52,7 @@ exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = ` - dot - + /> @@ -87,9 +85,7 @@ exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = ` - icon aria label - + /> diff --git a/upcoming_changelogs/6071.md b/upcoming_changelogs/6071.md new file mode 100644 index 00000000000..4ca399489dc --- /dev/null +++ b/upcoming_changelogs/6071.md @@ -0,0 +1,5 @@ +- Removed the nested `aria-label` on the `EuiAvatar` icon to simplify a11y + +**Bug fixes** + +- Reverted the change `EuiCommentEvent.username` type from `ReactNode` to `string` \ No newline at end of file From 804592d05cf78d2937d8889a62916fecb2bd2c87 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 22 Jul 2022 18:37:00 +0100 Subject: [PATCH 07/15] Added missing `timelineIconAriaLabel` in copy to clipboard example --- src-docs/src/views/copy/copy_to_clipboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/copy/copy_to_clipboard.js b/src-docs/src/views/copy/copy_to_clipboard.js index 972af1f1e84..8356fd2d13c 100644 --- a/src-docs/src/views/copy/copy_to_clipboard.js +++ b/src-docs/src/views/copy/copy_to_clipboard.js @@ -34,8 +34,8 @@ export default () => { return ( Date: Mon, 25 Jul 2022 11:10:43 +0100 Subject: [PATCH 08/15] A11y callout --- src-docs/src/views/comment/comment_example.js | 5 ++++- src-docs/src/views/comment/comment_system.tsx | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index b5dd4d4a7b2..2902a0ca48b 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -96,7 +96,10 @@ export const CommentListExample = { For accessibility, it is highly recommended to provide a descriptive{' '} aria-label or the ID of an external label to the{' '} aria-labelledby prop of the{' '} - EuiCommentList. + EuiCommentList. Every EuiComment{' '} + should have a timelineIconAriaLabel when a{' '} + timelineIcon is passed as an{' '} + IconType. } /> diff --git a/src-docs/src/views/comment/comment_system.tsx b/src-docs/src/views/comment/comment_system.tsx index ec5d03313ee..bdeb4181fc4 100644 --- a/src-docs/src/views/comment/comment_system.tsx +++ b/src-docs/src/views/comment/comment_system.tsx @@ -77,7 +77,8 @@ const initialComments: EuiCommentProps[] = [ }, { username: 'system', - timelineIcon: , + timelineIcon: 'dot', + timelineIconAriaLabel: 'System', event: 'pushed a new incident', timestamp: 'on 4th March 2022', eventColor: 'danger', From 2b54cf73b07c7c2964b6dca35ecd5618ccbb7b5d Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 11:43:13 +0100 Subject: [PATCH 09/15] Better callout text --- src-docs/src/views/comment/comment_example.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 2902a0ca48b..d9bb3b647a2 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -96,10 +96,10 @@ export const CommentListExample = { For accessibility, it is highly recommended to provide a descriptive{' '} aria-label or the ID of an external label to the{' '} aria-labelledby prop of the{' '} - EuiCommentList. Every EuiComment{' '} - should have a timelineIconAriaLabel when a{' '} - timelineIcon is passed as an{' '} - IconType. + EuiCommentList. A{' '} + timelineIconAriaLabel should be provided for + every EuiComment with or without a{' '} + timelineIcon as IconType. } /> From d93c9726f4e9aafa0bf80c2a0d6f5d682d204666 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 20:07:51 +0100 Subject: [PATCH 10/15] Update src/components/comment_list/comment_timeline.tsx Co-authored-by: Constance --- src/components/comment_list/comment_timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comment_list/comment_timeline.tsx b/src/components/comment_list/comment_timeline.tsx index a56324c2dba..4f2c9f3620c 100644 --- a/src/components/comment_list/comment_timeline.tsx +++ b/src/components/comment_list/comment_timeline.tsx @@ -38,7 +38,7 @@ export const EuiCommentTimeline: FunctionComponent = ({ iconRender = ( From 0164dbf839997dc9b0d5f35c4bf8c0a3d8900c63 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 20:08:40 +0100 Subject: [PATCH 11/15] Update src/components/comment_list/comment_timeline.tsx Co-authored-by: Constance --- src/components/comment_list/comment_timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comment_list/comment_timeline.tsx b/src/components/comment_list/comment_timeline.tsx index 4f2c9f3620c..bf30e1fb499 100644 --- a/src/components/comment_list/comment_timeline.tsx +++ b/src/components/comment_list/comment_timeline.tsx @@ -49,7 +49,7 @@ export const EuiCommentTimeline: FunctionComponent = ({ iconRender = ( From cf76a1921c3af9f9a6cb42609c64c85a4d22fd67 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 20:09:14 +0100 Subject: [PATCH 12/15] Update src/components/comment_list/comment_timeline.tsx Co-authored-by: Constance --- src/components/comment_list/comment_timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comment_list/comment_timeline.tsx b/src/components/comment_list/comment_timeline.tsx index bf30e1fb499..261a20ea04c 100644 --- a/src/components/comment_list/comment_timeline.tsx +++ b/src/components/comment_list/comment_timeline.tsx @@ -19,7 +19,7 @@ export interface EuiCommentTimelineProps extends CommonProps { timelineIcon?: ReactNode | EuiAvatarProps['iconType']; /** - * Specify an `aria-label` for the `timelineIcon` when passed as an `IconType` or when nothing is passed. + * Specify an `aria-label` and `title` for the `timelineIcon` when passed as an `IconType` or when nothing is passed. * If no `aria-label` is passed we assume the icon is purely decorative. */ timelineIconAriaLabel?: string; From 04525b6be3db4533415e63289a02fa118ca95db0 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 26 Jul 2022 12:30:20 +0100 Subject: [PATCH 13/15] Renamed `timelineIcon` to `timelineAvatar` --- src-docs/src/views/comment/comment.tsx | 2 +- .../src/views/comment/comment_actions.tsx | 6 ++-- src-docs/src/views/comment/comment_avatar.tsx | 16 +++++----- src-docs/src/views/comment/comment_example.js | 32 ++++++++----------- .../src/views/comment/comment_flexible.tsx | 10 +++--- src-docs/src/views/comment/comment_list.tsx | 10 +++--- src-docs/src/views/comment/comment_props.tsx | 2 +- src-docs/src/views/comment/comment_system.tsx | 19 ++++++----- src-docs/src/views/copy/copy_to_clipboard.js | 2 +- .../comment_timeline.test.tsx.snap | 12 +++---- src/components/comment_list/comment.test.tsx | 2 +- src/components/comment_list/comment.tsx | 8 ++--- .../comment_list/comment_timeline.test.tsx | 14 ++++---- .../comment_list/comment_timeline.tsx | 28 ++++++++-------- upcoming_changelogs/6071.md | 7 +++- 15 files changed, 87 insertions(+), 83 deletions(-) diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index 861891c47ac..2ab37284da9 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -28,7 +28,7 @@ export default () => ( { { pushed a new incident malware detection diff --git a/src-docs/src/views/comment/comment_avatar.tsx b/src-docs/src/views/comment/comment_avatar.tsx index 7806a7e7bbb..ac646871d23 100644 --- a/src-docs/src/views/comment/comment_avatar.tsx +++ b/src-docs/src/views/comment/comment_avatar.tsx @@ -11,7 +11,7 @@ export default () => ( @@ -24,21 +24,21 @@ export default () => ( - The timelineIcon is using a dot{' '} - icon. + The timelineAvatar is using a{' '} + dot icon. } /> ( >

- The timelineIcon is using a custom{' '} + The timelineAvatar is using a custom{' '} EuiAvatar.

diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index d9bb3b647a2..41cd9509bee 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -52,11 +52,11 @@ const commentAvatarSnippet = [ `, ` - + `, ` - + {body} @@ -97,9 +97,9 @@ export const CommentListExample = { aria-label or the ID of an external label to the{' '} aria-labelledby prop of the{' '} EuiCommentList. A{' '} - timelineIconAriaLabel should be provided for + timelineAvatarAriaLabel should be provided for every EuiComment with or without a{' '} - timelineIcon as IconType. + timelineAvatar as IconType. } /> @@ -148,7 +148,7 @@ export const CommentListExample = {
  1. - timelineIcon: Shows an icon that should + timelineAvatar: Shows an icon that should indicate who is the author of the comment. To customize, pass a{' '} string as a{' '} EuiIcon['type'] or a{' '} @@ -210,7 +210,7 @@ export const CommentListExample = { playground: commentConfig, }, { - title: 'Timeline icon', + title: 'Timeline avatar', source: [ { type: GuideSectionTypes.JS, @@ -223,28 +223,24 @@ export const CommentListExample = {
    • By default, each EuiComment shows an avatar with - the initial letter of the username. It also - uses the username for the avatar title - attribute. + the userAvatar icon. A{' '} + timelineAvatarAriaLabel + should be provided when using this default option.
    • - If your EuiComment doesn't have a{' '} - username, or if you don't want to use it - for generating the title attribute and initials you can use the{' '} - timelineIcon prop instead. -
      • -
    • - You can also show an icon by passing to the{' '} - timelineIcon any of the icon types that{' '} + You can customize your avatar by passing to the{' '} + timelineAvatar any of the icon types that{' '} EuiIcon {' '} supports. The icon will show inside a subdued{' '} avatar. Consider this option when showing a system update. + Providing a timelineAvatarAriaLabel is + recommended.
    • You can further customize the timeline icon by passing to the{' '} - timelineIcon a{' '} + timelineAvatar a{' '} EuiAvatar diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index 803e013e0a4..06733166fbd 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -49,7 +49,7 @@ const eventWithMultipleTags = ( const commentsData: EuiCommentListProps['comments'] = [ { username: 'janed', - timelineIconAriaLabel: 'Jane Doe', + timelineAvatarAriaLabel: 'Jane Doe', event: 'added a comment', timestamp: 'on Jan 1, 2020', children: body, @@ -57,7 +57,7 @@ const commentsData: EuiCommentListProps['comments'] = [ }, { username: 'luisg', - timelineIconAriaLabel: 'Luis G', + timelineAvatarAriaLabel: 'Luis G', event: eventWithMultipleTags, timestamp: '22 hours ago', eventIcon: 'tag', @@ -66,15 +66,15 @@ const commentsData: EuiCommentListProps['comments'] = [ }, { username: 'system', - timelineIconAriaLabel: 'System', - timelineIcon: 'dot', + timelineAvatarAriaLabel: 'System', + timelineAvatar: 'dot', event: 'pushed a new incident', timestamp: '20 hours ago', eventColor: 'danger', }, { username: 'pancho1', - timelineIconAriaLabel: 'Pancho Pérez', + timelineAvatarAriaLabel: 'Pancho Pérez', children: ( { style={{ maxWidth: '540px' }} > - +
      , - timelineIcon: , + timelineAvatar: , event: 'added a comment', timestamp: 'on 3rd March 2022', children: ( @@ -69,7 +69,7 @@ const initialComments: EuiCommentProps[] = [ }, { username: , - timelineIcon: , + timelineAvatar: , event: complexEvent, timestamp: 'on 3rd March 2022', eventIcon: 'tag', @@ -77,15 +77,15 @@ const initialComments: EuiCommentProps[] = [ }, { username: 'system', - timelineIcon: 'dot', - timelineIconAriaLabel: 'System', + timelineAvatar: 'dot', + timelineAvatarAriaLabel: 'System', event: 'pushed a new incident', timestamp: 'on 4th March 2022', eventColor: 'danger', }, { username: , - timelineIcon: , + timelineAvatar: , event: 'added a comment', timestamp: 'on 4th March 2022', actions: actionButton, @@ -98,7 +98,7 @@ const initialComments: EuiCommentProps[] = [ }, { username: , - timelineIcon: , + timelineAvatar: , event: ( <> marked case as In progress @@ -143,7 +143,7 @@ export default () => { username: ( ), - timelineIcon: , + timelineAvatar: , event: 'added a comment', timestamp: `on ${date}`, actions: actionButton, @@ -167,7 +167,10 @@ export default () => { <> {commentsList} - }> + } + > { `; -exports[`EuiCommentTimeline props timelineIcon is rendered with a ReactNode 1`] = ` +exports[`EuiCommentTimeline props timelineAvatar is rendered with a ReactNode 1`] = `
      `; -exports[`EuiCommentTimeline props timelineIcon is rendered with a string 1`] = ` +exports[`EuiCommentTimeline props timelineAvatar is rendered with a string 1`] = `
      `; -exports[`EuiCommentTimeline props timelineIcon is rendered with timelineIconAriaLabel 1`] = ` +exports[`EuiCommentTimeline props timelineAvatar is rendered with timelineAvatarAriaLabel 1`] = `