mostly working extra actions example

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

@@ -22,6 +22,10 @@ import { CustomButton } from './custom_button';
 const customButtonSource = require('!!raw-loader!./custom_button');
 const customButtonHtml = renderToHtml(CustomButton);
 
+import { ExtraActions } from './extra_actions';
+const extraActionsSource = require('!!raw-loader!./extra_actions');
+const extraActionsHtml = renderToHtml(CustomButton);
+
 export const ColorPickerExample = {
   title: 'Color Picker',
   sections: [{
@@ -66,5 +70,22 @@ export const ColorPickerExample = {
       </p>
     ),
     demo: <CustomButton />,
+  }, {
+    title: 'Extra actions',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: extraActionsSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: extraActionsHtml,
+    }],
+    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: <ExtraActions />,
   }],
 };

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

@@ -14,7 +14,7 @@ export class CustomButton extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      color: "",
+      color: "#00B3A4",
     };
   }
 

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

@@ -26,10 +26,10 @@ export class CustomSwatches extends Component {
     }
 
     const customSwatches = [
-      '#333',
-      '#666',
-      '#999',
-      '#CCC',
+      { color: '#333' },
+      { color: '#666' },
+      { color: '#999' },
+      { color: '#CCC' },
     ]
 
     return (

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

@@ -0,0 +1,93 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiColorPicker,
+  EuiFormRow,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiToolTip,
+} from '../../../../src/components';
+
+import { isValidHex } from '../../../../src/services';
+
+export class ExtraActions extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      color: "",
+      customSwatches: ['#F44337', '#E92362', '#9C28B0', '#3F51B5', '#2196F3', '#18A9F5', '#1ABCD4', '#129688', '#4CAF50', '#CDDC38'],
+    };
+  }
+
+  handleChange = (value) => {
+    this.setState({ color: value });
+  };
+
+  addColor = (color) => {
+    this.state.customSwatches.push(color);
+
+    const addedSwatches = this.state.customSwatches;
+    console.log(addedSwatches);
+
+    this.setState({ customSwatches: addedSwatches });
+  }
+
+  removeColor = (color) => {
+    const trimmedSwatches = this.state.customSwatches.filter(swatch => swatch !== color);
+
+    this.setState({ customSwatches: trimmedSwatches });
+  }
+
+  render() {
+    const hasErrors = !isValidHex(this.state.color) && (this.state.color !== "");
+
+    let errors;
+    if (hasErrors) {
+      errors = ['Provide a valid hex value'];
+    }
+
+    const customSwatches = this.state.customSwatches.map(color => ({
+      color: color,
+      extraAction: (
+        <button onClick={this.removeColor.bind(this, color)} className="euiColorPickerSwatch__remove">
+          <EuiIcon type="cross" className="euiColorPickerSwatch__removeIcon" size="s" />
+        </button>
+      )
+    }));
+
+    return (
+      <div style={{ marginBottom: 100 }}>
+        <EuiFormRow
+          label="Pick a color"
+          isInvalid={hasErrors}
+          error={errors}
+        >
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiColorPicker
+                onChange={this.handleChange}
+                color={this.state.color}
+                isInvalid={hasErrors}
+                swatches={customSwatches}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiToolTip content={`Save color ${this.state.color} to my global palette`}>
+                <EuiButtonIcon
+                  iconType="plusInCircle"
+                  onClick={this.addColor.bind(this, this.state.color)}
+                  aria-label="Add this color to the palette"
+                  color="text"
+                />
+              </EuiToolTip>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
+      </div>
+    );
+  }
+}

src/components/color_picker/__snapshots__/color_picker_swatch.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiColorPickerSwatch is rendered 1`] = `
+<button
+  aria-label="aria-label"
+  class="euiColorPickerSwatch testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/color_picker/_color_picker.scss

@@ -11,4 +11,8 @@
     max-width: ($euiSizeL * 5) + ($euiSizeS * 6) + 2px;
 
   }
+
+  .euiColorPicker__flexItem {
+    position: relative;
+  }
 }

src/components/color_picker/_color_picker_swatch.scss

@@ -9,4 +9,24 @@
   &:focus {
     @include euiFocusRing;
   }
+
+  &:focus + .euiColorPickerSwatch__remove,
+  &:hover + .euiColorPickerSwatch__remove {
+    opacity: 1;
+  }
+}
+
+.euiColorPickerSwatch__remove {
+  @include euiFormControlLayout__clear('.euiColorPickerSwatch__removeIcon');
+
+  position: absolute;
+  top: -$euiSizeS;
+  right: -$euiSizeS;
+  opacity: 0;
+  transition: background-color $euiAnimSpeedNormal $euiAnimSlightResistance;
+
+  &:hover, &:focus {
+    opacity: 1;
+    background-color: $euiColorFullShade;
+  }
 }

src/components/color_picker/_index.scss

@@ -1,2 +1,4 @@
+@import "../form/form_control_layout/mixins";
+
 @import "color_picker";
 @import "color_picker_swatch";

src/components/color_picker/color_picker.js

@@ -78,21 +78,24 @@ export class EuiColorPicker extends Component {
       button,
     } = this.props;
     const classes = classNames('euiColorPicker', className);
-    const swatchOptions = swatches || VISUALIZATION_COLORS;
+    const defaultColors = VISUALIZATION_COLORS.map(color => ({ color: color }));
+
+    const swatchOptions = swatches || defaultColors;
 
     const swatchButtons = swatchOptions.map((swatch) => (
-      <EuiFlexItem grow={false} key={swatch}>
+      <EuiFlexItem grow={false} key={swatch.color} className="euiColorPicker__flexItem">
         <EuiColorPickerSwatch
           className="euiColorPicker__swatchSelect"
-          color={swatch}
-          onClick={this.handleSwatchSelection.bind(this, swatch)}
+          color={swatch.color}
+          onClick={this.handleSwatchSelection.bind(this, swatch.color)}
+          extraAction={swatch.extraAction}
           aria-label={`Select ${swatch} as the color`}
         />
       </EuiFlexItem>
     ));
 
     let swatchesPanel;
-    if (this.state.showColorSelector) {
+    if (this.state.showColorSelector && swatchOptions.length > 0) {
       swatchesPanel = (
         <EuiPanel
           className="euiColorPicker__panel"

src/components/color_picker/color_picker_swatch.js

@@ -1,20 +1,24 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export const EuiColorPickerSwatch = ({
   className,
   color,
+  extraAction,
   ...rest,
 }) => {
   const classes = classNames('euiColorPickerSwatch', className);
 
   return (
-    <button
-      className={classes}
-      style={{ background: color }}
-      {...rest}
-    />
+    <Fragment>
+      <button
+        className={classes}
+        style={{ background: color }}
+        {...rest}
+      />
+      {extraAction}
+    </Fragment>
   );
 };
 

src/components/form/form_control_layout/_mixins.scss

@@ -2,7 +2,7 @@
   $clearSize: $euiSize;
 
   @include size($clearSize);
-  background-color: transparentize($euiColorMediumShade, .5);
+  background-color: tintOrShade($euiColorMediumShade, 50%, 50%);
   border-radius: $clearSize;
   line-height: $clearSize;