feat(Popover) add option to trigger popover on hover

Author: dominik-petrik

packages/react-core/src/components/Popover/Popover.tsx

@@ -203,6 +203,8 @@ export interface PopoverProps {
   shouldOpen?: (event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void;
   /** Flag indicating whether the close button should be shown. */
   showClose?: boolean;
+  /** Sets an interaction to open popover, defaults to "click" */
+  variant?: 'click' | 'hover';
   /** Whether to trap focus in the popover. */
   withFocusTrap?: boolean;
   /** The z-index of the popover. */
@@ -241,6 +243,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   onShown = (): void => null,
   onMount = (): void => null,
   zIndex = 9999,
+  variant = 'click',
   minWidth = popoverMinWidth && popoverMinWidth.value,
   maxWidth = popoverMaxWidth && popoverMaxWidth.value,
   closeBtnAriaLabel = 'Close',
@@ -279,6 +282,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
   const popoverRef = React.useRef(null);
+  const hideShowTime = variant === 'hover' ? animationDuration : 0;
 
   React.useEffect(() => {
     onMount();
@@ -306,7 +310,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       setOpacity(1);
       propWithFocusTrap !== false && withFocusTrap && setFocusTrapActive(true);
       onShown();
-    }, 0);
+    }, hideShowTime);
   };
   const hide = (event?: MouseEvent | KeyboardEvent) => {
     event && onHide(event);
@@ -320,7 +324,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       transitionTimerRef.current = setTimeout(() => {
         onHidden();
       }, animationDuration);
-    }, 0);
+    }, hideShowTime);
   };
   const positionModifiers = {
     top: styles.modifiers.top,
@@ -363,25 +367,49 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
     }
   };
   const onTriggerClick = (event: MouseEvent) => {
-    if (triggerManually) {
-      if (visible) {
-        shouldClose(event, hide);
-      } else {
-        shouldOpen(event, show);
-      }
-    } else {
-      if (visible) {
-        hide(event);
+    if (variant === 'click') {
+      if (triggerManually) {
+        if (visible) {
+          shouldClose(event, hide);
+        } else {
+          shouldOpen(event, show);
+        }
       } else {
-        show(event, true);
+        if (visible) {
+          hide(event);
+        } else {
+          show(event, true);
+        }
       }
     }
   };
+
   const onContentMouseDown = () => {
     if (focusTrapActive) {
       setFocusTrapActive(false);
     }
   };
+
+  const onMouseEnter = (event: any) => {
+    if (variant === 'hover') {
+      if (triggerManually) {
+        shouldOpen(event as MouseEvent, show);
+      } else {
+        show(event as MouseEvent, false);
+      }
+    }
+  };
+
+  const onMouseLeave = (event: any) => {
+    if (variant === 'hover') {
+      if (triggerManually) {
+        shouldClose(event as MouseEvent, hide);
+      } else {
+        hide(event);
+      }
+    }
+  };
+
   const closePopover = (event: MouseEvent) => {
     event.stopPropagation();
     if (triggerManually) {
@@ -424,6 +452,8 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       aria-labelledby={headerContent ? `popover-${uniqueId}-header` : undefined}
       aria-describedby={`popover-${uniqueId}-body`}
       onMouseDown={onContentMouseDown}
+      onMouseLeave={onMouseLeave}
+      onMouseEnter={onMouseEnter}
       style={{
         minWidth: hasCustomMinWidth ? minWidth : null,
         maxWidth: hasCustomMaxWidth ? maxWidth : null,
@@ -434,7 +464,9 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
     >
       <PopoverArrow />
       <PopoverContent>
-        {showClose && <PopoverCloseButton onClose={closePopover} aria-label={closeBtnAriaLabel} />}
+        {showClose && variant === 'click' && (
+          <PopoverCloseButton onClose={closePopover} aria-label={closeBtnAriaLabel} />
+        )}
         {headerContent && (
           <PopoverHeader
             id={`popover-${uniqueId}-header`}
@@ -468,6 +500,8 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         minWidth="revert"
         appendTo={appendTo}
         isVisible={visible}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         positionModifiers={positionModifiers}
         distance={distance}
         placement={position}

packages/react-core/src/components/Popover/examples/Popover.md

@@ -19,57 +19,73 @@ By default, the `appendTo` prop of the popover will append to the document body
 ### Basic
 
 ```ts file="./PopoverBasic.tsx"
+
+```
+
+### Hoverable
+
+```ts file="./PopoverHover.tsx"
+
 ```
 
 ### Close popover from content (controlled)
 
 ```ts file="./PopoverCloseControlled.tsx"
+
 ```
 
 ### Close popover from content (uncontrolled)
 
 Note: If you use the isVisible prop, either refer to the example above or if you want to use the hide callback from the content then be sure to keep isVisible in-sync.
 
 ```ts file="./PopoverCloseUncontrolled.tsx"
+
 ```
 
 ### Without header/footer/close and no padding
 
 ```ts file="./PopoverWithoutHeaderFooterCloseNoPadding.tsx"
+
 ```
 
 ### Width auto
 
 Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
 
 ```ts file="./PopoverWidthAuto.tsx"
+
 ```
 
 ### Popover react ref
 
 ```ts file="./PopoverReactRef.tsx"
+
 ```
 
 ### Popover selector ref
 
 ```ts file="./PopoverSelectorRef.tsx"
+
 ```
 
 ### Advanced
 
 ```ts file="./PopoverAdvanced.tsx"
+
 ```
 
 ### Popover with icon in the title
 
 Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
 
-```ts file="./PopoverWithIconInTheTitle.tsx" 
+```ts file="./PopoverWithIconInTheTitle.tsx"
+
 ```
 
 ### Alert popover
 
 Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
 
-```ts file="./PopoverAlert.tsx" 
+```ts file="./PopoverAlert.tsx"
+
 ```

packages/react-core/src/components/Popover/examples/PopoverHover.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Popover, Button } from '@patternfly/react-core';
+
+export const PopoverHover: React.FunctionComponent = () => (
+  <div style={{ margin: '50px' }}>
+    <Popover
+      variant="hover"
+      aria-label="Hoverable popover"
+      headerContent={<div>Popover header</div>}
+      bodyContent={<div>This popover opens on hover.</div>}
+      footerContent="Popover footer"
+    >
+      <Button disabled>Hover to trigger popover</Button>
+    </Popover>
+  </div>
+);