EuiColorStops (#2360)

* WIP * WIP: scaling clean up * reverse up/down keys * add left/right movement * update test * doubleClick addStop; clean up; tests removal * use more range components directly * Firefox cleanup * i18n; refactor * WIP: add new stop via click * clean up * better keyboard interaction * add stop styles * empty set; backspace fix; drag handle fix * readOnly and disabled * screen reader * more i18n * cleanup of thumbs * Update src/components/color_picker/color_stops/color_stop_thumb.tsx Co-Authored-By: [email protected] <[email protected]> * thumb title * required label * misc feeback * update zIndex for active thumb * docs refactor * util; basic snapshot tests * color stops tests * thumb snapshot tests * CL * use sorted array for add via keyboard location
elastic · Oct 2, 2019 · 5b83afb · 5b83afb
1 parent 9418929
commit 5b83afb
Show file tree

Hide file tree

Showing 30 changed files with 3,007 additions and 306 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Update Elastic-Charts to version 13.0.0 and updated the theme object accordingly ([#2381](https://github.com/elastic/eui/pull/2381))
+- Added new `EuiColorStops` component ([#2360](https://github.com/elastic/eui/pull/2360))
 
 **Bug fixes**
 
-- Fix `EuiSelectable` to accept programmatic updates to its `options` prop ([#2390](https://github.com/elastic/eui/pull/2390)) 
+- Fix `EuiSelectable` to accept programmatic updates to its `options` prop ([#2390](https://github.com/elastic/eui/pull/2390))
 
 ## [`14.4.0`](https://github.com/elastic/eui/tree/v14.4.0)
 

diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
@@ -4,7 +4,13 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiColorPicker, EuiText } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiColorPicker,
+  EuiColorStops,
+  EuiSpacer,
+  EuiText,
+} from '../../../../src/components';
 
 import { ColorPicker } from './color_picker';
 const colorPickerSource = require('!!raw-loader!./color_picker');
@@ -17,6 +23,36 @@ const colorPickerSnippet = `<EuiColorPicker
 />
 `;
 
+import { ColorStops } from './color_stops';
+const colorStopsSource = require('!!raw-loader!./color_stops');
+const colorStopsHtml = renderToHtml(ColorStops);
+const colorStopsSnippetStandard = `<EuiColorStops
+  label="Standard"
+  onChange={handleChange}
+  colorStops={colorStops}
+  min={0}
+  max={100}
+/>`;
+
+const colorStopsSnippetAdd = `<EuiColorStops
+  label="Custom add color"
+  onChange={handleChange}
+  colorStops={colorStops}
+  min={0}
+  max={100}
+  addColor={colorToAddToNewStops}
+/>`;
+
+const colorStopsSnippetFixed = `<EuiColorStops
+  label="Fixed color segments"
+  onChange={handleChange}
+  colorStops={colorStops}
+  min={0}
+  max={100}
+  stopType="fixed"
+/>
+`;
+
 import { CustomSwatches } from './custom_swatches';
 const customSwatchesSource = require('!!raw-loader!./custom_swatches');
 const customSwatchesHtml = renderToHtml(CustomSwatches);
@@ -31,6 +67,20 @@ const customSwatchesSnippet = `<EuiColorPicker
     '#999',
     '#CCC',
   ]}
+/>`;
+
+const stopCustomSwatchesSnippet = `<EuiColorStops
+  label="Swatches"
+  onChange={handleChange}
+  colorStops={colorStops}
+  min={0}
+  max={100}
+  swatches={[
+    '#333',
+    '#666',
+    '#999',
+    '#CCC',
+  ]}
 />
 `;
 
@@ -83,6 +133,26 @@ const modesPickerSnippet = `// Gradient map only
   mode="picker"
 />
 `;
+const stopModesSwatchSnippet = `// Swatches only
+<EuiColorStops
+  label="Swatch"
+  onChange={handleChange}
+  colorStops={colorStops}
+  min={0}
+  max={100}
+  mode="swatch"
+/>
+`;
+const stopModesPickerSnippet = `// Gradient map only
+<EuiColorStops
+  label="Picker"
+  onChange={handleChange}
+  colorStops={colorStops}
+  min={0}
+  max={100}
+  mode="picker"
+/>
+`;
 
 import { Inline } from './inline';
 const inlineSource = require('!!raw-loader!./inline');
@@ -120,30 +190,60 @@ const kitchenSinkSnippet = `<EuiColorPicker
   ]}
 />
 `;
+const stopKitchenSinkSnippet = `<EuiColorStops
+  label="All the things"
+  onChange={handleChange}
+  colorStops={colorStops}
+  min={0}
+  max={100}
+  mode="default"
+  addStop={#FFF}
+  swatches={[
+    '#333',
+    '#666',
+    '#999',
+    '#CCC',
+    '#FFF',
+  ]}
+/>
+`;
 
 export const ColorPickerExample = {
-  title: 'Color Picker',
+  title: 'Color Selection',
   intro: (
     <React.Fragment>
       <EuiText>
         <p>
-          Color input component allowing for multiple methods of entry and
-          selection.
-        </p>
-        <p>
-          Direct text entry will only match hexadecimal (hex) colors, and output
-          values only return hex values. Spatial selection involves HSV
-          manipulaton, which is converted to hex.
-        </p>
-        <p>
-          Swatches allow consumers to predefine preferred or suggested choices.
-          The swatches must also be entered in hex format.
+          Two components exist to aid color selection:{' '}
+          <EuiCode>EuiColorPicker</EuiCode> and <EuiCode>EuiColorStops</EuiCode>
+          .
         </p>
       </EuiText>
+      <EuiSpacer />
     </React.Fragment>
   ),
   sections: [
     {
+      title: 'Color picker',
+      text: (
+        <React.Fragment>
+          <EuiText>
+            <p>
+              Color input component allowing for multiple methods of entry and
+              selection.
+            </p>
+            <p>
+              Direct text entry will only match hexadecimal (hex) colors, and
+              output values only return hex values. Spatial selection involves
+              HSV manipulaton, which is converted to hex.
+            </p>
+            <p>
+              Swatches allow consumers to predefine preferred or suggested
+              choices. The swatches must also be entered in hex format.
+            </p>
+          </EuiText>
+        </React.Fragment>
+      ),
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -158,6 +258,38 @@ export const ColorPickerExample = {
       snippet: colorPickerSnippet,
       demo: <ColorPicker />,
     },
+    {
+      title: 'Color stops',
+      text: (
+        <React.Fragment>
+          <EuiText>
+            <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>
+          </EuiText>
+        </React.Fragment>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: colorStopsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: colorStopsHtml,
+        },
+      ],
+      props: { EuiColorStops },
+      snippet: [
+        colorStopsSnippetStandard,
+        colorStopsSnippetAdd,
+        colorStopsSnippetFixed,
+      ],
+      demo: <ColorStops />,
+    },
     {
       title: 'Custom color swatches',
       source: [
@@ -177,54 +309,59 @@ export const ColorPickerExample = {
           the <EuiCode>swatches</EuiCode> prop.
         </p>
       ),
-      snippet: customSwatchesSnippet,
+      snippet: [customSwatchesSnippet, stopCustomSwatchesSnippet],
       demo: <CustomSwatches />,
     },
     {
-      title: 'Custom button',
+      title: 'Limited selection modes',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: customButtonSource,
+          code: modesSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: customButtonHtml,
+          code: modesHtml,
         },
       ],
       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.
+          By default, both swatch selection and the gradient color map will be
+          rendered. Use the <EuiCode>mode</EuiCode> prop to pass `swatch` for
+          swatch-only selection, or pass `picker` for gradient map and hue
+          slider selection without swatches.
         </p>
       ),
-      snippet: [customButtonSnippet, customBadgeSnippet],
-      demo: <CustomButton />,
+      snippet: [
+        modesSwatchSnippet,
+        modesPickerSnippet,
+        stopModesSwatchSnippet,
+        stopModesPickerSnippet,
+      ],
+      demo: <Modes />,
     },
     {
-      title: 'Limited selection modes',
+      title: 'Custom button',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: modesSource,
+          code: customButtonSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: modesHtml,
+          code: customButtonHtml,
         },
       ],
       text: (
         <p>
-          By default, both swatch selection and the gradient color map will be
-          rendered. Use the <EuiCode>mode</EuiCode> prop to pass `swatch` for
-          swatch-only selection, or pass `picker` for gradient map and hue
-          slider selection without swatches.
+          Available only in <EuiCode>EuiColorPicker</EuiCode>. 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>
       ),
-      snippet: [modesSwatchSnippet, modesPickerSnippet],
-      demo: <Modes />,
+      snippet: [customButtonSnippet, customBadgeSnippet],
+      demo: <CustomButton />,
     },
     {
       title: 'Inline',
@@ -240,8 +377,9 @@ export const ColorPickerExample = {
       ],
       text: (
         <p>
-          Set the <EuiCode>display</EuiCode> prop to `inline` to display the
-          color picker without an input or popover. Note that the{' '}
+          Available only in <EuiCode>EuiColorPicker</EuiCode>. Set the{' '}
+          <EuiCode>display</EuiCode> prop to `inline` to display the color
+          picker without an input or popover. Note that the{' '}
           <EuiCode>button</EuiCode> prop will be ignored in this case.
         </p>
       ),
@@ -262,15 +400,15 @@ export const ColorPickerExample = {
       ],
       text: (
         <p>
-          Demonstrating that <EuiCode>EuiColorPicker</EuiCode> can exist in
-          portal containers and that its popover position works in nested
+          Demonstrating that both color selection components can exist in portal
+          containers and that their popover positioning works in nested
           contexts.
         </p>
       ),
       demo: <Containers />,
     },
     {
-      title: 'Kitchen sink',
+      title: 'Option toggling',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -281,7 +419,7 @@ export const ColorPickerExample = {
           code: kitchenSinkHtml,
         },
       ],
-      snippet: kitchenSinkSnippet,
+      snippet: [kitchenSinkSnippet, stopKitchenSinkSnippet],
       demo: <KitchenSink />,
     },
   ],