feat(compoments): allow custom item texts for DownloadButton (#2140)

RedHatInsights · Jan 14, 2025 · 318e044 · 318e044
1 parent 1d526e9
commit 318e044
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git 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(<DownloadButton itemTexts={{ csv: itemText }} />);
+      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
@@ -26,6 +26,10 @@ export interface DownloadButtonProps extends Omit<DropdownProps, 'onSelect' | 't
    * Determines if the button is disabled or not
    */
   isDisabled?: boolean;
+  itemTexts?: {
+    csv?: string;
+    json?: string;
+  };
 }
 
 /**
@@ -37,6 +41,10 @@ const DownloadButton: React.FunctionComponent<DownloadButtonProps> = ({
   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<DownloadButtonProps> = ({
               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'}
             </DropdownItem>
             <DropdownItem
-              aria-label="Export to JSON"
+              aria-label={itemTexts.json || 'Export to JSON'}
               key="download-json"
               ouiaId="DownloadJSON"
               component="button"
               onClick={(event) => onSelect(event, 'json')}
               isDisabled={isDisabled}
             >
-              Export to JSON
+              {itemTexts.json || 'Export to JSON'}
             </DropdownItem>
             {extraItems}
           </DropdownList>