Add EuiColorPalettePicker (elastic#3192)

* Adding initial code * Adding initial code * Adding getLinearGradient method * Improving palettes * initial tests * More improvements * Deleting palettes file * Adding display togles * Simplifying button * Custom option value * Update some types * getFixedLinearGradient * Text as an option * Improving props description * Improving sass * Adding selectionDisplay * More examples * Addressing pr review * Update src-docs/src/views/color_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <[email protected]> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <[email protected]> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <[email protected]> * Extending EuiSuperSelectProp * Simplifying structure * Changelog * Improving example * Improving snippet * Adding more tests * Improving props description * Improving docs text * Improve text * Addressing review * Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson <[email protected]> * Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson <[email protected]> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson <[email protected]> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson <[email protected]> * Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson <[email protected]> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson <[email protected]> * Improving TS * Improving palette doc * Palette doc * Changing name of gray palette * Slimming the description a bit * removing console log * more strict types * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: cchaos <[email protected]> Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Greg Thompson <[email protected]>
daveyholler · Jun 3, 2020 · 02edfaa · 02edfaa
1 parent ed9d7b7
commit 02edfaa
Show file tree

Hide file tree

Showing 14 changed files with 967 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
 - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))
+- Added `EuiColorPalettePicker` component ([#3192](https://github.com/elastic/eui/pull/3192))
 - Added `left-start` popover placement to `EuiDatePicker` ([#3511](https://github.com/elastic/eui/pull/3511))
 - Added `theme` prop to `EuiHeader` ([#3524](https://github.com/elastic/eui/pull/3524))
 - Added `.euiHeaderLink-isActive` class to `EuiHeaderLink` when `isActive` ([#3524](https://github.com/elastic/eui/pull/3524))
@@ -50,7 +51,6 @@
 - Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
 - Improved contrast for `EuiCollapsibleNav` close button ([#3465](https://github.com/elastic/eui/pull/3465))
-- Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 
 **Bug Fixes**
 

diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import {
+  euiPaletteColorBlind,
+  euiPaletteForStatus,
+  euiPaletteForTemperature,
+} from '../../../../src/services';
+import { EuiSwitch } from '../../../../src/components/form';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiCode } from '../../../../src/components/code';
+import {
+  EuiColorPalettePicker,
+  EuiColorPalettePickerPaletteProps,
+} from '../../../../src/components/color_picker/color_palette_picker';
+// @ts-ignore
+import { DisplayToggles } from '../form_controls/display_toggles';
+
+const palettes: EuiColorPalettePickerPaletteProps[] = [
+  {
+    value: 'pallette_1',
+    title: 'EUI color blind (fixed)',
+    palette: euiPaletteColorBlind(),
+    type: 'fixed',
+  },
+  {
+    value: 'pallette_2',
+    title: 'EUI palette for temperature (fixed)',
+    palette: euiPaletteForTemperature(5),
+    type: 'fixed',
+  },
+  {
+    value: 'pallette_3',
+    title: 'Grayscale (gradient with stops)',
+    palette: [
+      {
+        stop: 100,
+        color: 'white',
+      },
+      {
+        stop: 250,
+        color: 'gray',
+      },
+      {
+        stop: 350,
+        color: 'dimgray',
+      },
+      {
+        stop: 470,
+        color: 'black',
+      },
+    ],
+    type: 'gradient',
+  },
+  {
+    value: 'pallette_4',
+    title: 'EUI palette for status (gradient)',
+    palette: euiPaletteForStatus(5),
+    type: 'gradient',
+  },
+  {
+    value: 'custom',
+    title: 'Plain text as a custom option',
+    type: 'text',
+  },
+];
+
+export const ColorPalettePicker = () => {
+  const [selectionDisplay, setSelectionDisplay] = useState(false);
+  const [pallette, setPallette] = useState('pallette_1');
+
+  return (
+    <>
+      <EuiSwitch
+        label={
+          <span>
+            Display selected item as a <EuiCode>title</EuiCode>
+          </span>
+        }
+        checked={selectionDisplay}
+        onChange={() => setSelectionDisplay(!selectionDisplay)}
+      />
+      <EuiSpacer />
+      <DisplayToggles canPrepend={true} canAppend={true} canReadOnly={false}>
+        <EuiColorPalettePicker
+          palettes={palettes}
+          onChange={setPallette}
+          valueOfSelected={pallette}
+          selectionDisplay={selectionDisplay ? 'title' : 'palette'}
+        />
+      </DisplayToggles>
+    </>
+  );
+};
diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
@@ -7,10 +7,12 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiCode,
   EuiColorPicker,
+  EuiColorPalettePicker,
   EuiColorStops,
   EuiSpacer,
   EuiText,
 } from '../../../../src/components';
+import { EuiColorPalettePickerPalette } from './props';
 
 import { ColorPicker } from './color_picker';
 const colorPickerSource = require('!!raw-loader!./color_picker');
@@ -23,6 +25,23 @@ const colorPickerSnippet = `<EuiColorPicker
 />
 `;
 
+import { ColorPalettePicker } from './color_palette_picker';
+const colorPalettePickerSource = require('!!raw-loader!./color_palette_picker');
+const colorPalettePickerHtml = renderToHtml(ColorPalettePicker);
+const colorPalettePickerSnippet = `<EuiColorPalettePicker
+  palettes={[
+    {
+      value: 'palette1',
+      title: 'Palette 1',
+      palette: euiPaletteColorBlind(),
+      type: 'fixed',
+    },
+  ]}
+  onChange={onPaletteChange}
+  valueOfSelected={palette}
+/>
+`;
+
 import { ColorStops } from './color_stops';
 const colorStopsSource = require('!!raw-loader!./color_stops');
 const colorStopsHtml = renderToHtml(ColorStops);
@@ -248,8 +267,10 @@ export const ColorPickerExample = {
     <React.Fragment>
       <EuiText>
         <p>
-          Two components exist to aid color selection:{' '}
-          <strong>EuiColorPicker</strong> and <strong>EuiColorStops</strong>.
+          Three components exist to aid color selection:{' '}
+          <strong>EuiColorPicker</strong>,{' '}
+          <strong>EuiColorPalettePicker</strong> and{' '}
+          <strong>EuiColorStops</strong>.
         </p>
       </EuiText>
       <EuiSpacer />
@@ -291,6 +312,39 @@ export const ColorPickerExample = {
       snippet: colorPickerSnippet,
       demo: <ColorPicker />,
     },
+    {
+      title: 'Color palette picker',
+      text: (
+        <React.Fragment>
+          <EuiText>
+            <p>
+              Use <strong>EuiColorPalettePicker</strong> to select palettes to
+              apply colors to data visualization like maps and charts.
+            </p>
+            <p>
+              Use the <EuiCode>palettes</EuiCode> prop to pass your palettes as
+              an array of objects. For each object, you should pass a palette
+              (array of hex values) and specify the <EuiCode>type</EuiCode>. Use{' '}
+              <EuiCode>fixed</EuiCode> palettes for categorical data and{' '}
+              <EuiCode>gradient</EuiCode> palettes for continuous data.
+            </p>
+          </EuiText>
+        </React.Fragment>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: colorPalettePickerSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: colorPalettePickerHtml,
+        },
+      ],
+      props: { EuiColorPalettePicker, EuiColorPalettePickerPalette },
+      snippet: colorPalettePickerSnippet,
+      demo: <ColorPalettePicker />,
+    },
     {
       title: 'Color stops',
       text: (

diff --git a/src-docs/src/views/color_picker/props.tsx b/src-docs/src/views/color_picker/props.tsx
@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from 'react';
+
+import { EuiColorPalettePickerPaletteProps } from '../../../../src/components/color_picker/color_palette_picker';
+
+export const EuiColorPalettePickerPalette: FunctionComponent<
+  EuiColorPalettePickerPaletteProps
+> = () => <div />;
diff --git a/src/components/color_picker/_index.scss b/src/components/color_picker/_index.scss
@@ -4,3 +4,4 @@
 @import 'hue';
 @import 'saturation';
 @import 'color_stops/index';
+@import 'color_palette_picker/index';