feat: CopyToClipboard - Allow separate content from text to copy for inline variant

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

@@ -61,6 +61,16 @@ export default function DateInputScenario() {
             copyErrorText="Lorem ipsum sentence failed to copy"
           />
 
+          <CopyToClipboard
+            data-testid="copy-sentence"
+            variant="inline"
+            copyButtonAriaLabel="Copy lorem ipsum sentence"
+            textToCopy={sentence}
+            textToDisplay={'Custom text: copy the lorem ipsum sentence'}
+            copySuccessText="Lorem ipsum sentence copied"
+            copyErrorText="Lorem ipsum sentence failed to copy"
+          />
+
           <div style={{ width: '150px' }}>
             <div style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
               <CopyToClipboard

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

@@ -7176,11 +7176,17 @@ Enable this setting if you need the popover to ignore its parent stacking contex
       "type": "boolean",
     },
     {
-      "description": "The text content to be copied. It is displayed next to the copy button when \`variant="inline"\`, and is not shown otherwise.",
+      "description": "The text content to be copied. It is displayed next to the copy button when \`variant="inline"\` unless when \`content\` is specified, and is not shown otherwise.",
       "name": "textToCopy",
       "optional": false,
       "type": "string",
     },
+    {
+      "description": "The text content to display next to the copy button when \`variant="inline"\`. If not provided, \`textToCopy\` will be displayed instead.",
+      "name": "textToDisplay",
+      "optional": true,
+      "type": "string",
+    },
     {
       "defaultValue": "'button'",
       "description": "Determines the general styling of the copy button as follows:

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -202,6 +202,7 @@ exports[`test-utils selectors 1`] = `
   "copy-to-clipboard": [
     "awsui_root_ljpwc",
     "awsui_text-to-copy_ljpwc",
+    "awsui_text-to-display_ljpwc",
   ],
   "date-input": [
     "awsui_root_yodkx",

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

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 
 import CopyToClipboard from '../../../lib/components/copy-to-clipboard';
 import createWrapper from '../../../lib/components/test-utils/dom';
@@ -70,6 +70,29 @@ describe('CopyToClipboard', () => {
     expect(wrapper.findTextToCopy()!.getElement().textContent).toBe('Text to copy');
   });
 
+  test('renders an inline button with custom text to display and separate text to copy', () => {
+    const mockedWriteText = jest.fn().mockResolvedValue(act(() => new Promise(() => {}))); // The act here is just to prevent console warnings when tests run
+
+    Object.assign(global.navigator, {
+      clipboard: {
+        writeText: mockedWriteText,
+      },
+    });
+
+    const { container } = render(
+      <CopyToClipboard {...defaultProps} variant="inline" textToDisplay="Copy test content" />
+    );
+    const wrapper = createWrapper(container).findCopyToClipboard()!;
+
+    expect(wrapper.findCopyButton().getElement().textContent).toBe('');
+    expect(wrapper.findCopyButton().getElement()).toHaveAccessibleName('Copy');
+    expect(wrapper.findDisplayedText()!.getElement().textContent).toBe('Copy test content');
+
+    // Assert content written to the clipboard
+    wrapper.findCopyButton().click();
+    expect(mockedWriteText).toHaveBeenCalledWith('Text to copy');
+  });
+
   describe.each([false, true])('popoverRenderWithPortal set to %s', (popoverRenderWithPortal: boolean) => {
     test('copies to clipboard and shows success message', async () => {
       const { container } = render(

src/copy-to-clipboard/interfaces.ts

@@ -26,10 +26,15 @@ export interface CopyToClipboardProps extends BaseComponentProps {
   copyButtonAriaLabel?: string;
 
   /**
-   * The text content to be copied. It is displayed next to the copy button when `variant="inline"`, and is not shown otherwise.
+   * The text content to be copied. It is displayed next to the copy button when `variant="inline"` unless when `content` is specified, and is not shown otherwise.
    */
   textToCopy: string;
 
+  /**
+   * The text content to display next to the copy button when `variant="inline"`. If not provided, `textToCopy` will be displayed instead.
+   */
+  textToDisplay?: string;
+
   /**
    * The message shown when the text is copied successfully.
    */

src/copy-to-clipboard/internal.tsx

@@ -22,6 +22,7 @@ export default function InternalCopyToClipboard({
   copySuccessText,
   copyErrorText,
   textToCopy,
+  textToDisplay,
   popoverRenderWithPortal,
   __internalRootRef = null,
   ...restProps
@@ -89,7 +90,9 @@ export default function InternalCopyToClipboard({
       {isInline ? (
         <span className={styles['inline-container']}>
           <span className={styles['inline-container-trigger']}>{trigger}</span>
-          <span className={testStyles['text-to-copy']}>{textToCopy}</span>
+          <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'])}>
+            {textToDisplay ?? textToCopy}
+          </span>
         </span>
       ) : (
         trigger

src/copy-to-clipboard/test-classes/styles.scss

@@ -9,3 +9,6 @@
 .text-to-copy {
   /* used in test-utils */
 }
+.text-to-display {
+  /* used in test-utils */
+}

src/test-utils/dom/copy-to-clipboard/index.ts

@@ -20,7 +20,18 @@ export default class CopyToClipboardWrapper extends ComponentWrapper {
     });
   }
 
+  /**
+   * @deprecated Use `findDisplayedText` instead.
+   */
   findTextToCopy(): null | ElementWrapper {
     return this.findByClassName(testStyles['text-to-copy']);
   }
+
+  /**
+   * Used to get the text displayed next to the copy icon button when `variant='inline'`.
+   * Returns either the `textToCopy` value or the `textToDisplay` value if it has been set.
+   */
+  findDisplayedText(): null | ElementWrapper {
+    return this.findByClassName(testStyles['text-to-display']);
+  }
 }