Add EuiColorPaletteDisplay

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `30.2.0`.
+- Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865)) 
 
 ## [`30.2.0`](https://github.com/elastic/eui/tree/v30.2.0)
 

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>
+    </>
+  );
+};

src-docs/src/views/color_picker/color_palette_picker.tsx → src-docs/src/views/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');