Implement pointer component for spectrum palette sliders

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -38,7 +38,7 @@ export class ColorPickerPopover extends React.Component<Props, State> {
     const { color, theme } = this.props;
 
     return activePicker === 'spectrum' ? (
-      <SpectrumPalette color={color} onChange={this.handleChange} />
+      <SpectrumPalette color={color} onChange={this.handleChange}  theme={theme} />
     ) : (
       <NamedColorsPicker color={getColorName(color)} onChange={this.handleChange} theme={theme} />
     );

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx

 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import SpectrumPalette from './SpectrumPalette';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import { GrafanaTheme } from '../../types';
 
 const CenteredStory: FunctionComponent<{}> = ({ children }) => {
   return (
@@ -40,17 +42,20 @@ export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T
 
 storiesOf('UI/SpectrumPalette', module)
   .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
+  .addDecorator(withKnobs)
   .add('Named colors swatch - support for named colors', () => {
-
+    const selectedTheme = select(
+      'Theme',
+      {
+        Light: GrafanaTheme.Light,
+        Dark: GrafanaTheme.Dark,
+      },
+      GrafanaTheme.Light
+    );
     return (
       <UseState initialState="red">
         {(selectedColor, updateSelectedColor) => {
-          return (
-            <SpectrumPalette
-              color={selectedColor}
-              onChange={updateSelectedColor}
-            />
-          );
+          return <SpectrumPalette theme={selectedTheme} color={selectedColor} onChange={updateSelectedColor} />;
         }}
       </UseState>
     );

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx

@@ -5,14 +5,20 @@ import { Saturation, Hue, Alpha } from 'react-color/lib/components/common';
 import { getColorFromHexRgbOrName } from '../../utils/colorsPalette';
 import tinycolor from 'tinycolor2';
 import ColorInput from './ColorInput';
+import { Themeable, GrafanaTheme } from '../../types';
+import SpectrumPalettePointer, { SpectrumPalettePointerProps } from './SpectrumPalettePointer';
 
-export interface SpectrumPaletteProps {
+export interface SpectrumPaletteProps extends Themeable {
   color: string;
   onChange: (color: string) => void;
 }
 
+const renderPointer = (theme?: GrafanaTheme) => (props: SpectrumPalettePointerProps) => (
+  <SpectrumPalettePointer {...props} theme={theme} />
+);
+
 // @ts-ignore
-const SpectrumPicker = CustomPicker(({ rgb, hsl, onChange, renderers }) => {
+const SpectrumPicker = CustomPicker<Themeable>(({ rgb, hsl, onChange, theme }) => {
   return (
     <div
       style={{
@@ -55,7 +61,7 @@ const SpectrumPicker = CustomPicker(({ rgb, hsl, onChange, renderers }) => {
           >
             {/*
       // @ts-ignore */}
-            <Alpha rgb={rgb} hsl={hsl} a={rgb.a} onChange={onChange} />
+            <Alpha rgb={rgb} hsl={hsl} a={rgb.a} onChange={onChange} pointer={renderPointer(theme)} />
           </div>
         </div>
 
@@ -69,14 +75,14 @@ const SpectrumPicker = CustomPicker(({ rgb, hsl, onChange, renderers }) => {
         >
           {/*
         // @ts-ignore */}
-          <Hue onChange={onChange} hsl={hsl} direction="vertical" />
+          <Hue onChange={onChange} hsl={hsl} direction="vertical" pointer={renderPointer(theme)} />
         </div>
       </div>
     </div>
   );
 });
 
-const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color, onChange }) => {
+const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color, onChange, theme }) => {
   return (
     <div>
       <SpectrumPicker
@@ -84,6 +90,7 @@ const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color,
         onChange={(a: ColorResult) => {
           onChange(tinycolor(a.rgb).toString());
         }}
+        theme={theme}
       />
       <ColorInput color={color} onChange={onChange} style={{ marginTop: '16px' }} />
     </div>

packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx

+import React from 'react';
+import { GrafanaTheme, Themeable } from '../../types';
+
+export interface SpectrumPalettePointerProps extends Themeable {
+  direction?: string;
+}
+
+const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProps> = ({
+  theme,
+  direction,
+}) => {
+  const styles = {
+    picker: {
+      width: '16px',
+      height: '16px',
+      transform: direction === 'vertical' ? 'translate(0, -8px)' : 'translate(-8px, 0)',
+    },
+  };
+
+  const pointerColor = theme === GrafanaTheme.Light ? '#3F444D' : '#8E8E8E';
+
+  let pointerStyles: React.CSSProperties = {
+    position: 'absolute',
+    left: '6px',
+    width: '0',
+    height: '0',
+    borderStyle: 'solid',
+    background: 'none',
+  };
+
+  let topArrowStyles: React.CSSProperties = {
+    top: '-7px',
+    borderWidth: '6px 3px 0px 3px',
+    borderColor: `${pointerColor} transparent transparent transparent`,
+  };
+
+  let bottomArrowStyles: React.CSSProperties = {
+    bottom: '-7px',
+    borderWidth: '0px 3px 6px 3px',
+    borderColor: ` transparent transparent ${pointerColor} transparent`,
+  };
+
+  if (direction === 'vertical') {
+    pointerStyles = {
+      ...pointerStyles,
+      left: 'auto',
+    };
+    topArrowStyles = {
+      borderWidth: '3px 0px 3px 6px',
+      borderColor: `transparent transparent transparent ${pointerColor}`,
+      left: '-7px',
+      top: '7px',
+    };
+    bottomArrowStyles = {
+      borderWidth: '3px 6px 3px 0px',
+      borderColor: `transparent ${pointerColor} transparent transparent`,
+      right: '-7px',
+      top: '7px',
+    };
+  }
+
+  return (
+    <div style={styles.picker}>
+      <div
+        style={{
+          ...pointerStyles,
+          ...topArrowStyles,
+        }}
+      />
+      <div
+        style={{
+          ...pointerStyles,
+          ...bottomArrowStyles,
+        }}
+      />
+    </div>
+  );
+};
+
+export default SpectrumPalettePointer;