diff --git a/packages/components/src/DownloadButton/DownloadButton.test.js b/packages/components/src/DownloadButton/DownloadButton.test.js index 3fc4beaf8..c7d7cd4da 100644 --- a/packages/components/src/DownloadButton/DownloadButton.test.js +++ b/packages/components/src/DownloadButton/DownloadButton.test.js @@ -74,5 +74,15 @@ describe('DownloadButton component', () => { }); expect(onSelect.mock.calls.length).toBe(0); }); + + it('should allow customising the dropdown text', async () => { + const itemText = 'Export all items to CSV'; + render(); + await act(async () => { + userEvent.click(screen.getByRole('button', { name: 'Export' })); + }); + + expect(await screen.findByText(itemText)).toBeInTheDocument(); + }); }); }); diff --git a/packages/components/src/DownloadButton/DownloadButton.tsx b/packages/components/src/DownloadButton/DownloadButton.tsx index 40e66abc8..c59b04f2a 100644 --- a/packages/components/src/DownloadButton/DownloadButton.tsx +++ b/packages/components/src/DownloadButton/DownloadButton.tsx @@ -26,6 +26,10 @@ export interface DownloadButtonProps extends Omit = ({ onSelect = () => undefined, isDisabled, tooltipText = 'Export data', + itemTexts = { + csv: undefined, + json: undefined, + }, ...props }) => { const [isOpen, setIsOpen] = useState(false); @@ -69,19 +77,19 @@ const DownloadButton: React.FunctionComponent = ({ component="button" onClick={(event) => onSelect(event, 'csv')} isDisabled={isDisabled} - aria-label="Export to CSV" + aria-label={itemTexts.csv || 'Export to CSV'} > - Export to CSV + {itemTexts.csv || 'Export to CSV'} onSelect(event, 'json')} isDisabled={isDisabled} > - Export to JSON + {itemTexts.json || 'Export to JSON'} {extraItems}