-
Notifications
You must be signed in to change notification settings - Fork 842
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[EuiComment] Revert username
prop to accept a ReactNode
#6071
[EuiComment] Revert username
prop to accept a ReactNode
#6071
Conversation
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! I retested in Safari and Firefox using VoiceOver. Both announced the containing div as an image and provided the expected aria-label
. The nested SVG is being ignored properly by the Chrome accessibility overlay, and axe reports no violations.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, a few optional comments and thoughts but nothing blocking
Co-authored-by: Constance <constancecchen@users.noreply.github.com>
Co-authored-by: Constance <constancecchen@users.noreply.github.com>
Co-authored-by: Constance <constancecchen@users.noreply.github.com>
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_6071/ |
* Upgrade to v62.0.3 * Update EUI i18n tokens * Update html string snapshots - Emotion CSS hash changed * [EuiIcon] Update instances of `keyboardShortcut` icons to `keyboard` * [EuiErrorBoundary] Update snapshots from Emotion conversion * [EuiImage] Update snapshots, tests, and CSS to account for Emotion conversion * [EuiImage][RTL] Fix test failures caused by EuiImage changes * [EuiCommentList] Deprecate EuiCommentProps.type * [EuiCommentList] Rename `timelineIcon` prop to `timelineAvatar` - see elastic/eui#6071 * [EuiCommentList] Fix selectors deprecated by Emotion conversion * [EuiPopover][EuiCommentEvent][Enzyme] Fix mounted test failures caused by Emotion conversions - Mounting displays the Emotion wrapper with the data-test-subj on them - we need to specify the output div renders in order for text assertions to be correct * [EuiPopover] Deprecate `initialFocus={false}` as an option see elastic/eui#6044 * [EuiPopover] Rename `display=inlineBlock` to `inline-block` - see elastic/eui#5977 * [EuiPopover] Update snapshots from Emotion conversion * [EuiPopover] Replace deprecated `.euiPopover__panel-isOpen` class with new `[data-popover-open]` attribute * [EuiPopover][RTL] Fix test failures caused by not waiting for EuiPopover animation/transition * Skip failing a11y tests - test w/ similar error already skipped in another test above - requires closing the popover for next test to pass - not sure why delete action is no longer available * Fix failing Security Cypress tests * Attempt to squash flaky FTR tests around Add Filter popover Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jonathan Budzenski <jon@elastic.co>
* Upgrade to v62.0.3 * Update EUI i18n tokens * Update html string snapshots - Emotion CSS hash changed * [EuiIcon] Update instances of `keyboardShortcut` icons to `keyboard` * [EuiErrorBoundary] Update snapshots from Emotion conversion * [EuiImage] Update snapshots, tests, and CSS to account for Emotion conversion * [EuiImage][RTL] Fix test failures caused by EuiImage changes * [EuiCommentList] Deprecate EuiCommentProps.type * [EuiCommentList] Rename `timelineIcon` prop to `timelineAvatar` - see elastic/eui#6071 * [EuiCommentList] Fix selectors deprecated by Emotion conversion * [EuiPopover][EuiCommentEvent][Enzyme] Fix mounted test failures caused by Emotion conversions - Mounting displays the Emotion wrapper with the data-test-subj on them - we need to specify the output div renders in order for text assertions to be correct * [EuiPopover] Deprecate `initialFocus={false}` as an option see elastic/eui#6044 * [EuiPopover] Rename `display=inlineBlock` to `inline-block` - see elastic/eui#5977 * [EuiPopover] Update snapshots from Emotion conversion * [EuiPopover] Replace deprecated `.euiPopover__panel-isOpen` class with new `[data-popover-open]` attribute * [EuiPopover][RTL] Fix test failures caused by not waiting for EuiPopover animation/transition * Skip failing a11y tests - test w/ similar error already skipped in another test above - requires closing the popover for next test to pass - not sure why delete action is no longer available * Fix failing Security Cypress tests * Attempt to squash flaky FTR tests around Add Filter popover Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jonathan Budzenski <jon@elastic.co>
Summary
This PR reverts the EuiComment's
username
prop to accept aReactNode
instead of astring
.Not having the
username
as a string makes it impossible to have atimelineIcon
defaulting to theusername
's initials. So thetimelineAvatar
now defaults to an avatar with auserAvatar
icon.Updated "A comment system" example
This example reflects more on the current implementation for Cases:
Consumers can now pass a
ReactNode
to show the username with a tooltip and or avatar. As they doing in Casesaria-label
for eachEuiCommment.timelineIcon
One of the reasons I was trying to have the
username
as astring
is that I could pass the username as a name to thetimelineAvatar
Having the username reverted to aReactNode
turns this impossible.For this reason, I created a new prop called
timelineAvatarAriaLabel
that should be passed for eachEuiCommment
when atimelineAvatar
is passed as anIconType
:A sentence was added to the callout to reflect the above changes:
Checklist
[ ] Checked in mobile[ ] Checked Code Sandbox works for any docs examples[ ] Updated the Figma library counterpart