diff --git a/pages/copy-to-clipboard/simple.page.tsx b/pages/copy-to-clipboard/simple.page.tsx
index 9c60a1efed..e5843edbfa 100644
--- a/pages/copy-to-clipboard/simple.page.tsx
+++ b/pages/copy-to-clipboard/simple.page.tsx
@@ -61,6 +61,16 @@ export default function DateInputScenario() {
copyErrorText="Lorem ipsum sentence failed to copy"
/>
+
+
{
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(
+
+ );
+ 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(
diff --git a/src/copy-to-clipboard/interfaces.ts b/src/copy-to-clipboard/interfaces.ts
index 1b301b72b0..57a8a16ad7 100644
--- a/src/copy-to-clipboard/interfaces.ts
+++ b/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.
*/
diff --git a/src/copy-to-clipboard/internal.tsx b/src/copy-to-clipboard/internal.tsx
index 2d169b47a0..b19407263e 100644
--- a/src/copy-to-clipboard/internal.tsx
+++ b/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 ? (
{trigger}
- {textToCopy}
+
+ {textToDisplay ?? textToCopy}
+
) : (
trigger
diff --git a/src/copy-to-clipboard/test-classes/styles.scss b/src/copy-to-clipboard/test-classes/styles.scss
index 885d7720ec..9d2f6cf1f4 100644
--- a/src/copy-to-clipboard/test-classes/styles.scss
+++ b/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 */
+}
diff --git a/src/test-utils/dom/copy-to-clipboard/index.ts b/src/test-utils/dom/copy-to-clipboard/index.ts
index 3d77bca94f..885b81449c 100644
--- a/src/test-utils/dom/copy-to-clipboard/index.ts
+++ b/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']);
+ }
}