Move tooltip themes to Tooltip component making Popper/PopperController theme agnostic

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -4,11 +4,6 @@ import { Manager, Popper as ReactPopper } from 'react-popper';
 import { Portal } from '@grafana/ui';
 import Transition from 'react-transition-group/Transition';
 
-export enum Themes {
-  Default = 'popper__background--default',
-  Error = 'popper__background--error',
-  Brand = 'popper__background--brand',
-}
 
 const defaultTransitionStyles = {
   transition: 'opacity 200ms linear',
@@ -22,22 +17,20 @@ const transitionStyles: {[key: string]: object} = {
   exiting: { opacity: 0 },
 };
 
-interface Props extends React.DOMAttributes<HTMLDivElement> {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   renderContent: (content: any) => any;
   show: boolean;
   placement?: PopperJS.Placement;
   content: string | ((props: any) => JSX.Element);
   referenceElement: PopperJS.ReferenceObject;
-  theme?: Themes;
+
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { renderContent, show, placement, onMouseEnter, onMouseLeave, theme } = this.props;
+    const { renderContent, show, placement, onMouseEnter, onMouseLeave, className } = this.props;
     const { content } = this.props;
 
-    const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
-
     return (
       <Manager>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
@@ -56,9 +49,9 @@ class Popper extends PureComponent<Props> {
                         ...transitionStyles[transitionState],
                       }}
                       data-placement={placement}
-                      className="popper"
+                      className={`popper`}
                     >
-                      <div className={popperBackgroundClassName}>
+                      <div className={className}>
                         {renderContent(content)}
                         <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
                       </div>

packages/grafana-ui/src/components/Tooltip/PopperController.tsx

 import React from 'react';
 import * as PopperJS from 'popper.js';
-import { Themes } from './Popper';
 
 type PopperContent = string | (() => JSX.Element);
 
@@ -10,7 +9,6 @@ export interface UsingPopperProps {
   content: PopperContent;
   children: JSX.Element;
   renderContent?: (content: PopperContent) => JSX.Element;
-  theme?: Themes;
 }
 
 type PopperControllerRenderProp = (
@@ -21,7 +19,6 @@ type PopperControllerRenderProp = (
     placement: PopperJS.Placement;
     content: string | ((props: any) => JSX.Element);
     renderContent: (content: any) => any;
-    theme?: Themes;
   }
 ) => JSX.Element;
 
@@ -30,7 +27,6 @@ interface Props {
   content: PopperContent;
   className?: string;
   children: PopperControllerRenderProp;
-  theme?: Themes;
 }
 
 interface State {
@@ -83,7 +79,7 @@ class PopperController extends React.Component<Props, State> {
   }
 
   render() {
-    const { children, content, theme } = this.props;
+    const { children, content } = this.props;
     const { show, placement } = this.state;
 
     return children(this.showPopper, this.hidePopper, {
@@ -91,7 +87,6 @@ class PopperController extends React.Component<Props, State> {
       placement,
       content,
       renderContent: this.renderContent,
-      theme,
     });
   }
 }

packages/grafana-ui/src/components/Tooltip/Tooltip.tsx

@@ -3,8 +3,18 @@ import * as PopperJS from 'popper.js';
 import Popper from './Popper';
 import PopperController, { UsingPopperProps } from './PopperController';
 
-export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
+export enum Themes {
+  Default = 'popper__background--default',
+  Error = 'popper__background--error',
+  Brand = 'popper__background--brand',
+}
+
+interface TooltipProps extends UsingPopperProps {
+  theme?: Themes;
+}
+export const Tooltip = ({ children, renderContent, theme, ...controllerProps }: TooltipProps) => {
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
+  const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
 
   return (
     <PopperController {...controllerProps}>
@@ -17,6 +27,7 @@ export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPo
                 onMouseEnter={showPopper}
                 onMouseLeave={hidePopper}
                 referenceElement={tooltipTriggerRef.current}
+                className={popperBackgroundClassName}
               />
             )}
             {React.cloneElement(children, {

packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

 $popper-margin-from-ref: 5px;
 
-
 @mixin popper-theme($backgroundColor, $arrowColor) {
   background: $backgroundColor;
   .popper__arrow {
@@ -22,6 +21,10 @@ $popper-margin-from-ref: 5px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   padding: 10px;
 
+  .popper__arrow {
+    border-color: $tooltipBackground;
+  }
+
   // Themes
   &.popper__background--error {
     @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
@@ -41,9 +44,6 @@ $popper-margin-from-ref: 5px;
   margin: 0px;
 }
 
-.popper__arrow {
-  border-color: $tooltipBackground;
-}
 
 // Top
 .popper[data-placement^='top'] {

public/app/features/dashboard/dashgrid/DataPanel.tsx

 // Library
 import React, { Component } from 'react';
 import { Tooltip } from '@grafana/ui';
-import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
 
 import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
 

public/app/features/dashboard/panel_editor/PanelEditor.tsx

@@ -16,7 +16,7 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
 import { Tooltip } from '@grafana/ui';
-import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
 
 interface PanelEditorProps {
   panel: PanelModel;