cloudscape-design · avinashbot · May 20, 2026
@@ -93,6 +93,7 @@ const pluralizationMap = {
   Tooltip: 'Tooltips',
   TopNavigation: 'TopNavigations',
   TreeView: 'TreeViews',
+  TruncatedText: 'TruncatedTexts',
   TutorialPanel: 'TutorialPanels',
   Wizard: 'Wizards',
 };

@@ -0,0 +1,101 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+
+import Box from '~components/box';
+import CopyToClipboard from '~components/copy-to-clipboard';
+import Link from '~components/link';
+import SpaceBetween from '~components/space-between';
+import StatusIndicator from '~components/status-indicator';
+import TruncatedText from '~components/truncated-text';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+const containerStyle: React.CSSProperties = {
+  maxWidth: '320px',
+  padding: '8px 12px',
+  border: '1px solid #d5dbdb',
+  borderRadius: '4px',
+};
+
+export default function TruncatedTextSimple() {
+  return (
+    <ScreenshotArea>
+      <h1>TruncatedText examples</h1>
+      <SpaceBetween size="m">
+        <Box>
+          <Box variant="awsui-key-label">Truncated plain text</Box>
+          <div style={containerStyle}>
+            <TruncatedText>arn:aws:lambda:us-east-1:123456789012:function:my-function</TruncatedText>
+          </div>
+        </Box>
+
+        <Box>
+          <Box variant="awsui-key-label">Non-truncated plain text</Box>
+          <div style={containerStyle}>
+            <TruncatedText>arn:aws:lambda</TruncatedText>
+          </div>
+        </Box>
+
+        <Box>
+          <Box variant="awsui-key-label">Truncated with interactive child (uses tooltipText)</Box>
+          <div style={containerStyle}>
+            <TruncatedText tooltipText="ResourceName-421492941223_may-be-truncated">
+              <Link href="#">ResourceName-421492941223_may-be-truncated</Link>
+            </TruncatedText>
+          </div>
+        </Box>
+
+        <Box>
+          <Box variant="awsui-key-label">Truncated text in a flex container</Box>
+          <div style={{ ...containerStyle, display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>Label:</span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <TruncatedText>arn:aws:s3:::my-very-long-bucket-name-with-extra-words</TruncatedText>
+            </div>
+          </div>
+        </Box>
+
+        <Box>
+          <Box variant="awsui-key-label">With StatusIndicator (wrapText=true, default)</Box>
+          <div style={containerStyle}>
+            <TruncatedText>
+              <StatusIndicator type="success">
+                The instance has been running for an extended period of time
+              </StatusIndicator>
+            </TruncatedText>
+          </div>
+        </Box>
+
+        <Box>
+          <Box variant="awsui-key-label">With CopyToClipboard (variant=inline)</Box>
+          <div style={containerStyle}>
+            <TruncatedText tooltipText="arn:aws:iam::123456789012:role/my-very-long-role-name">
+              <CopyToClipboard
+                variant="inline"
+                textToCopy="arn:aws:iam::123456789012:role/my-very-long-role-name"
+                copyButtonAriaLabel="Copy ARN"
+                copySuccessText="ARN copied"
+                copyErrorText="Failed to copy ARN"
+              />
+            </TruncatedText>
+          </div>
+        </Box>
+
+        <Box>
+          <Box variant="awsui-key-label">With CopyToClipboard, internal truncation</Box>
+          <div style={containerStyle}>
+            <CopyToClipboard
+              variant="inline"
+              textToCopy="arn:aws:iam::123456789012:role/my-very-long-role-name"
+              textToDisplay={<TruncatedText>arn:aws:iam::123456789012:role/my-very-long-role-name</TruncatedText>}
+              copyButtonAriaLabel="Copy ARN"
+              copySuccessText="ARN copied"
+              copyErrorText="Failed to copy ARN"
+            />
+          </div>
+        </Box>
+      </SpaceBetween>
+    </ScreenshotArea>
+  );
+}
@@ -32204,6 +32204,51 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
 }
 `;
 
+exports[`Components definition for truncated-text matches the snapshot: truncated-text 1`] = `
+{
+  "dashCaseName": "truncated-text",
+  "events": [],
+  "functions": [],
+  "name": "TruncatedText",
+  "properties": [
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "The content of the tooltip shown when the text is truncated. By default, the
+tooltip content is the same as the \`children\` slot. Use only if the \`children\`
+slot may contain interactive elements.",
+      "name": "tooltipText",
+      "optional": true,
+      "type": "string",
+    },
+  ],
+  "regions": [
+    {
+      "description": "The inline text to display. If there isn't enough space to render the text
+in a single line, it is truncated with an ellipsis and the full content is
+shown on pointer hover or keyboard focus.",
+      "isDefault": true,
+      "name": "children",
+    },
+  ],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Components definition for tutorial-panel matches the snapshot: tutorial-panel 1`] = `
 {
   "dashCaseName": "tutorial-panel",
@@ -44719,6 +44764,19 @@ Supported options:
       ],
       "name": "TreeViewItemWrapper",
     },
+    {
+      "methods": [
+        {
+          "name": "findTooltip",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "TooltipWrapper",
+          },
+        },
+      ],
+      "name": "TruncatedTextWrapper",
+    },
     {
       "methods": [
         {
@@ -53456,6 +53514,19 @@ Supported options:
       ],
       "name": "TreeViewItemWrapper",
     },
+    {
+      "methods": [
+        {
+          "name": "findTooltip",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "TooltipWrapper",
+          },
+        },
+      ],
+      "name": "TruncatedTextWrapper",
+    },
     {
       "methods": [
         {

@@ -737,6 +737,9 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_1js4f",
     "awsui_treeitem_1js4f",
   ],
+  "truncated-text": [
+    "awsui_root_lwmqr",
+  ],
   "tutorial-panel": [
     "awsui_collapse-button_ig8mp",
     "awsui_completed_ig8mp",

@@ -100,6 +100,7 @@ import TokenGroupWrapper from './token-group';
 import TooltipWrapper from './tooltip';
 import TopNavigationWrapper from './top-navigation';
 import TreeViewWrapper from './tree-view';
+import TruncatedTextWrapper from './truncated-text';
 import TutorialPanelWrapper from './tutorial-panel';
 import WizardWrapper from './wizard';
 
@@ -195,6 +196,7 @@ export { TokenGroupWrapper };
 export { TooltipWrapper };
 export { TopNavigationWrapper };
 export { TreeViewWrapper };
+export { TruncatedTextWrapper };
 export { TutorialPanelWrapper };
 export { WizardWrapper };
 
@@ -2749,6 +2751,34 @@ findAllTreeViews(selector?: string): Array<TreeViewWrapper>;
  * @returns {TreeViewWrapper | null}
  */
 findClosestTreeView(): TreeViewWrapper | null;
+/**
+ * Returns the wrapper of the first TruncatedText that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TruncatedText.
+ * If no matching TruncatedText is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TruncatedTextWrapper | null}
+ */
+findTruncatedText(selector?: string): TruncatedTextWrapper | null;
+
+/**
+ * Returns an array of TruncatedText wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TruncatedTexts inside the current wrapper.
+ * If no matching TruncatedText is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TruncatedTextWrapper>}
+ */
+findAllTruncatedTexts(selector?: string): Array<TruncatedTextWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TruncatedText for the current element,
+ * or the element itself if it is an instance of TruncatedText.
+ * If no TruncatedText is found, returns \`null\`.
+ *
+ * @returns {TruncatedTextWrapper | null}
+ */
+findClosestTruncatedText(): TruncatedTextWrapper | null;
 /**
  * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector.
  * If no CSS selector is specified, returns the wrapper of the first TutorialPanel.
@@ -3992,6 +4022,19 @@ ElementWrapper.prototype.findTreeView = function(selector) {
 ElementWrapper.prototype.findAllTreeViews = function(selector) {
   return this.findAllComponents(TreeViewWrapper, selector);
 };
+ElementWrapper.prototype.findTruncatedText = function(selector) {
+  let rootSelector = \`.\${TruncatedTextWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TruncatedTextWrapper && TruncatedTextWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TruncatedTextWrapper.rootSelector}, .\${TruncatedTextWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TruncatedTextWrapper);
+};
+
+ElementWrapper.prototype.findAllTruncatedTexts = function(selector) {
+  return this.findAllComponents(TruncatedTextWrapper, selector);
+};
 ElementWrapper.prototype.findTutorialPanel = function(selector) {
   let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
   if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){
@@ -4474,6 +4517,11 @@ ElementWrapper.prototype.findClosestTreeView = function() {
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findClosestComponent(TreeViewWrapper);
 };
+ElementWrapper.prototype.findClosestTruncatedText = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TruncatedTextWrapper);
+};
 ElementWrapper.prototype.findClosestTutorialPanel = function() {
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
@@ -4594,6 +4642,7 @@ import TokenGroupWrapper from './token-group';
 import TooltipWrapper from './tooltip';
 import TopNavigationWrapper from './top-navigation';
 import TreeViewWrapper from './tree-view';
+import TruncatedTextWrapper from './truncated-text';
 import TutorialPanelWrapper from './tutorial-panel';
 import WizardWrapper from './wizard';
 
@@ -4689,6 +4738,7 @@ export { TokenGroupWrapper };
 export { TooltipWrapper };
 export { TopNavigationWrapper };
 export { TreeViewWrapper };
+export { TruncatedTextWrapper };
 export { TutorialPanelWrapper };
 export { WizardWrapper };
 
@@ -6242,6 +6292,23 @@ findTreeView(selector?: string): TreeViewWrapper;
  * @returns {MultiElementWrapper<TreeViewWrapper>}
  */
 findAllTreeViews(selector?: string): MultiElementWrapper<TreeViewWrapper>;
+/**
+ * Returns a wrapper that matches the TruncatedTexts with the specified CSS selector.
+ * If no CSS selector is specified, returns a wrapper that matches TruncatedTexts.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TruncatedTextWrapper}
+ */
+findTruncatedText(selector?: string): TruncatedTextWrapper;
+
+/**
+ * Returns a multi-element wrapper that matches TruncatedTexts with the specified CSS selector.
+ * If no CSS selector is specified, returns a multi-element wrapper that matches TruncatedTexts.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MultiElementWrapper<TruncatedTextWrapper>}
+ */
+findAllTruncatedTexts(selector?: string): MultiElementWrapper<TruncatedTextWrapper>;
 /**
  * Returns a wrapper that matches the TutorialPanels with the specified CSS selector.
  * If no CSS selector is specified, returns a wrapper that matches TutorialPanels.
@@ -7463,6 +7530,19 @@ ElementWrapper.prototype.findTreeView = function(selector) {
 ElementWrapper.prototype.findAllTreeViews = function(selector) {
   return this.findAllComponents(TreeViewWrapper, selector);
 };
+ElementWrapper.prototype.findTruncatedText = function(selector) {
+  let rootSelector = \`.\${TruncatedTextWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TruncatedTextWrapper && TruncatedTextWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TruncatedTextWrapper.rootSelector}, .\${TruncatedTextWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TruncatedTextWrapper);
+};
+
+ElementWrapper.prototype.findAllTruncatedTexts = function(selector) {
+  return this.findAllComponents(TruncatedTextWrapper, selector);
+};
 ElementWrapper.prototype.findTutorialPanel = function(selector) {
   let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
   if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper, createWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+import TooltipWrapper from '../tooltip';
+
+import tooltipTestUtilsStyles from '../../../tooltip/test-classes/styles.selectors.js';
+import styles from '../../../truncated-text/test-classes/styles.selectors.js';
+
+export default class TruncatedTextWrapper extends ComponentWrapper<HTMLElement> {
+  static rootSelector: string = styles.root;
+
+  findTooltip(): TooltipWrapper | null {
+    const tooltipElement = createWrapper().findByClassName(tooltipTestUtilsStyles.root);
+    return tooltipElement && new TooltipWrapper(tooltipElement.getElement());
+  }
+}