[canvas] Color fixes + Storybook 5 (#34075)

## Summary

(Fixes #33734 #33757 #33735)

This PR resolves issues with the `mini` color selector, the places the color picker was used, and removes complexity around color selection.  It allows for CSS-based color strings while still ruling out duplicates in the color palette, and fixes bugs found recently.

This PR also includes + modifies #33896 and updates Storybook to v5.

![Mar-28-2019 09-18-45](https://user-images.githubusercontent.com/297604/55168267-873a1c00-5140-11e9-93b9-f5ca86e70098.gif)

.gitattributes

@@ -0,0 +1 @@
+**/__snapshots__/** linguist-generated=true

x-pack/package.json

@@ -30,13 +30,14 @@
     "@kbn/expect": "1.0.0",
     "@kbn/plugin-helpers": "9.0.2",
     "@kbn/test": "1.0.0",
-    "@storybook/addon-actions": "^4.1.7",
+    "@storybook/addon-actions": "^5.0.5",
     "@storybook/addon-console": "^1.1.0",
-    "@storybook/addon-info": "^4.0.7",
-    "@storybook/addon-knobs": "^4.0.7",
-    "@storybook/addon-options": "^4.1.7",
-    "@storybook/addon-storyshots": "^4.1.7",
-    "@storybook/react": "^4.0.7",
+    "@storybook/addon-info": "^5.0.5",
+    "@storybook/addon-knobs": "^5.0.5",
+    "@storybook/addon-options": "^5.0.5",
+    "@storybook/addon-storyshots": "^5.0.5",
+    "@storybook/react": "^5.0.5",
+    "@storybook/theming": "^5.0.5",
     "@types/angular": "1.6.50",
     "@types/cheerio": "^0.22.10",
     "@types/chroma-js": "^1.4.1",
@@ -65,9 +66,10 @@
     "@types/recompose": "^0.30.2",
     "@types/reduce-reducers": "^0.1.3",
     "@types/sinon": "^5.0.1",
-    "@types/storybook__addon-actions": "^3.4.1",
-    "@types/storybook__addon-info": "^3.4.2",
-    "@types/storybook__react": "^4.0.0",
+    "@types/storybook__addon-actions": "^3.4.2",
+    "@types/storybook__addon-info": "^4.1.1",
+    "@types/storybook__addon-knobs": "^4.0.4",
+    "@types/storybook__react": "^4.0.1",
     "@types/supertest": "^2.0.5",
     "@types/tinycolor2": "^1.4.1",
     "@types/uuid": "^3.4.4",

x-pack/plugins/canvas/.storybook/config.js

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { configure, addDecorator } from '@storybook/react';
+import { configure, addDecorator, addParameters } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs/react';
 import { withInfo } from '@storybook/addon-info';
-import { withOptions } from '@storybook/addon-options';
+import { create } from '@storybook/theming';
 
 // Import dependent CSS
 require('@elastic/eui/dist/eui_theme_light.css');
@@ -21,16 +21,16 @@ if (process.env.NODE_ENV === 'test') {
 } else {
   // Customize the info for each story.
   addDecorator(
-    withInfo({ 
+    withInfo({
       inline: true,
       styles: {
         infoBody: {
-          margin: 20
+          margin: 20,
         },
         infoStory: {
-          margin: '40px 60px'
-        }
-      }
+          margin: '40px 60px',
+        },
+      },
     })
   );
 
@@ -44,7 +44,11 @@ function loadStories() {
   css.keys().forEach(filename => css(filename));
 
   // Include the legacy styles
-  const uiStyles = require.context('../../../../src/legacy/ui/public/styles', false, /[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/);
+  const uiStyles = require.context(
+    '../../../../src/legacy/ui/public/styles',
+    false,
+    /[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/
+  );
   uiStyles.keys().forEach(key => uiStyles(key));
 
   // Find all files ending in *.examples.ts
@@ -53,13 +57,18 @@ function loadStories() {
 }
 
 // Set up the Storybook environment with custom settings.
-addDecorator(
-  withOptions({
-    goFullScreen: false,
-    name: 'Canvas Storybook',
-    showAddonsPanel: true,
-    url: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas'
-  })
-);
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'Canvas Storybook',
+      brandUrl: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas',
+    }),
+    showPanel: true,
+    isFullscreen: false,
+    panelPosition: 'bottom',
+    isToolshown: true,
+  },
+});
 
 configure(loadStories, module);

x-pack/plugins/canvas/.storybook/webpack.config.js

@@ -8,19 +8,16 @@ const path = require('path');
 const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
 
 // Extend the Storybook Webpack config with some customizations;
-module.exports = (_baseConfig, _env, config) => {
-
+module.exports = async ({ config, _mode }) => {
   // Include the React preset for Storybook JS files.
-  config.module.rules.push(
-    {
-      test: /\.js$/,
-      include: /\.storybook/,
-      loaders: 'babel-loader',
-      options: {
-        presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
-      },
+  config.module.rules.push({
+    test: /\.js$/,
+    exclude: /node_modules/,
+    loaders: 'babel-loader',
+    options: {
+      presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
     },
-  );
+  });
 
   // Find and alter the CSS rule to replace the Kibana public path string with a path
   // to the route we've added in middleware.js
@@ -30,10 +27,10 @@ module.exports = (_baseConfig, _env, config) => {
     options: {
       search: '__REPLACE_WITH_PUBLIC_PATH__',
       replace: '/',
-      flags: 'g'
-    }
+      flags: 'g',
+    },
   });
-  
+
   // Configure loading LESS files from Kibana
   config.module.rules.push({
     test: /\.less$/,
@@ -66,7 +63,7 @@ module.exports = (_baseConfig, _env, config) => {
 
   // Include the TSDocgen plugin to display Typescript param comments in the stories.
   config.plugins.push(new TSDocgenPlugin());
-  
+
   // Tell Webpack about the ts/x extensions
   config.resolve.extensions.push('.ts', '.tsx');
 

x-pack/plugins/canvas/canvas_plugin_src/uis/views/progress.js

@@ -36,7 +36,7 @@ export const progress = () => ({
     {
       name: 'valueColor',
       displayName: 'Progress color',
-      help: 'Color of the progress bar',
+      help: 'Accepts HEX, RGB or HTML Color names',
       argType: 'color',
       default: `#1785b0`,
     },
@@ -50,7 +50,7 @@ export const progress = () => ({
     {
       name: 'barColor',
       displayName: 'Background color',
-      help: 'Color of the background bar',
+      help: 'Accepts HEX, RGB or HTML Color names',
       argType: 'color',
       default: `#f0f0f0`,
     },

x-pack/plugins/canvas/canvas_plugin_src/uis/views/shape.js

@@ -24,13 +24,13 @@ export const shape = () => ({
       name: 'fill',
       displayName: 'Fill',
       argType: 'color',
-      help: 'Fill color of the shape',
+      help: 'Accepts HEX, RGB or HTML Color names',
     },
     {
       name: 'border',
       displayName: 'Border',
       argType: 'color',
-      help: 'Border color',
+      help: 'Accepts HEX, RGB or HTML Color names',
     },
     {
       name: 'borderWidth',

x-pack/plugins/canvas/public/components/color_dot/color_dot.tsx

@@ -5,26 +5,28 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { ReactNode, SFC } from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import tinycolor from 'tinycolor2';
 
 export interface Props {
-  /** Any valid CSS color. If not a valid CSS string, the dot will not render */
-  value: string;
+  /** Any valid CSS color. If not a valid CSS string, the dot will be transparent and checkered */
+  value?: string;
   /** Nodes to display within the dot.  Should fit within the constraints. */
   children?: ReactNode;
 }
 
-export const ColorDot: SFC<Props> = ({ value, children }) => {
+export const ColorDot: FunctionComponent<Props> = ({ value, children }) => {
   const tc = tinycolor(value);
-  if (!tc.isValid()) {
-    return null;
+  let style = {};
+
+  if (tc.isValid()) {
+    style = { background: value };
   }
 
   return (
     <div className="canvasColorDot">
       <div className="canvasColorDot__background canvasCheckered" />
-      <div className="canvasColorDot__foreground" style={{ background: tc.toRgbString() }}>
+      <div className="canvasColorDot__foreground" style={style}>
         {children}
       </div>
     </div>

x-pack/plugins/canvas/public/components/color_dot/index.ts

@@ -8,4 +8,5 @@ import { pure } from 'recompose';
 
 import { ColorDot as Component } from './color_dot';
 
+export { Props } from './color_dot';
 export const ColorDot = pure(Component);