fix: fix hover dropdown menu does not display single menu item

Adslot · May 6, 2021 · ccb806f · ccb806f
1 parent 2e10850
commit ccb806f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 11 deletions.
diff --git 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
     </div>
   );
 
+  let placement;
+  switch (arrowPosition) {
+    case 'left':
+      placement = 'bottom-start';
+      break;
+    case 'right':
+      placement = 'bottom-end';
+      break;
+    case 'none':
+    default:
+      placement = 'bottom';
+      break;
+  }
+
   return (
     <div data-testid="hover-dropdown-wrapper" className="hover-dropdown">
-      {children && children.length > 0 ? (
+      {children ? (
         <Popover
-          placement={`bottom-${arrowPosition === 'left' ? 'start' : 'end'}`}
+          popoverClassNames={popoverClassNames}
+          placement={placement}
           triggers={['disabled']}
           isOpen={isOpen || mouseInPopover}
           title={headerText}
           popoverContent={<ul className="list-unstyled">{children}</ul>}
           popperRef={setPopperNode}
+          arrowStyles={arrowPosition === 'none' ? { display: 'none' } : null}
         >
           {element}
         </Popover>
@@ -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
@@ -149,4 +149,24 @@ describe('<HoverDropdownMenu />', () => {
     const { queryAllByTestId } = render(<HoverDropdownMenu hoverComponent={<div />} />);
     expect(queryAllByTestId('popover-wrapper')).toHaveLength(0);
   });
+
+  it('should not render arrow if arrow position is none', () => {
+    const { getByTestId, queryAllByTestId } = render(
+      <HoverDropdownMenu {...props} arrowPosition="none">
+        {_.map(links, (link, idx) => (
+          <HoverDropdownMenu.Item key={idx} {...link} />
+        ))}
+      </HoverDropdownMenu>
+    );
+
+    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
@@ -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
@@ -32,11 +32,19 @@ class Example extends React.PureComponent {
     return (
       <>
         <h5>Hover the avatar below</h5>
-        <HoverDropdownMenu {...props}>
-          {_.map(links, link => (
-            <HoverDropdownMenu.Item key={link.title} {...link} />
-          ))}
-        </HoverDropdownMenu>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <HoverDropdownMenu {...props}>
+            {_.map(links, link => (
+              <HoverDropdownMenu.Item key={link.title} {...link} />
+            ))}
+          </HoverDropdownMenu>
+
+          <div style={{ width: '12px' }} />
+
+          <HoverDropdownMenu hoverComponent="Single menu item" arrowPosition="none">
+            <HoverDropdownMenu.Item {...links[0]} />
+          </HoverDropdownMenu>
+        </div>
       </>
     );
   }