[Flyout Template] Improve meta-block truncation - #289147
Conversation
Dosant
left a comment
There was a problem hiding this comment.
Looks good overall. I left two follow-up comments around link rendering and sizing.
| {truncatableText !== undefined ? ( | ||
| <span css={memoized.truncatedValue}> | ||
| <span css={memoized.fullTextSizer} aria-hidden> | ||
| {item.value} |
There was a problem hiding this comment.
Could we render truncatableText in the sizing copy instead? Rendering item.value here and cloning it into the overlay mounts the link twice. That can duplicate refs, IDs, data-test-subj values, and component behavior.
| * zero width inside a shrink-to-fit parent. | ||
| */ | ||
| const isLinkElement = (value: ReactNode): value is ReactElement<{ children?: ReactNode }> => | ||
| isValidElement(value) && (value.type === EuiLink || value.type === 'a'); |
There was a problem hiding this comment.
EuiLink does not always render an anchor: without a valid href, it renders a button. That button is shrink-to-fit and would contain the block-level EuiTextTruncate, so this path can hit the same layout failure described above. Can we restrict this to EuiLink instances guaranteed to render an anchor, or handle the button variant separately?
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Unknown metric groupswarm start memory
Test Failures
History
|
Summary
Truncation polish for https://github.com/elastic/kibana-team/issues/3165
Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.