feat(dropdown-menu): allow data attributes in dropdown component (#2855)

* feat(dropdown-menu): allow data attributes in dropdown component * chore(changeset): added a changeset file for allowing data attributes to be passed down the dropdown component * feat(dropdown-menu): allow data attributes to pass through DropdownListMenuItem * feat: updated changeset file, added a data attributes test in AccessibleButton and updated the data attributes test in DropdownMenu --------- Co-authored-by: Douglas Egiemeh <[email protected]>
commercetools · Jul 19, 2024 · 906f579 · 906f579
1 parent 2a18fe8
commit 906f579
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 1 deletion.
diff --git a/.changeset/calm-laws-kick.md b/.changeset/calm-laws-kick.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/accessible-button': minor
+'@commercetools-uikit/dropdown-menu': minor
+---
+
+Supports forwarding data-attributes to AccessibleButton and DropdownMenu components
diff --git a/packages/components/buttons/accessible-button/src/accessible-button.spec.js b/packages/components/buttons/accessible-button/src/accessible-button.spec.js
@@ -54,6 +54,10 @@ describe('rendering', () => {
       'true'
     );
   });
+  it('should pass data attributes', () => {
+    render(<AccessibleButton {...props} data-testid="accessible-button" />);
+    expect(screen.getByTestId('accessible-button')).toBeInTheDocument();
+  });
   describe('type variations', () => {
     it('should render a button of type "button"', () => {
       render(<AccessibleButton {...props} />);

diff --git a/packages/components/buttons/accessible-button/src/accessible-button.tsx b/packages/components/buttons/accessible-button/src/accessible-button.tsx
@@ -11,7 +11,11 @@ import {
 } from 'react';
 import { isValidElementType } from 'react-is';
 import omit from 'lodash/omit';
-import { filterAriaAttributes, warning } from '@commercetools-uikit/utils';
+import {
+  filterAriaAttributes,
+  filterDataAttributes,
+  warning,
+} from '@commercetools-uikit/utils';
 import { designTokens } from '@commercetools-uikit/design-system';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -177,6 +181,7 @@ const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
         {...omit(props.buttonAttributes, propsToOmit)}
         {...buttonProps}
         {...filterAriaAttributes(props)}
+        {...filterDataAttributes(props)}
       >
         {props.children}
       </Button>

diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx
@@ -74,4 +74,45 @@ describe('DropdownMenu', () => {
     });
     expect(await screen.findByText('Content')).not.toBeVisible();
   });
+
+  it('should pass data attributes without menuType', async () => {
+    await render(
+      <DropdownMenu
+        data-testid="dropdown-container"
+        triggerElement={
+          <SecondaryButton label="Trigger" data-testid="trigger-element" />
+        }
+      >
+        <DropdownMenu.ListMenuItem data-testid="list-item">
+          Option 1
+        </DropdownMenu.ListMenuItem>
+      </DropdownMenu>
+    );
+
+    // Check that the data-testid attributes are passed down
+    expect(screen.getByTestId('trigger-element')).toBeInTheDocument();
+    expect(screen.getByTestId('dropdown-container')).toBeInTheDocument();
+    expect(screen.getByTestId('list-item')).toBeInTheDocument();
+  });
+
+  it('should pass data attributes with menuType="list"', async () => {
+    await render(
+      <DropdownMenu
+        menuType="list"
+        data-testid="dropdown-container"
+        triggerElement={
+          <SecondaryButton label="Trigger" data-testid="trigger-element" />
+        }
+      >
+        <DropdownMenu.ListMenuItem data-testid="list-item">
+          Option 1
+        </DropdownMenu.ListMenuItem>
+      </DropdownMenu>
+    );
+
+    // Check that the data-testid attributes are passed down
+    expect(screen.getByTestId('trigger-element')).toBeInTheDocument();
+    expect(screen.getByTestId('dropdown-container')).toBeInTheDocument();
+    expect(screen.getByTestId('list-item')).toBeInTheDocument();
+  });
 });
diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx
@@ -7,6 +7,7 @@ import {
   type ReactNode,
   type RefObject,
 } from 'react';
+import { filterDataAttributes } from '@commercetools-uikit/utils';
 import { useToggleState } from '@commercetools-uikit/hooks';
 import { type TMaxProp } from '@commercetools-uikit/constraints';
 import styled from '@emotion/styled';
@@ -158,6 +159,7 @@ function DropdownMenu(props: TDropdownMenuProps) {
           menuPosition={props.menuPosition!}
           menuMaxHeight={props.menuMaxHeight}
           triggerElementRef={triggerRef}
+          {...filterDataAttributes(props)}
         >
           {props.children}
         </Menu>

diff --git a/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-list-item.tsx b/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-list-item.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import { designTokens } from '@commercetools-uikit/design-system';
 import { useDropdownMenuContext } from '../context/dropdown-menu-context';
+import { filterDataAttributes } from '@commercetools-uikit/utils';
 
 function getDropdownListMenuItemStyles(props: TDropdownListMenuItemProps) {
   return [
@@ -48,6 +49,7 @@ function DropdownListMenuItem(props: TDropdownListMenuItemProps) {
       }}
       isDisabled={props.isDisabled}
       css={getDropdownListMenuItemStyles(props)}
+      {...filterDataAttributes(props)}
     >
       {props.children}
     </AccessibleButton>

diff --git a/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx b/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx
@@ -9,6 +9,7 @@ import { css } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
 import Constraints, { type TMaxProp } from '@commercetools-uikit/constraints';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
+import { filterDataAttributes } from '@commercetools-uikit/utils';
 
 // We declare this style properties here because we need them both for initial component styling
 // but also for calculating the default max height of the dropdown menu so we make sure it fits
@@ -184,6 +185,7 @@ function DropdownBaseMenu(props: TDropdownBaseMenuProps) {
       css={getDropdownMenuBaseStyles(props)}
       style={props.customStyles}
       ref={menuRef}
+      {...filterDataAttributes(props)}
     >
       {props.children}
     </div>
@@ -209,6 +211,7 @@ export const DropdownContentMenu = (props: TDropdownContentMenuProps) => {
       menuPosition={props.menuPosition}
       menuMaxHeight={props.menuMaxHeight}
       triggerElementRef={props.triggerElementRef}
+      {...filterDataAttributes(props)}
     >
       {props.children}
     </DropdownBaseMenu>
@@ -231,6 +234,7 @@ export const DropdownListMenu = (props: TDropdownListMenuProps) => {
       menuPosition={props.menuPosition}
       menuMaxHeight={props.menuMaxHeight}
       triggerElementRef={props.triggerElementRef}
+      {...filterDataAttributes(props)}
     >
       <SpacingsStack scale="xs">{props.children}</SpacingsStack>
     </DropdownBaseMenu>