feat: Add TruncatedText component by avinashbot · Pull Request #4543 · cloudscape-design/components

avinashbot · 2026-05-20T14:11:08Z

Description

Releases a new component, TruncatedText, based on tooltip, which handles things like truncation detection, correct
ARIA roles, and pointer and keyboard behavior.

Related links, issue #, if available: n/a

How has this been tested?

Unit tests, and a new visual test page for screenshot testing (will add pipeline test after merge)

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-05-20T14:22:14Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.43%. Comparing base (9c52a81) to head (876cd0b).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4543   +/-   ##
=======================================
  Coverage   97.42%   97.43%           
=======================================
  Files         938      941    +3     
  Lines       29680    29720   +40     
  Branches    10788    10798   +10     
=======================================
+ Hits        28917    28957   +40     
- Misses        716      756   +40     
+ Partials       47        7   -40

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

jperals · 2026-05-26T09:18:37Z

+export default function TruncatedTextSimple() {
+  return (
+    <ScreenshotArea>
+      <h1>TruncatedText examples</h1>


Minor: the page header should preferably be ourside the screenshot area

jperals · 2026-05-26T09:23:49Z

+        <Box>
+          <Box variant="awsui-key-label">With CopyToClipboard, internal truncation</Box>
+          <div style={containerStyle}>
+            <CopyToClipboard


Is this wrapping after the icon expected because builders should instead wrap the CopyToClipboard inside TruncatedText, as in the previous element?

It's not entirely expected; there's a parallel update to the component to support single-line wrapping; which has released since this PR was created. Will rebase.

jperals · 2026-05-26T09:25:18Z

+          <Box variant="awsui-key-label">With StatusIndicator (wrapText=true, default)</Box>
+          <div style={containerStyle}>
+            <TruncatedText>
+              <StatusIndicator type="success">


Is it expected that there is no ellipsis shown after the truncated text?

jperals · 2026-05-26T10:00:21Z

+export { TruncatedTextProps };
+
+export default function TruncatedText({ children, tooltipText, ...rest }: TruncatedTextProps) {
+  const baseComponentProps = useBaseComponent('TruncatedText');


Any props or metadata we want to track? For example whether tooltipText is set?

Couldn't really come up with anything. But that's a good suggestion, adding to the metadata.

jperals · 2026-05-26T10:02:02Z

+    if (element) {
+      // useResizeObserver fires initially at layoutEffect-time where the initial calculation
+      // is performed, but the calculation isn't always correct at that stage.
+      setTimeout(() => setIsTruncated(element.scrollWidth > element.clientWidth), 1);


Is there any alternative where arbitrary timeouts are not needed, such as requestAnimationFrame? We use requestAnimationFrame in 36 other places.

I tried to use rAF, but it was still flaky. It's hard to tell at what point during rendering that wrapping/truncation happens, but it looks like every browser is a little unique in that regard, and this seemed to work the most consistently (timeout of 0 didn't work either).

jperals · 2026-05-26T10:08:41Z

+  return (
+    <ScreenshotArea>
+      <h1>TruncatedText examples</h1>
+      <SpaceBetween size="m">


Note: permutations make the screenshots more isolated, and handle future additions more gracefully

jperals · 2026-05-26T10:11:29Z

+  @include focus-visible.when-visible {
+    // The border is 2px wide, and since this component is commonly used in scenarios
+    // where the content can be truncated, let's play it safe by pulling in the outline.
+    @include styles.focus-highlight(-2px);


Is there any design token we can use, maybe $border-radius-control-default-focus-ring?

Looks like $box-shadow-focused-width fits the bill.

jperals · 2026-05-26T10:15:36Z

+  max-inline-size: 100%;
+  min-inline-size: 0;
+
+  &:focus {


Looks like we need this ruleset every time we use the focus-visiblemixins. Could it integrated there instead? https://github.com/cloudscape-design/component-toolkit/blob/7794be880a5799abd7d578d7009dbfbf5cdedbba/src/internal/focus-visible/index.scss

Not a blocking comment I hope? I don't know how backward compatible this is, needs a little investigation. I know we sometimes use this to render "fake" focus rings too...

avinashbot deployed to dev-pages-react16 May 20, 2026 14:14 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 May 20, 2026 14:14 — with GitHub Actions View deployment

avinashbot marked this pull request as ready for review May 21, 2026 08:09

avinashbot requested a review from a team as a code owner May 21, 2026 08:09

avinashbot requested review from a team, georgylobko and jperals and removed request for a team and georgylobko May 21, 2026 08:09

jperals reviewed May 26, 2026

View reviewed changes

avinashbot added 2 commits May 26, 2026 16:07

feat: Add TruncatedText component

39921a9

Add permutation page. Address comments.

876cd0b

avinashbot force-pushed the feat/truncated-text-component branch from 275de6a to 876cd0b Compare May 26, 2026 14:23

avinashbot deployed to dev-pages-react16 May 26, 2026 14:26 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 May 26, 2026 14:26 — with GitHub Actions View deployment

Conversation

avinashbot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

avinashbot commented May 20, 2026 •

edited

Loading

codecov Bot commented May 20, 2026 •

edited

Loading