From d8a91fa3557a0e8d22f6e3b0833d7a115e8049bc Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 9 Jan 2019 15:36:53 +0100
Subject: [PATCH] feat: Add brand as tooltip theme and use it on panel edit
 tabs #14271

---
 .../src/components/Tooltip/Popper.tsx          |  1 +
 .../src/components/Tooltip/_Tooltip.scss       | 18 ++++++++++++++----
 .../dashboard/dashgrid/PanelEditor.tsx         |  3 ++-
 public/sass/_variables.dark.scss               |  1 +
 public/sass/_variables.light.scss              |  1 +
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index f6f9fa6f73a..eb64df1cb6e 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -7,6 +7,7 @@ import Transition from 'react-transition-group/Transition';
 export enum Themes {
   Default = 'popper__background--default',
   Error = 'popper__background--error',
+  Brand = 'popper__background--brand',
 }
 
 const defaultTransitionStyles = {
diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index afa629d4043..c8fa099cce6 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
@@ -1,5 +1,13 @@
 $popper-margin-from-ref: 5px;
 
+
+@mixin popper-theme($backgroundColor, $arrowColor) {
+  background: $backgroundColor;
+  .popper__arrow {
+    border-color: $arrowColor;
+  }
+}
+
 .popper {
   position: absolute;
   z-index: $zindex-tooltip;
@@ -16,10 +24,12 @@ $popper-margin-from-ref: 5px;
 
   // Themes
   &.popper__background--error {
-    background: $tooltipBackgroundError;
-    .popper__arrow {
-      border-color: $tooltipBackgroundError;
-    }
+    @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
+  }
+
+  &.popper__background--brand {
+    @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
+    @include gradient-vertical($red, $orange);
   }
 }
 
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index 123204aa239..a09ff66f114 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -16,6 +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';
 
 interface PanelEditorProps {
   panel: PanelModel;
@@ -138,7 +139,7 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   return (
     <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
       <a className={tabClasses}>
-        <Tooltip content={`${tab.text}`} placement="auto">
+        <Tooltip content={`${tab.text}`} placement="auto" theme={Themes.Brand}>
           <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
         </Tooltip>
       </a>
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index ded17e6ecfe..5640ff1775e 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -310,6 +310,7 @@ $graph-tooltip-bg: $dark-1;
 $tooltipBackground: $popover-help-bg;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
+$tooltipBackgroundBrand: $brand-primary;
 
 // images
 $checkboxImageUrl: '../img/checkbox.png';
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index ec25be52676..be8df389c1b 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -314,6 +314,7 @@ $graph-tooltip-bg: $gray-5;
 $tooltipBackground: $popover-help-bg;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipBackgroundError: $brand-danger;
+$tooltipBackgroundBrand: $brand-primary;
 
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';