fix: Dropdown link item to accept "as" property using RouterLink (#5277)

Co-authored-by: Geoffroy Baccarini <[email protected]>
Talend · Apr 22, 2024 · d25ebf0 · d25ebf0
1 parent abfd72c
commit d25ebf0
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 42 deletions.
diff --git a/.changeset/thin-apes-tie.md b/.changeset/thin-apes-tie.md
@@ -0,0 +1,5 @@
+---
+"@talend/design-system": patch
+---
+
+Fix Design System dropdown items when using "as" property for links
diff --git a/packages/design-system/src/components/Dropdown/Dropdown.test.tsx b/packages/design-system/src/components/Dropdown/Dropdown.test.tsx
@@ -1,8 +1,11 @@
-import { describe, it, expect } from '@jest/globals';
-import { axe } from 'jest-axe';
+import { BrowserRouter, Link as RouterLink } from 'react-router-dom';
+
+import { describe, expect, it } from '@jest/globals';
 import { render } from '@testing-library/react';
-import { Dropdown } from './';
+import { axe } from 'jest-axe';
+
 import { ButtonTertiary } from '../Button';
+import { Dropdown } from './';
 
 jest.mock('@talend/utils', () => {
 	let i = 0;
@@ -15,39 +18,46 @@ jest.mock('@talend/utils', () => {
 describe('Dropdown', () => {
 	it('should render a11y html', async () => {
 		const { container } = render(
-			<main>
-				<Dropdown
-					aria-label="Custom menu"
-					items={[
-						{
-							label: 'External link',
-							href: 'https://community.talend.com/s/?language=en_US',
-							target: '_blank',
-							type: 'link',
-						},
-						{
-							type: 'divider',
-						},
-						{
-							label: 'Link',
-							href: '/download',
-							type: 'link',
-						},
-						{
-							type: 'divider',
-						},
-						{
-							label: 'Button',
-							onClick: jest.fn(),
-							type: 'button',
-						},
-					]}
-				>
-					<ButtonTertiary isDropdown onClick={() => {}}>
-						Dropdown
-					</ButtonTertiary>
-				</Dropdown>
-			</main>,
+			<BrowserRouter>
+				<main>
+					<Dropdown
+						aria-label="Custom menu"
+						items={[
+							{
+								label: 'External link',
+								href: 'https://community.talend.com/s/?language=en_US',
+								target: '_blank',
+								type: 'link',
+							},
+							{
+								type: 'divider',
+							},
+							{
+								label: 'Link',
+								href: '/download',
+								type: 'link',
+							},
+							{
+								type: 'divider',
+							},
+							{
+								label: 'Button',
+								onClick: jest.fn(),
+								type: 'button',
+							},
+							{
+								label: 'Link as',
+								type: 'link',
+								as: <RouterLink to="/route" />,
+							},
+						]}
+					>
+						<ButtonTertiary isDropdown onClick={() => {}}>
+							Dropdown
+						</ButtonTertiary>
+					</Dropdown>
+				</main>
+			</BrowserRouter>,
 		);
 		expect(container.firstChild).toMatchSnapshot();
 		const results = await axe(document.body);

diff --git a/packages/design-system/src/components/Dropdown/Dropdown.tsx b/packages/design-system/src/components/Dropdown/Dropdown.tsx
@@ -31,7 +31,6 @@ type DropdownButtonType = Omit<ClickableProps, 'children'> & {
 type DropdownLinkType = Omit<LinkableType, 'children'> & {
 	label: string;
 	type: 'link';
-	as: ReactElement;
 } & DataAttributes;
 
 type DropdownLabelType = {

diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx
@@ -1,4 +1,5 @@
 import { forwardRef, ReactElement, Ref } from 'react';
+
 import { Linkable, LinkableType } from '../../Linkable';
 
 import styles from './DropdownEntry.module.scss';
@@ -9,7 +10,7 @@ export type DropdownLinkType = LinkableType;
 // Since MenuItem and Linkable both have an `as` prop, this enables passing `as` to Linkable.
 const LocalLink = forwardRef(
 	(
-		localProps: DropdownLinkType & { asPassThrough?: ReactElement },
+		localProps: DropdownLinkType & { asPassThrough?: 'a' | ReactElement },
 		ref: Ref<HTMLAnchorElement>,
 	) => {
 		const { asPassThrough, ...rest } = localProps;
@@ -21,7 +22,7 @@ LocalLink.displayName = 'LocalLink';
 const DropdownLink = forwardRef(
 	({ children, as, ...props }: DropdownLinkType, ref: Ref<HTMLAnchorElement>) => {
 		return (
-			<LocalLink {...props} ref={ref}>
+			<LocalLink {...props} asPassThrough={as} ref={ref}>
 				{children}
 			</LocalLink>
 		);

diff --git a/packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`Dropdown should render a11y html 1`] = `
           data-test="dropdown.menuitem.External link-0"
           data-testid="dropdown.menuitem.External link-0"
           href="https://community.talend.com/s/?language=en_US"
-          id="mocked-uuid-5"
+          id="mocked-uuid-6"
           rel="noreferrer noopener"
           target="_blank"
         >
@@ -85,7 +85,7 @@ exports[`Dropdown should render a11y html 1`] = `
           data-test="dropdown.menuitem.Link-2"
           data-testid="dropdown.menuitem.Link-2"
           href="/download"
-          id="mocked-uuid-7"
+          id="mocked-uuid-8"
         >
           Link
         </a>
@@ -99,7 +99,7 @@ exports[`Dropdown should render a11y html 1`] = `
           class="theme-clickable"
           data-test="dropdown.menuitem.Button-4"
           data-testid="dropdown.menuitem.Button-4"
-          id="mocked-uuid-9"
+          id="mocked-uuid-10"
           role="menuitem"
           tabindex="0"
           type="button"
@@ -114,6 +114,15 @@ exports[`Dropdown should render a11y html 1`] = `
             </span>
           </div>
         </button>
+        <a
+          class="theme-linkable theme-dropdownEntry"
+          data-test="dropdown.menuitem.Link as-5"
+          data-testid="dropdown.menuitem.Link as-5"
+          href="/route"
+          id="mocked-uuid-11"
+        >
+          Link as
+        </a>
       </div>
     </div>
   </div>