EuiColorStops

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

@@ -4,7 +4,12 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiColorPicker, EuiText } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiColorPicker,
+  EuiColorStops,
+  EuiText,
+} from '../../../../src/components';
 
 import { ColorPicker } from './color_picker';
 const colorPickerSource = require('!!raw-loader!./color_picker');
@@ -121,6 +126,15 @@ const kitchenSinkSnippet = `<EuiColorPicker
 />
 `;
 
+import { ColorStops } from './color_stops';
+const colorStopsSource = require('!!raw-loader!./color_stops');
+const colorStopsHtml = renderToHtml(ColorStops);
+const colorStopsSnippet = `<EuiColorStops
+  onChange={handleChange}
+  colorStops={colorStops}
+/>
+`;
+
 export const ColorPickerExample = {
   title: 'Color Picker',
   intro: (
@@ -284,5 +298,29 @@ export const ColorPickerExample = {
       snippet: kitchenSinkSnippet,
       demo: <KitchenSink />,
     },
+    {
+      title: 'Color stops',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: colorStopsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: colorStopsHtml,
+        },
+      ],
+      props: { EuiColorStops },
+      text: (
+        <p>
+          Use <EuiCode>EuiColorStops</EuiCode> to define color stops for data
+          driven styling. Stops are numbers within the provided range. The color
+          segment spans from the given stop number (inclusive) to the next stop
+          number (exclusive).
+        </p>
+      ),
+      snippet: colorStopsSnippet,
+      demo: <ColorStops />,
+    },
   ],
 };

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

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+
+import { DisplayToggles } from '../form_controls/display_toggles';
+import {
+  EuiColorStops,
+  EuiFormRow,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export const ColorStops = () => {
+  const generateRandomColor = () =>
+    // https://www.paulirish.com/2009/random-hex-color-code-snippets/
+    `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+
+  const [addColor, setAddColor] = useState(generateRandomColor());
+  const [colorStops, setColorStops] = useState([
+    {
+      stop: 20,
+      color: '#00B3A4',
+    },
+    {
+      stop: 50,
+      color: '#DB1374',
+    },
+    {
+      stop: 65,
+      color: '#490092',
+    },
+  ]);
+
+  const handleChange = colorStops => {
+    setColorStops(colorStops);
+    setAddColor(generateRandomColor());
+  };
+
+  const [extendedColorStops, setExtendedColorStops] = useState([
+    {
+      stop: 100,
+      color: '#00B3A4',
+    },
+    {
+      stop: 250,
+      color: '#DB1374',
+    },
+    {
+      stop: 350,
+      color: '#490092',
+    },
+  ]);
+
+  const handleExtendedChange = colorStops => {
+    setExtendedColorStops(colorStops);
+  };
+
+  const [emptyColorStops, setEmptyColorStops] = useState([]);
+
+  const handleEmptyChange = colorStops => {
+    setEmptyColorStops(colorStops);
+  };
+
+  const changeProps = () => {
+    setColorStops([
+      {
+        stop: 0,
+        color: '#ff0000',
+      },
+      {
+        stop: 25,
+        color: '#FFFF00',
+      },
+      {
+        stop: 45,
+        color: '#008000',
+      },
+    ]);
+  };
+
+  return (
+    <React.Fragment>
+      <button onClick={changeProps}>Prop Change</button>
+      <EuiFormRow label="Empty start">
+        <EuiColorStops
+          label="Empty start"
+          onChange={handleEmptyChange}
+          colorStops={emptyColorStops}
+          min={0}
+          max={100}
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Standard">
+        <EuiColorStops
+          label="Standard"
+          onChange={handleChange}
+          colorStops={colorStops}
+          min={0}
+          max={100}
+          fullWidth={true}
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Random new color">
+        <EuiColorStops
+          label="Random new color"
+          onChange={handleChange}
+          colorStops={colorStops}
+          min={0}
+          max={100}
+          addColor={addColor}
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Extended range">
+        <EuiColorStops
+          label="Extended range"
+          onChange={handleExtendedChange}
+          colorStops={extendedColorStops}
+          min={100}
+          max={400}
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Swatch-only mode">
+        <EuiColorStops
+          label="Swatch-only mode"
+          onChange={handleChange}
+          colorStops={colorStops}
+          min={0}
+          max={100}
+          mode="swatch"
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Picker-only mode">
+        <EuiColorStops
+          label="Picker-only mode"
+          onChange={handleChange}
+          colorStops={colorStops}
+          min={0}
+          max={100}
+          mode="picker"
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Custom swatches">
+        <EuiColorStops
+          label="Custom swatches"
+          onChange={handleChange}
+          colorStops={colorStops}
+          min={0}
+          max={100}
+          swatches={['#333', '#666', '#999', '#CCC']}
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Fixed color segments">
+        <EuiColorStops
+          label="Fixed color segments"
+          onChange={handleChange}
+          colorStops={colorStops}
+          min={0}
+          max={100}
+          stopType="fixed"
+        />
+      </EuiFormRow>
+
+      <EuiSpacer size="xxl" />
+
+      <DisplayToggles canLoading={false}>
+        <EuiColorStops
+          label="State options"
+          onChange={handleChange}
+          colorStops={colorStops}
+          min={0}
+          max={100}
+        />
+      </DisplayToggles>
+    </React.Fragment>
+  );
+};

src/components/color_picker/_color_picker.scss

@@ -2,8 +2,7 @@
 
 .euiColorPicker {
   position: relative;
-  // 5 columns of swatches + margins + border
-  width: ($euiSizeL * 5) + ($euiSizeS * 4);
+  width: $euiColorPickerWidth;
 
 }
 

src/components/color_picker/_index.scss

@@ -3,3 +3,4 @@
 @import 'color_picker_swatch';
 @import 'hue';
 @import 'saturation';
+@import 'color_stops/index';

src/components/color_picker/_variables.scss

@@ -3,3 +3,4 @@ $euiColorPickerValueRange1: rgba(255, 255, 255, 0);
 $euiColorPickerSaturationRange0: rgba(0, 0, 0, 1);
 $euiColorPickerSaturationRange1: rgba(0, 0, 0, 0);
 $euiColorPickerIndicatorSize: $euiSizeM;
+$euiColorPickerWidth: ($euiSizeL * 5) + ($euiSizeS * 4); // 5 columns of swatches + margins + border

src/components/color_picker/color_picker.tsx

@@ -65,10 +65,6 @@ export interface EuiColorPickerProps
    *  Custom validation flag
    */
   isInvalid?: boolean;
-  /**
-   *  Renders inline, without an input element or popover
-   */
-  inline?: boolean;
   /**
    * Choose between swatches with gradient picker (default), swatches only, or gradient picker only.
    */

src/components/color_picker/color_stops/_color_stops.scss

@@ -0,0 +1,81 @@
+@import '../../form/range/_variables';
+
+.euiColorStops:not(.euiColorStops-isDisabled) {
+  &:focus {
+    outline: 2px solid $euiFocusRingColor;
+  }
+}
+
+.euiColorStops__addContainer {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: $euiRangeThumbHeight;
+  margin-top: $euiRangeThumbHeight * -.5;
+
+  &:hover:not(.euiColorStops__addContainer-isDisabled) {
+    cursor: pointer;
+
+    .euiColorStops__addTarget {
+      opacity: .7;
+    }
+  }
+}
+
+.euiColorStops__addTarget {
+  @include euiCustomControl($type: 'round');
+  @include euiRangeThumbStyle;
+  position: absolute;
+  top: 0;
+  height: $euiRangeThumbHeight;
+  width: $euiRangeThumbHeight;
+  background-color: $euiColorLightestShade;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity $euiAnimSpeedFast;
+}
+
+.euiColorStop {
+  width: $euiColorPickerWidth;
+}
+
+.euiColorStopPopover.euiPopover {
+  position: absolute;
+  top: 50%;
+  width: $euiRangeThumbWidth;
+  height: $euiRangeThumbHeight;
+  margin-top: $euiRangeThumbHeight * -.5;
+}
+
+.euiColorStopPopover-hasFocus {
+  z-index: 1;
+}
+
+.euiColorStopPopover__anchor {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.euiColorStopThumb.euiRangeThumb:not(:disabled) {
+  // sass-lint:disable-block no-color-literals, indentation
+  top: 0;
+  margin-top: 0;
+  pointer-events: auto;
+  cursor: grab;
+  border: solid ($euiSizeXS - 1px) $euiColorEmptyShade;
+  box-shadow:
+    0 0 0 1px $euiColorMediumShade,
+    0 2px 2px -1px rgba($euiShadowColor, .2),
+    0 1px 5px -2px rgba($euiShadowColor, .2);
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.euiColorStops.euiColorStops-isDragging:not(.euiColorStops-isDisabled):not(.euiColorStops-isReadOnly) {
+  cursor: grabbing;
+}

src/components/color_picker/color_stops/_index.scss

@@ -0,0 +1 @@
+@import 'color_stops';