From 57eb703a4227e6496d021fdb17d6d4fd0e935eb9 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Wed, 24 Jan 2024 11:00:50 +0100
Subject: [PATCH] feat: add classname prop to hover-menu-dropdown

---
 .../Toolbar/HoverMenuBar/HoverMenuDropdown.js         | 11 +++++++++--
 .../HoverMenuBar/__tests__/HoverMenuDropdown.spec.js  | 11 +++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js b/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js
index 259131be2..fbcdf146c 100644
--- a/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js
+++ b/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js
@@ -6,7 +6,13 @@ import React, { useRef } from 'react'
 import menuButtonStyles from '../MenuButton.styles.js'
 import { useHoverMenubarContext } from './HoverMenuBar.js'
 
-export const HoverMenuDropdown = ({ children, label, dataTest, disabled }) => {
+export const HoverMenuDropdown = ({
+    children,
+    className,
+    label,
+    dataTest,
+    disabled,
+}) => {
     const buttonRef = useRef()
     const {
         onDropDownButtonClick,
@@ -18,7 +24,7 @@ export const HoverMenuDropdown = ({ children, label, dataTest, disabled }) => {
     return (
         <>
             <button
-                className={cx({ isOpen })}
+                className={cx(className, { isOpen })}
                 ref={buttonRef}
                 onClick={onDropDownButtonClick}
                 disabled={disabled}
@@ -46,6 +52,7 @@ HoverMenuDropdown.defaultProps = {
 HoverMenuDropdown.propTypes = {
     children: PropTypes.node.isRequired,
     label: PropTypes.node.isRequired,
+    className: PropTypes.string,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
 }
diff --git a/src/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js b/src/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js
index fa050d1f4..dd105642e 100644
--- a/src/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js
+++ b/src/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js
@@ -17,4 +17,15 @@ describe('<HoverMenuDropdown/>', () => {
 
         expect(wrapper.find('button').prop('data-test')).toBe(dataTest)
     })
+
+    it('accepts a `className` prop', () => {
+        const className = 'test'
+        const wrapper = shallow(
+            <HoverMenuDropdown label="test dropdown" className={className}>
+                children
+            </HoverMenuDropdown>
+        )
+
+        expect(wrapper.find('button')).toHaveClassName(className)
+    })
 })