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']); + } }