From e7917ce4e047729cd7c92c9030bf70c3c7c235e5 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 7 Feb 2019 14:10:56 +0100
Subject: [PATCH] Removed unnecessary code from ColorPicker and extended theme
 type

---
 .../components/ColorPicker/ColorPicker.tsx    | 19 +++----------------
 packages/grafana-ui/src/themes/dark.js        | 11 ++++++++---
 packages/grafana-ui/src/themes/default.js     | 15 +++++++++++++++
 packages/grafana-ui/src/themes/light.js       |  5 +++++
 packages/grafana-ui/src/types/theme.ts        |  7 ++++++-
 5 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index 67201727a34..a48ecc44c45 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -1,8 +1,8 @@
 import React, { Component, createRef } from 'react';
 import PopperController from '../Tooltip/PopperController';
-import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper';
+import Popper from '../Tooltip/Popper';
 import { ColorPickerPopover } from './ColorPickerPopover';
-import { GrafanaThemeType, Themeable } from '../../types';
+import { Themeable } from '../../types';
 import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 import propDeprecationWarning from '../../utils/propDeprecationWarning';
@@ -18,7 +18,6 @@ export interface ColorPickerProps extends Themeable {
    */
   onColorChange?: ColorPickerChangeHandler;
   enableNamedColors?: boolean;
-  withArrow?: boolean;
   children?: JSX.Element;
 }
 
@@ -32,7 +31,6 @@ export const warnAboutColorPickerPropsDeprecation = (componentName: string, prop
 export const colorPickerFactory = <T extends ColorPickerProps>(
   popover: React.ComponentType<T>,
   displayName = 'ColorPicker',
-  renderPopoverArrowFunction?: RenderPopperArrowFn
 ) => {
   return class ColorPicker extends Component<T, any> {
     static displayName = displayName;
@@ -50,17 +48,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
         ...this.props,
         onChange: this.handleColorChange,
       });
-      const { theme, withArrow, children } = this.props;
-
-      const renderArrow: RenderPopperArrowFn = ({ arrowProps, placement }) => {
-        return (
-          <div
-            {...arrowProps}
-            data-placement={placement}
-            className={`ColorPicker__arrow ColorPicker__arrow--${theme.type === GrafanaThemeType.Light ? 'light' : 'dark'}`}
-          />
-        );
-      };
+      const { theme, children } = this.props;
 
       return (
         <PopperController content={popoverElement} hideAfter={300}>
@@ -72,7 +60,6 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                     {...popperProps}
                     referenceElement={this.pickerTriggerRef.current}
                     wrapperClassName="ColorPicker"
-                    renderArrow={withArrow && (renderPopoverArrowFunction || renderArrow)}
                     onMouseLeave={hidePopper}
                     onMouseEnter={showPopper}
                   />
diff --git a/packages/grafana-ui/src/themes/dark.js b/packages/grafana-ui/src/themes/dark.js
index 553eb537093..d5e7e5aacba 100644
--- a/packages/grafana-ui/src/themes/dark.js
+++ b/packages/grafana-ui/src/themes/dark.js
@@ -33,7 +33,7 @@ const darkTheme = {
   ...defaultTheme,
   type: 'dark',
   name: 'Grafana Dark',
-  colors:  {
+  colors: {
     ...basicColors,
     inputBlack: '#09090b',
     queryRed: '#e24d42',
@@ -57,7 +57,12 @@ const darkTheme = {
     linkColorHover: basicColors.white,
     linkColorExternal: basicColors.blue,
     headingColor: new tinycolor(basicColors.white).darken(11).toString(),
-  }
-}
+  },
+  background: {
+    dropdown: basicColors.dark3,
+    scrollbar: '#aeb5df',
+    scrollbar2: '#3a3a3a',
+  },
+};
 
 module.exports = darkTheme;
diff --git a/packages/grafana-ui/src/themes/default.js b/packages/grafana-ui/src/themes/default.js
index 59ed050e360..d95c6ad5689 100644
--- a/packages/grafana-ui/src/themes/default.js
+++ b/packages/grafana-ui/src/themes/default.js
@@ -41,6 +41,21 @@ const theme = {
     m: '768px',
     l: '992px',
     xl: '1200px'
+  },
+  spacing: {
+    xs: '0',
+    s: '0.2rem',
+    m: '1rem',
+    l: '1.5rem',
+    xl: '3rem',
+    gutter: '30px',
+  },
+  border: {
+    radius: {
+      xs: '2px',
+      s: '3px',
+      m: '5px',
+    }
   }
 };
 
diff --git a/packages/grafana-ui/src/themes/light.js b/packages/grafana-ui/src/themes/light.js
index de5c79e8319..8da6190caba 100644
--- a/packages/grafana-ui/src/themes/light.js
+++ b/packages/grafana-ui/src/themes/light.js
@@ -60,6 +60,11 @@ const lightTheme/*: GrafanaThemeType*/ = {
     linkColorHover: new tinycolor(basicColors.gray1).darken(20).toString(),
     linkColorExternal: basicColors.blueLight,
     headingColor: basicColors.gray1,
+  },
+  background: {
+    dropdown: basicColors.white,
+    scrollbar: basicColors.gray5,
+    scrollbar2: basicColors.gray5,
   }
 }
 
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 0fc81fa24e1..8a79658b423 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -62,6 +62,11 @@ export interface GrafanaTheme {
       m: string;
     };
   };
+  background: {
+    dropdown: string;
+    scrollbar: string;
+    scrollbar2: string;
+  };
   colors: {
     black: string;
     white: string;
@@ -102,7 +107,7 @@ export interface GrafanaTheme {
     warn: string;
     critical: string;
 
-    // TODO: should this be a part of theme?
+    // TODO: move to background section
     bodyBg: string;
     pageBg: string;
     bodyColor: string;