fix(PF4): tooltip/popover - include tippy css

package.json

@@ -133,7 +133,7 @@
       "<rootDir>/packages/patternfly-4/react-integration/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!@patternfly|@novnc)"
+      "node_modules/(?!@patternfly|@novnc|tippy.js)"
     ],
     "roots": [
       "<rootDir>/packages",

packages/patternfly-4/react-core/package.json

@@ -31,8 +31,10 @@
     "@patternfly/react-styles": "^2.3.0",
     "@patternfly/react-tokens": "^1.10.2",
     "@tippy.js/react": "^1.1.1",
+    "emotion": "^10.0.6",
     "exenv": "^1.2.2",
-    "focus-trap-react": "^4.0.1"
+    "focus-trap-react": "^4.0.1",
+    "tippy.js": "^3.4.1"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/patternfly-4/react-core/src/components/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent, HTMLProps, ReactNode, ReactElement } from 'react';
+import { FunctionComponent, Element, ReactElement } from 'react';
 import { Omit } from '../../typeUtils';
-import { Instance, BasicPlacement } from 'tippy.js';
+import { Instance, BasicPlacement, Props } from 'tippy.js';
 
 export const PopoverPosition: {
   top: 'top';
@@ -9,7 +9,7 @@ export const PopoverPosition: {
   right: 'right';
 };
 
-export interface PopoverProps extends Omit<HTMLProps<HTMLDivElement>, 'children' | 'size'> {
+export interface PopoverProps extends Omit<Props, 'children'> {
   /** Popover position */
   position?: BasicPlacement;
   /** If true, tries to keep the popover in view by flipping it if necessary */
@@ -21,9 +21,9 @@ export interface PopoverProps extends Omit<HTMLProps<HTMLDivElement>, 'children'
   /** Accessible label, required when header is not present */
   'aria-label'?: string;
   /** Header content, leave empty for no header */
-  headerContent?: ReactNode;
+  headerContent?: Element;
   /** Body content */
-  bodyContent: ReactNode;
+  bodyContent: Element;
   /** 
    * True to show the popover programmatically. Used in conjunction with the shouldClose prop.
    * By default, the popover child element handles click events automatically. If you want to control this programmatically,
@@ -52,8 +52,8 @@ export interface PopoverProps extends Omit<HTMLProps<HTMLDivElement>, 'children'
   onMount?(instance: Instance): void;
   /** z-index of the popover */
   zIndex?: number;
-  /** Size of the popover */
-  size: 'small' | 'regular' | 'large';
+  /** Maximum width of the popover */
+  maxWidth?: '18.75rem';
 }
 
 declare const Popover: FunctionComponent<PopoverProps>;

packages/patternfly-4/react-core/src/components/Popover/Popover.js

@@ -4,50 +4,18 @@ import Tippy from '@tippy.js/react';
 import FocusTrap from 'focus-trap-react';
 import { KEY_CODES } from '../../internal/constants';
 import styles from '@patternfly/patternfly-next/components/Popover/popover.css';
-import { StyleSheet, css, getModifier } from '@patternfly/react-styles';
+import { css, getModifier } from '@patternfly/react-styles';
 import PopoverArrow from './PopoverArrow';
 import PopoverContent from './PopoverContent';
 import PopoverBody from './PopoverBody';
 import PopoverHeader from './PopoverHeader';
 import PopoverFooter from './PopoverFooter';
 import PopoverCloseButton from './PopoverCloseButton';
 import GenerateId from '../../internal/GenerateId/GenerateId';
+import { c_popover_MaxWidth as popoverMaxWidth } from '@patternfly/react-tokens';
+import { tippyStyles } from '../Tooltip/styles';
 
-// Need to unset tippy default styles
-// Also for enableFlip, need to make arrow aware of parent x-placement attribute in order to work
-const overrides = StyleSheet.parse(`
-  .pf-tippy-theme {
-    &.tippy-tooltip { 
-      background-color: unset;
-      font-size: unset;
-      color: unset;
-      border-radius: unset;
-      max-width: unset;
-      text-align: unset;
-    }
-  }
-  .tippy-popper[x-placement^=top] .pf-c-popover__arrow {
-    bottom: 0;
-    left: 50%;
-    transform: var(--pf-c-popover__arrow--m-top--Transform); 
-  }
-  .tippy-popper[x-placement^=bottom] .pf-c-popover__arrow {
-    top: 0;
-    left: 50%;
-    transform: var(--pf-c-popover__arrow--m-bottom--Transform); 
-  }
-  .tippy-popper[x-placement^=left] .pf-c-popover__arrow {
-    top: 50%;
-    right: 0;
-    transform: var(--pf-c-popover__arrow--m-left--Transform); 
-  }
-  .tippy-popper[x-placement^=right] .pf-c-popover__arrow {
-    top: 50%;
-    left: 0;
-    transform: var(--pf-c-popover__arrow--m-right--Transform); 
-  }  
-`);
-overrides.inject();
+tippyStyles();
 
 export const PopoverPosition = {
   top: 'top',
@@ -105,8 +73,8 @@ const propTypes = {
   onMount: PropTypes.func,
   /** z-index of the popover */
   zIndex: PropTypes.number,
-  /** Size of the popover */
-  size: PropTypes.oneOf(['small', 'regular', 'large']),
+  /** Maximum width of the tooltip (default 18.75rem) */
+  maxWidth: PropTypes.string,
   /** Aria label for the Close button */
   closeBtnAriaLabel: PropTypes.string
 };
@@ -128,7 +96,7 @@ const defaultProps = {
   onShown: () => undefined,
   onMount: () => undefined,
   zIndex: 9999,
-  size: 'regular',
+  maxWidth: popoverMaxWidth && popoverMaxWidth.value,
   closeBtnAriaLabel: 'Close'
 };
 
@@ -217,7 +185,7 @@ class Popover extends React.Component {
       onShown,
       onMount,
       zIndex,
-      size,
+      maxWidth,
       closeBtnAriaLabel,
       ...rest
     } = this.props;
@@ -265,7 +233,7 @@ class Popover extends React.Component {
     return (
       <Tippy
         onCreate={this.storeTippyInstance}
-        size={size}
+        maxWidth={maxWidth}
         zIndex={zIndex}
         appendTo={appendTo}
         content={content}
@@ -279,7 +247,7 @@ class Popover extends React.Component {
         interactive
         interactiveBorder={0}
         placement={position}
-        distance={15}
+        distance={25}
         flip={enableFlip}
         popperOptions={{
           modifiers: {

packages/patternfly-4/react-core/src/components/Popover/__snapshots__/Popover.test.js.snap

@@ -11,13 +11,14 @@ exports[`popover renders close-button, header and body 1`] = `
       [Function]
     </GenerateId>
   }
-  distance={15}
+  distance={25}
   flip={true}
   hideOnClick={false}
   interactive={true}
   interactiveBorder={0}
   isVisible={true}
   lazy={true}
+  maxWidth="calc(1.5rem + 18.75rem)"
   onCreate={[Function]}
   onHidden={[Function]}
   onHide={[Function]}
@@ -38,7 +39,6 @@ exports[`popover renders close-button, header and body 1`] = `
       },
     }
   }
-  size="regular"
   theme="pf-tippy"
   trigger="manual"
   zIndex={9999}

packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent, HTMLProps, ReactElement, ReactNode } from 'react';
+import { FunctionComponent, ReactElement } from 'react';
 import { Omit } from '../../typeUtils';
-import { BasicPlacement } from 'tippy.js';
+import { BasicPlacement, Props } from 'tippy.js';
 
 export const TooltipPosition: {
   top: 'top';
@@ -9,7 +9,7 @@ export const TooltipPosition: {
   right: 'right';
 };
 
-export interface TooltipProps extends Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'size'> {
+export interface TooltipProps extends Omit<Props, 'content' | 'children'> {
   /** Tooltip position */
   position?: BasicPlacement;
   /** If true, tries to keep the tooltip in view by flipping it if necessary */
@@ -19,13 +19,13 @@ export interface TooltipProps extends Omit<HTMLProps<HTMLDivElement>, 'content'
   /** The reference element to which the tooltip is relatively placed to */
   children: ReactElement<any>;
   /** Tooltip content */
-  content: ReactNode;
+  content: ReactElement<any> | string;
   /** The element to append the tooltip to, defaults to body */
   appendTo?: Element | ((ref: Element) => Element);
   /** z-index of the tooltip */
   zIndex?: number;
   /** Size of the tooltip */
-  size: 'small' | 'regular' | 'large';
+  maxWidth?: '12.5rem';
 }
 
 declare const Tooltip: FunctionComponent<TooltipProps>;

packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.js

@@ -2,46 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Tippy from '@tippy.js/react';
 import styles from '@patternfly/patternfly-next/components/Tooltip/tooltip.css';
-import { StyleSheet, css, getModifier } from '@patternfly/react-styles';
+import { css, getModifier } from '@patternfly/react-styles';
 import TooltipArrow from './TooltipArrow';
 import TooltipContent from './TooltipContent';
 import { KEY_CODES } from '../../internal/constants';
+import { c_tooltip_MaxWidth as tooltipMaxWidth } from '@patternfly/react-tokens';
+import { tippyStyles } from './styles';
 
-// Need to unset tippy default styles
-// Also for enableFlip, need to make arrow aware of parent x-placement attribute in order to work
-const overrides = StyleSheet.parse(`
-  .pf-tippy-theme {
-    &.tippy-tooltip { 
-      background-color: unset;
-      font-size: unset;
-      color: unset;
-      border-radius: unset;
-      max-width: unset;
-      text-align: unset;
-    }
-  }
-  .tippy-popper[x-placement^=top] .pf-c-tooltip__arrow {
-    bottom: 0;
-    left: 50%;
-    transform: var(--pf-c-tooltip__arrow--m-top--Transform); 
-  }
-  .tippy-popper[x-placement^=bottom] .pf-c-tooltip__arrow {
-    top: 0;
-    left: 50%;
-    transform: var(--pf-c-tooltip__arrow--m-bottom--Transform); 
-  }
-  .tippy-popper[x-placement^=left] .pf-c-tooltip__arrow {
-    top: 50%;
-    right: 0;
-    transform: var(--pf-c-tooltip__arrow--m-left--Transform); 
-  }
-  .tippy-popper[x-placement^=right] .pf-c-tooltip__arrow {
-    top: 50%;
-    left: 0;
-    transform: var(--pf-c-tooltip__arrow--m-right--Transform); 
-  }  
-`);
-overrides.inject();
+tippyStyles();
 
 export const TooltipPosition = {
   top: 'top',
@@ -65,8 +33,8 @@ const propTypes = {
   appendTo: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** z-index of the tooltip */
   zIndex: PropTypes.number,
-  /** Size of the tooltip */
-  size: PropTypes.oneOf(['small', 'regular', 'large'])
+  /** Maximum width of the tooltip (default 12.5rem) */
+  maxWidth: PropTypes.string
 };
 
 const defaultProps = {
@@ -75,7 +43,7 @@ const defaultProps = {
   className: null,
   appendTo: () => document.body,
   zIndex: 9999,
-  size: 'small'
+  maxWidth: tooltipMaxWidth && tooltipMaxWidth.value
 };
 
 class Tooltip extends React.Component {
@@ -106,7 +74,7 @@ class Tooltip extends React.Component {
       content: bodyContent,
       appendTo,
       zIndex,
-      size,
+      maxWidth,
       ...rest
     } = this.props;
     const content = (
@@ -122,7 +90,7 @@ class Tooltip extends React.Component {
     return (
       <Tippy
         onCreate={this.storeTippyInstance}
-        size={size}
+        maxWidth={maxWidth}
         zIndex={zIndex}
         appendTo={appendTo}
         content={content}

packages/patternfly-4/react-core/src/components/Tooltip/__snapshots__/Tooltip.test.js.snap

@@ -24,6 +24,7 @@ exports[`tooltip renders 1`] = `
   distance={15}
   flip={true}
   lazy={true}
+  maxWidth="12.5rem"
   onCreate={[Function]}
   performance={true}
   placement="top"
@@ -39,7 +40,6 @@ exports[`tooltip renders 1`] = `
       },
     }
   }
-  size="small"
   theme="pf-tippy"
   zIndex={9999}
 >