Replace EuiColorPicker with an accessible, custom component

package.json

@@ -43,7 +43,6 @@
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
     "react-ace": "^5.5.0",
-    "react-color": "^2.13.8",
     "react-datepicker": "v1.4.1",
     "react-input-autosize": "^2.2.1",
     "react-virtualized": "^9.18.5",

src-docs/src/views/color_picker/color_picker.js

@@ -2,13 +2,14 @@ import React, {
   Component,
 } from 'react';
 
-import { EuiColorPicker } from '../../../../src/components';
+import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
+import { isValidHex } from '../../../../src/services';
 
 export class ColorPicker extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      color: '#ffffff'
+      color: "",
     };
   }
 
@@ -17,6 +18,25 @@ export class ColorPicker extends Component {
   };
 
   render() {
-    return <EuiColorPicker onChange={this.handleChange} color={this.state.color}/>;
+    const hasErrors = !isValidHex(this.state.color) && (this.state.color !== "");
+
+    let errors;
+    if (hasErrors) {
+      errors = ['Provide a valid hex value'];
+    }
+
+    return (
+      <EuiFormRow
+        label="Pick a color"
+        isInvalid={hasErrors}
+        error={errors}
+      >
+        <EuiColorPicker
+          onChange={this.handleChange}
+          color={this.state.color}
+          isInvalid={hasErrors}
+        />
+      </EuiFormRow>
+    );
   }
 }

src-docs/src/views/color_picker/color_picker_example.js

@@ -6,17 +6,21 @@ import {
   GuideSectionTypes,
 } from '../../components';
 
+import {
+  EuiCode,
+} from '../../../../src/components';
+
 import { ColorPicker } from './color_picker';
 const colorPickerSource = require('!!raw-loader!./color_picker');
 const colorPickerHtml = renderToHtml(ColorPicker);
 
-import { ColorPickerLabelAndClear } from './color_picker_clear';
-const colorPickerClearSource = require('!!raw-loader!./color_picker_clear');
-const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear);
+import { CustomSwatches } from './custom_swatches';
+const customSwatchesSource = require('!!raw-loader!./custom_swatches');
+const customSwatchesHtml = renderToHtml(CustomSwatches);
 
-import { ColorPickerNoColorLabel } from './color_picker_no_color_label';
-const colorPickerNoColorLabelSource = require('!!raw-loader!./color_picker_no_color_label');
-const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel);
+import { CustomButton } from './custom_button';
+const customButtonSource = require('!!raw-loader!./custom_button');
+const customButtonHtml = renderToHtml(CustomButton);
 
 export const ColorPickerExample = {
   title: 'Color Picker',
@@ -30,24 +34,37 @@ export const ColorPickerExample = {
     }],
     demo: <ColorPicker />,
   }, {
-    title: 'With label and reset link',
+    title: 'Custom color swatches',
     source: [{
       type: GuideSectionTypes.JS,
-      code: colorPickerClearSource,
+      code: customSwatchesSource,
     }, {
       type: GuideSectionTypes.HTML,
-      code: colorPickerClearHtml,
+      code: customSwatchesHtml,
     }],
-    demo: <ColorPickerLabelAndClear />,
+    text: (
+      <p>
+        By default the colors provided are the ten color blind safe visualization colors.
+        You can however pass in your own color set with the <EuiCode>swatches</EuiCode> prop.
+      </p>
+    ),
+    demo: <CustomSwatches />,
   }, {
-    title: 'Without a color label',
+    title: 'Custom button',
     source: [{
       type: GuideSectionTypes.JS,
-      code: colorPickerNoColorLabelSource,
+      code: customButtonSource,
     }, {
       type: GuideSectionTypes.HTML,
-      code: colorPickerNoColorLabelHtml,
+      code: customButtonHtml,
     }],
-    demo: <ColorPickerNoColorLabel />,
+    text: (
+      <p>
+        You can optionally use a custom button as the trigger for selection using
+        the <EuiCode>button</EuiCode> prop. Please remember to add accessibility to this
+        component, using proper button markup and aria labeling.
+      </p>
+    ),
+    demo: <CustomButton />,
   }],
 };

src-docs/src/views/color_picker/custom_button.js

@@ -0,0 +1,53 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiColorPicker,
+  EuiFormRow,
+  EuiColorPickerSwatch
+} from '../../../../src/components';
+
+import { isValidHex } from '../../../../src/services';
+
+export class CustomButton extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      color: "",
+    };
+  }
+
+  handleChange = (value) => {
+    this.setState({ color: value });
+  };
+
+  render() {
+    const hasErrors = !isValidHex(this.state.color) && (this.state.color !== "");
+
+    let errors;
+    if (hasErrors) {
+      errors = ['Provide a valid hex value'];
+    }
+
+    return (
+      <EuiFormRow
+        label="Pick a color"
+        isInvalid={hasErrors}
+        error={errors}
+      >
+        <EuiColorPicker
+          onChange={this.handleChange}
+          color={this.state.color}
+          isInvalid={hasErrors}
+          button={
+            <EuiColorPickerSwatch
+              color={this.state.color}
+              aria-label="Select a new color"
+            />
+          }
+        />
+      </EuiFormRow>
+    );
+  }
+}

src-docs/src/views/color_picker/custom_swatches.js

@@ -0,0 +1,50 @@
+import React, {
+  Component,
+} from 'react';
+
+import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
+import { isValidHex } from '../../../../src/services';
+
+export class CustomSwatches extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      color: "",
+    };
+  }
+
+  handleChange = (value) => {
+    this.setState({ color: value });
+  };
+
+  render() {
+    const hasErrors = !isValidHex(this.state.color) && (this.state.color !== "");
+
+    let errors;
+    if (hasErrors) {
+      errors = ['Provide a valid hex value'];
+    }
+
+    const customSwatches = [
+      '#333',
+      '#666',
+      '#999',
+      '#CCC',
+    ]
+
+    return (
+      <EuiFormRow
+        label="Pick a color"
+        isInvalid={hasErrors}
+        error={errors}
+      >
+        <EuiColorPicker
+          onChange={this.handleChange}
+          color={this.state.color}
+          isInvalid={hasErrors}
+          swatches={customSwatches}
+        />
+      </EuiFormRow>
+    );
+  }
+}

src-docs/src/views/icon/icons.js

@@ -115,6 +115,7 @@ const iconTypes = [
   'stats',
   'stop',
   'stopFilled',
+  'stopSlash',
   'storage',
   'string',
   'temperature',

src-docs/src/views/outside_click_detector/outside_click_detector_example.js

@@ -28,7 +28,7 @@ export const OutsideClickDetectorExample = {
     text: (
       <p>
         Use <EuiCode>EuiOutsideClickDetector</EuiCode> to trigger a handler when the user clicks outside of the
-        child element.
+        child element. Note that it will not work if the immediate child is a React <EuiCode>Fragment</EuiCode>.
       </p>
     ),
     props: { EuiOutsideClickDetector },