[7.x] [canvas] Color Widgets - TS + Examples (#31391)

package.json

@@ -113,6 +113,7 @@
     "@kbn/ui-framework": "1.0.0",
     "@types/json-stable-stringify": "^1.0.32",
     "@types/lodash.clonedeep": "^4.5.4",
+    "@types/recompose": "^0.30.5",
     "JSONStream": "1.1.1",
     "abortcontroller-polyfill": "^1.1.9",
     "angular": "1.6.9",

x-pack/package.json

@@ -39,6 +39,8 @@
     "@storybook/react": "^4.0.7",
     "@types/angular": "1.6.50",
     "@types/cheerio": "^0.22.10",
+    "@types/chroma-js": "^1.4.1",
+    "@types/color": "^3.0.0",
     "@types/d3-array": "^1.2.1",
     "@types/d3-scale": "^2.0.0",
     "@types/d3-shape": "^1.3.1",
@@ -67,6 +69,7 @@
     "@types/storybook__addon-info": "^3.4.2",
     "@types/storybook__react": "^4.0.0",
     "@types/supertest": "^2.0.5",
+    "@types/tinycolor2": "^1.4.1",
     "@types/uuid": "^3.4.4",
     "abab": "^1.0.4",
     "ansi-colors": "^3.0.5",

x-pack/plugins/canvas/public/components/color_dot/__examples__/__snapshots__/color_dot.examples.storyshot

@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components/ColorDot color dots 1`] = `
+Array [
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgb(255, 255, 255)",
+        }
+      }
+    />
+  </div>,
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgb(100, 150, 250)",
+        }
+      }
+    />
+  </div>,
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgba(100, 150, 250, 0.5)",
+        }
+      }
+    />
+  </div>,
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgb(0, 0, 0)",
+        }
+      }
+    />
+  </div>,
+]
+`;
+
+exports[`Storyshots components/ColorDot color dots with children 1`] = `
+Array [
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgb(255, 255, 255)",
+        }
+      }
+    >
+      <svg
+        className="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        style={
+          Object {
+            "fill": "#000",
+          }
+        }
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>,
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgb(102, 102, 102)",
+        }
+      }
+    >
+      <svg
+        className="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        style={
+          Object {
+            "fill": "#fff",
+          }
+        }
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>,
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgba(100, 150, 250, 0.5)",
+        }
+      }
+    >
+      <svg
+        className="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        style={
+          Object {
+            "fill": "#fff",
+          }
+        }
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.378 1.496l6.695 10.984A1 1 0 0 1 14.22 14H1.667a1 1 0 0 1-.883-1.47L6.642 1.545a1 1 0 0 1 1.736-.05zm-.853.52L1.667 13h12.552L7.525 2.016zM7.14 10.06L6.9 5.18h1.3l-.25 4.878h-.81zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>,
+  <div
+    className="canvasColorDot"
+  >
+    <div
+      className="canvasColorDot__background canvasCheckered"
+    />
+    <div
+      className="canvasColorDot__foreground"
+      style={
+        Object {
+          "background": "rgb(0, 0, 0)",
+        }
+      }
+    >
+      <svg
+        className="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        style={
+          Object {
+            "fill": "#fff",
+          }
+        }
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Storyshots components/ColorDot invalid dots 1`] = `null`;

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

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { EuiIcon } from '@elastic/eui';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ColorDot } from '../color_dot';
+
+storiesOf('components/ColorDot', module)
+  .addParameters({ info: { propTablesExclude: [EuiIcon] } })
+  .add('color dots', () => [
+    <ColorDot key="1" value="white" />,
+    <ColorDot key="2" value="rgb(100, 150, 250)" />,
+    <ColorDot key="3" value="rgba(100, 150, 250, .5)" />,
+    <ColorDot key="4" value="#000" />,
+  ])
+  .add('invalid dots', () => [
+    <ColorDot key="1" value="elastic" />,
+    <ColorDot key="2" value="#canvas" />,
+    <ColorDot key="3" value="#abcd" />,
+  ])
+  .add('color dots with children', () => [
+    <ColorDot key="1" value="#FFF">
+      <EuiIcon type="plusInCircle" color="#000" />
+    </ColorDot>,
+    <ColorDot key="2" value="#666">
+      <EuiIcon type="minusInCircle" color="#fff" />
+    </ColorDot>,
+    <ColorDot key="3" value="rgba(100, 150, 250, .5)">
+      <EuiIcon type="alert" color="#fff" />
+    </ColorDot>,
+    <ColorDot key="4" value="#000">
+      <EuiIcon type="check" color="#fff" />
+    </ColorDot>,
+  ]);

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

@@ -4,14 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
+import React, { ReactNode, SFC } 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;
+  /** Nodes to display within the dot.  Should fit within the constraints. */
+  children?: ReactNode;
+}
+
+export const ColorDot: SFC<Props> = ({ value, children }) => {
+  const tc = tinycolor(value);
+  if (!tc.isValid()) {
+    return null;
+  }
 
-export const ColorDot = ({ value, children }) => {
   return (
     <div className="canvasColorDot">
       <div className="canvasColorDot__background canvasCheckered" />
-      <div className="canvasColorDot__foreground" style={{ background: value }}>
+      <div className="canvasColorDot__foreground" style={{ background: tc.toRgbString() }}>
         {children}
       </div>
     </div>
@@ -21,5 +34,4 @@ export const ColorDot = ({ value, children }) => {
 ColorDot.propTypes = {
   value: PropTypes.string,
   children: PropTypes.node,
-  handleClick: PropTypes.func,
 };