diff --git a/src/components/HoverDropdownMenu/index.jsx b/src/components/HoverDropdownMenu/index.jsx
index 623c274d3..421692902 100644
--- a/src/components/HoverDropdownMenu/index.jsx
+++ b/src/components/HoverDropdownMenu/index.jsx
@@ -5,7 +5,7 @@ import Popover from '../Popover';
import PopoverLinkItem from './PopoverLinkItem';
import './styles.scss';
-const HoverDropdownMenu = ({ arrowPosition, headerText, hoverComponent, children }) => {
+const HoverDropdownMenu = ({ arrowPosition, headerText, popoverClassNames, hoverComponent, children }) => {
const [popperNode, setPopperNode] = React.useState(null);
const [isOpen, setIsOpen] = React.useState(false);
const [mouseInPopover, setMouseInPopover] = React.useState(false);
@@ -38,16 +38,32 @@ const HoverDropdownMenu = ({ arrowPosition, headerText, hoverComponent, children
);
+ let placement;
+ switch (arrowPosition) {
+ case 'left':
+ placement = 'bottom-start';
+ break;
+ case 'right':
+ placement = 'bottom-end';
+ break;
+ case 'none':
+ default:
+ placement = 'bottom';
+ break;
+ }
+
return (
- {children && children.length > 0 ? (
+ {children ? (
{children}}
popperRef={setPopperNode}
+ arrowStyles={arrowPosition === 'none' ? { display: 'none' } : null}
>
{element}
@@ -57,15 +73,19 @@ const HoverDropdownMenu = ({ arrowPosition, headerText, hoverComponent, children
};
HoverDropdownMenu.propTypes = {
+ /**
+ * allow more styling for popover
+ */
+ popoverClassNames: PropTypes.string,
/**
* Determine the placement of the popover
*/
- arrowPosition: PropTypes.oneOf(['left', 'right']),
+ arrowPosition: PropTypes.oneOf(['left', 'right', 'none']),
/**
* If set to empty string, header will not be rendered.
*/
headerText: PropTypes.string,
- hoverComponent: PropTypes.element.isRequired,
+ hoverComponent: PropTypes.node.isRequired,
children: PropTypes.node,
};
diff --git a/src/components/HoverDropdownMenu/index.spec.jsx b/src/components/HoverDropdownMenu/index.spec.jsx
index 04993b9da..d50793290 100644
--- a/src/components/HoverDropdownMenu/index.spec.jsx
+++ b/src/components/HoverDropdownMenu/index.spec.jsx
@@ -149,4 +149,24 @@ describe('
', () => {
const { queryAllByTestId } = render(
} />);
expect(queryAllByTestId('popover-wrapper')).toHaveLength(0);
});
+
+ it('should not render arrow if arrow position is none', () => {
+ const { getByTestId, queryAllByTestId } = render(
+
+ {_.map(links, (link, idx) => (
+
+ ))}
+
+ );
+
+ act(() => {
+ fireEvent.mouseEnter(getByTestId('hover-dropdown-element'));
+ jest.runAllTimers();
+ });
+ expect(
+ queryAllByTestId('popover-wrapper')[0]
+ .querySelector('.aui--popover-arrow')
+ .getAttribute('style')
+ ).toEqual('display: none;');
+ });
});
diff --git a/www/containers/props.json b/www/containers/props.json
index cce738328..59bac5b21 100644
--- a/www/containers/props.json
+++ b/www/containers/props.json
@@ -1873,6 +1873,10 @@
{
"value": "'right'",
"computed": false
+ },
+ {
+ "value": "'none'",
+ "computed": false
}
]
},
@@ -1896,7 +1900,7 @@
},
"hoverComponent": {
"type": {
- "name": "element"
+ "name": "node"
},
"required": true,
"description": ""
diff --git a/www/examples/HoverDropdownMenu.mdx b/www/examples/HoverDropdownMenu.mdx
index 2ea383f34..86b5e29eb 100644
--- a/www/examples/HoverDropdownMenu.mdx
+++ b/www/examples/HoverDropdownMenu.mdx
@@ -32,11 +32,19 @@ class Example extends React.PureComponent {
return (
<>
Hover the avatar below
-
- {_.map(links, link => (
-
- ))}
-
+
+
+ {_.map(links, link => (
+
+ ))}
+
+
+
+
+
+
+
+
>
);
}