feat: Add wrapText property to copy to clipboard

pages/copy-to-clipboard/permutations.page.tsx

@@ -37,13 +37,36 @@ const permutations = createPermutations<CopyToClipboardProps>([
     copySuccessText: ['Text copied successfully'],
     copyErrorText: ['Copy failed.'],
   },
+  {
+    wrapText: [true, false],
+    variant: ['inline'],
+    textToCopy: [
+      'Lorem ipsum dolor sit amet consectetur adipiscing elit cursus ut pharetra semper litora lobortis sed lacinia.',
+    ],
+    copyButtonText: ['Copy to clipboard'],
+    copySuccessText: ['Text copied successfully'],
+    copyErrorText: ['Copy failed.'],
+  },
+  {
+    wrapText: [true, false],
+    variant: ['inline'],
+    textToDisplay: [
+      <Popover key={1} content="Popover" wrapTriggerText={false}>
+        Inline block popover with relatively long content that should truncate when wrapText is false
+      </Popover>,
+    ],
+    textToCopy: ['Lorem ipsum dolor sit amet.'],
+    copyButtonText: ['Copy to clipboard'],
+    copySuccessText: ['Text copied successfully'],
+    copyErrorText: ['Copy failed.'],
+  },
 ]);
 
 export default function ButtonPermutations() {
   return (
     <>
       <h1>Button permutations</h1>
-      <ScreenshotArea disableAnimations={true}>
+      <ScreenshotArea disableAnimations={true} style={{ maxWidth: 400 }}>
         <PermutationsView permutations={permutations} render={permutation => <CopyToClipboard {...permutation} />} />
       </ScreenshotArea>
     </>

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -10206,6 +10206,14 @@ Defaults to \`button\`.",
       "optional": true,
       "type": "string",
     },
+    {
+      "defaultValue": "true",
+      "description": "Specifies if the \`textToDisplay\` content should wrap. If you set it to false, it prevents the text
+from wrapping and truncates it with an ellipsis. Only applies to \`variant="inline"\`.",
+      "name": "wrapText",
+      "optional": true,
+      "type": "boolean",
+    },
   ],
   "regions": [
     {

src/copy-to-clipboard/__tests__/copy-to-clipboard.test.tsx

@@ -4,8 +4,11 @@ import React from 'react';
 import { act, render, waitFor } from '@testing-library/react';
 
 import CopyToClipboard from '../../../lib/components/copy-to-clipboard';
+import InternalCopyToClipboard from '../../../lib/components/copy-to-clipboard/internal';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
+import styles from '../../../lib/components/copy-to-clipboard/styles.css.js';
+
 const defaultProps = {
   copyTarget: 'Test content',
   textToCopy: 'Text to copy',
@@ -500,4 +503,24 @@ describe('CopyToClipboard', () => {
       expect(onCopyFailure).not.toHaveBeenCalled();
     });
   });
+
+  test('wraps text by default for variant="inline"', () => {
+    const { container } = render(<CopyToClipboard {...defaultProps} variant="inline" />);
+    expect(container.querySelector(`.${styles['inline-container-no-wrap']}`)).toBeNull();
+  });
+
+  test('InternalCopyToClipboard wraps text by default for variant="inline"', () => {
+    const { container } = render(<InternalCopyToClipboard {...defaultProps} variant="inline" />);
+    expect(container.querySelector(`.${styles['inline-container-no-wrap']}`)).toBeNull();
+  });
+
+  test('does not wrap text when wrapText=false', () => {
+    const { container } = render(<CopyToClipboard {...defaultProps} variant="inline" wrapText={false} />);
+    expect(container.querySelector(`.${styles['inline-container-no-wrap']}`)).not.toBeNull();
+  });
+
+  test('InternalCopyToClipboard does not wrap text when wrapText=false', () => {
+    const { container } = render(<InternalCopyToClipboard {...defaultProps} variant="inline" wrapText={false} />);
+    expect(container.querySelector(`.${styles['inline-container-no-wrap']}`)).not.toBeNull();
+  });
 });

src/copy-to-clipboard/index.tsx

@@ -14,6 +14,7 @@ export { CopyToClipboardProps };
 export default function CopyToClipboard({
   variant = 'button',
   popoverRenderWithPortal = false,
+  wrapText = true,
   ...restProps
 }: CopyToClipboardProps) {
   const baseProps = useBaseComponent('CopyToClipboard', {
@@ -25,6 +26,7 @@ export default function CopyToClipboard({
     <InternalCopyToClipboard
       variant={variant}
       popoverRenderWithPortal={popoverRenderWithPortal}
+      wrapText={wrapText}
       {...baseProps}
       {...filteredProps}
     />

src/copy-to-clipboard/interfaces.ts

@@ -36,6 +36,12 @@ export interface CopyToClipboardProps extends BaseComponentProps {
    */
   textToDisplay?: React.ReactNode;
 
+  /**
+   * Specifies if the `textToDisplay` content should wrap. If you set it to false, it prevents the text
+   * from wrapping and truncates it with an ellipsis. Only applies to `variant="inline"`.
+   */
+  wrapText?: boolean;
+
   /**
    * The message shown when the text is copied successfully.
    */

src/copy-to-clipboard/internal.tsx

@@ -24,6 +24,7 @@ export default function InternalCopyToClipboard({
   copyErrorText,
   textToCopy,
   textToDisplay,
+  wrapText = true,
   popoverRenderWithPortal,
   disabled,
   disabledReason,
@@ -119,9 +120,9 @@ export default function InternalCopyToClipboard({
   return (
     <span {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testStyles.root)}>
       {isInline ? (
-        <span className={styles['inline-container']}>
+        <span className={clsx(styles['inline-container'], !wrapText && styles['inline-container-no-wrap'])}>
           <span className={styles['inline-container-trigger']}>{trigger}</span>
-          <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'])}>
+          <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'], styles['text-to-display'])}>
             {textToDisplay !== undefined ? textToDisplay : textToCopy}
           </span>
         </span>

src/copy-to-clipboard/styles.scss

@@ -15,4 +15,22 @@
   &-trigger {
     margin-inline-end: awsui.$space-scaled-xxs;
   }
+
+  &-no-wrap {
+    display: inline-flex;
+    align-items: start;
+    max-inline-size: 100%;
+    word-break: normal;
+
+    > .inline-container-trigger {
+      flex-shrink: 0;
+    }
+
+    > .text-to-display {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-inline-size: 0;
+    }
+  }
 }