Add EuiColorPaletteDisplay (#3865)

* Initial color palette display code * Palette display section and testing one color * Type gradient as default * Using spans for linear fixed gradient with stops * Adding examples and improving code * Adding tests * Adding rest to spread required props. Adding classNames. * Better examples * CL * Is new * Adding line break * Adding a bleed area for fixed palettes * Placing CL into master * Replacing divs with spans * Removing classname * Code improvements * Update src/components/color_picker/color_palette_display/_color_palette_display.scss Co-authored-by: Caroline Horn <[email protected]> * Update src-docs/src/views/color_picker/color_palette_picker.js Co-authored-by: Caroline Horn <[email protected]> * Fixing ESLint warning * Improving complex example * ESLint * Complex example title size * Complex example with column compressed * Importing color prop with prop loader * ESLint * New structure * Adding sizes * ESLint * Update src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx Co-authored-by: Greg Thompson <[email protected]> * Update src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx Co-authored-by: Greg Thompson <[email protected]> * Adding getFixedLinearGradient * Small fix in palette picker example * typescript help * Addressing PR review * CL Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Greg Thompson <[email protected]>
elastic · Nov 5, 2020 · 671a075 · 671a075
1 parent 369aac7
commit 671a075
Show file tree

Hide file tree

Showing 23 changed files with 1,145 additions and 116 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865)) 
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
 
 **Bug fixes**

diff --git a/src-docs/src/views/color_picker/color_palette_display.js b/src-docs/src/views/color_picker/color_palette_display.js
@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import {
+  euiPaletteColorBlind,
+  euiPaletteForStatus,
+  euiPaletteForTemperature,
+  euiPaletteComplimentary,
+  euiPaletteNegative,
+  euiPalettePositive,
+  euiPaletteCool,
+  euiPaletteWarm,
+  euiPaletteGray,
+} from '../../../../src/services/color';
+
+import {
+  EuiColorPaletteDisplay,
+  EuiColorPalettePicker,
+  EuiFormRow,
+  EuiSpacer,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiRange,
+  EuiSwitch,
+  EuiCode,
+  EuiButtonEmpty,
+  EuiSelect,
+} from '../../../../src/components/';
+
+const paletteWithStops = [
+  {
+    stop: 100,
+    color: 'white',
+  },
+  {
+    stop: 250,
+    color: 'lightgray',
+  },
+  {
+    stop: 320,
+    color: 'gray',
+  },
+  {
+    stop: 470,
+    color: 'black',
+  },
+];
+
+const paletteData = {
+  euiPaletteForStatus,
+  euiPaletteForTemperature,
+  euiPaletteComplimentary,
+  euiPaletteNegative,
+  euiPalettePositive,
+  euiPaletteCool,
+  euiPaletteWarm,
+  euiPaletteGray,
+};
+
+const paletteNames = Object.keys(paletteData);
+
+const sizes = [
+  { value: 'xs', text: 'Extra small' },
+  { value: 's', text: 'Small' },
+  { value: 'm', text: 'Medium' },
+];
+
+export default () => {
+  const [palette, setPalette] = useState('1');
+  const [categories, setCategories] = useState(5);
+  const [selectionType, setSelectionType] = useState(true);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [size, setSize] = useState(sizes[1].value);
+
+  const onChangeSize = (e) => {
+    setSize(e.target.value);
+  };
+
+  const onChange = (e) => {
+    setCategories(parseInt(e.target.value));
+  };
+
+  const palettes = paletteNames.map((paletteName, index) => {
+    return {
+      value: String(index + 1),
+      title: paletteName,
+      palette: paletteData[paletteNames[index]](categories),
+      type: selectionType ? 'fixed' : 'gradient',
+    };
+  });
+
+  const selectedPalette = paletteData[paletteNames[palette - 1]](categories);
+
+  const onButtonClick = () =>
+    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonEmpty
+      onClick={onButtonClick}
+      iconType="controlsVertical"
+      aria-label="Open settings"
+      color="text"
+      size="xs">
+      Customize
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <>
+      <EuiTitle size="xxxs">
+        <h3>Fixed</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiColorPaletteDisplay type="fixed" palette={euiPaletteColorBlind()} />
+      <EuiSpacer />
+      <EuiTitle size="xxxs">
+        <h3>Gradient</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiColorPaletteDisplay
+        type="gradient"
+        palette={euiPaletteColorBlind()}
+      />
+      <EuiSpacer />
+      <EuiTitle size="xxxs">
+        <h3>Fixed with stops</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiColorPaletteDisplay type="fixed" palette={paletteWithStops} />
+      <EuiSpacer />
+      <EuiTitle size="xxxs">
+        <h3>Gradient with stops</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiColorPaletteDisplay type="gradient" palette={paletteWithStops} />
+      <EuiSpacer />
+      <EuiTitle size="xxxs">
+        <h3>Complex example</h3>
+      </EuiTitle>
+      <EuiSpacer size="xs" />
+      <EuiFlexGroup alignItems="center" gutterSize="xs">
+        <EuiFlexItem>
+          <EuiColorPaletteDisplay
+            type={selectionType ? 'fixed' : 'gradient'}
+            palette={selectedPalette}
+            size={size}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            panelStyle={{ minWidth: 380 }}
+            ownFocus
+            button={button}
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}>
+            <EuiFormRow label="Color palette" display="columnCompressed">
+              <EuiColorPalettePicker
+                palettes={palettes}
+                onChange={setPalette}
+                valueOfSelected={palette}
+                selectionDisplay="title"
+                compressed
+              />
+            </EuiFormRow>
+            <EuiFormRow label="Number of stops" display="columnCompressed">
+              <EuiRange
+                value={categories}
+                onChange={onChange}
+                min={1}
+                max={10}
+                compressed
+                showValue
+              />
+            </EuiFormRow>
+            <EuiFormRow label="Size" display="columnCompressed">
+              <EuiSelect
+                options={sizes}
+                value={size}
+                onChange={(e) => onChangeSize(e)}
+                compressed
+              />
+            </EuiFormRow>
+            <EuiFormRow
+              label={
+                <span>
+                  Display <EuiCode>fixed</EuiCode>
+                </span>
+              }
+              display="columnCompressedSwitch">
+              <EuiSwitch
+                checked={selectionType}
+                onChange={() => setSelectionType(!selectionType)}
+                compressed
+              />
+            </EuiFormRow>
+          </EuiPopover>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/...ews/color_picker/color_palette_picker.tsx → ...iews/color_picker/color_palette_picker.js b/...ews/color_picker/color_palette_picker.tsx → ...iews/color_picker/color_palette_picker.js
@@ -4,17 +4,17 @@ import {
   euiPaletteForStatus,
   euiPaletteForTemperature,
 } from '../../../../src/services';
-import { EuiSwitch } from '../../../../src/components/form';
-import { EuiSpacer } from '../../../../src/components/spacer';
-import { EuiCode } from '../../../../src/components/code';
+
 import {
+  EuiSwitch,
+  EuiSpacer,
+  EuiCode,
   EuiColorPalettePicker,
-  EuiColorPalettePickerPaletteProps,
-} from '../../../../src/components/color_picker/color_palette_picker';
-// @ts-ignore importing from a JS file
+} from '../../../../src/components/';
+
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-const palettes: EuiColorPalettePickerPaletteProps[] = [
+const palettes = [
   {
     value: 'pallette_1',
     title: 'EUI color blind (fixed)',
@@ -23,12 +23,18 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [
   },
   {
     value: 'pallette_2',
+    title: 'EUI palette for status (gradient)',
+    palette: euiPaletteForStatus(5),
+    type: 'gradient',
+  },
+  {
+    value: 'pallette_3',
     title: 'EUI palette for temperature (fixed)',
     palette: euiPaletteForTemperature(5),
     type: 'fixed',
   },
   {
-    value: 'pallette_3',
+    value: 'pallette_4',
     title: 'Grayscale (gradient with stops)',
     palette: [
       {
@@ -37,11 +43,11 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [
       },
       {
         stop: 250,
-        color: 'gray',
+        color: 'lightgray',
       },
       {
-        stop: 350,
-        color: 'dimgray',
+        stop: 320,
+        color: 'gray',
       },
       {
         stop: 470,
@@ -51,10 +57,27 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [
     type: 'gradient',
   },
   {
-    value: 'pallette_4',
-    title: 'EUI palette for status (gradient)',
-    palette: euiPaletteForStatus(5),
-    type: 'gradient',
+    value: 'pallette_5',
+    title: 'Grayscale (fixed with stops)',
+    palette: [
+      {
+        stop: 100,
+        color: 'white',
+      },
+      {
+        stop: 250,
+        color: 'lightgray',
+      },
+      {
+        stop: 320,
+        color: 'gray',
+      },
+      {
+        stop: 470,
+        color: 'black',
+      },
+    ],
+    type: 'fixed',
   },
   {
     value: 'custom',
@@ -63,7 +86,7 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [
   },
 ];
 
-export const ColorPalettePicker = () => {
+export default () => {
   const [selectionDisplay, setSelectionDisplay] = useState(false);
   const [pallette, setPallette] = useState('pallette_1');