[Visual Refresh] Provide hooks for color palette functions (#8284)

packages/eui/src-docs/src/views/color_palette/color_palette_custom.js

@@ -8,18 +8,23 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { euiPaletteColorBlind, colorPalette } from '../../../../src/services';
+import {
+  colorPalette,
+  useEuiPaletteColorBlind,
+} from '../../../../src/services';
 import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared';
 
-const customPalettes = [
-  [euiPaletteColorBlind()[3]],
-  [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]],
-  [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]],
-];
-
 export default () => {
   const [length, setLength] = useState(10);
 
+  const euiPaletteColorBlind = useEuiPaletteColorBlind();
+
+  const customPalettes = [
+    [euiPaletteColorBlind[3]],
+    [euiPaletteColorBlind[3], euiPaletteColorBlind[4]],
+    [euiPaletteColorBlind[3], euiPaletteColorBlind[4]],
+  ];
+
   const onLengthChange = (e) => {
     setLength(e.currentTarget.value);
   };

packages/eui/src-docs/src/views/color_picker/color_palette_display.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common';
 import {
-  euiPaletteColorBlind,
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplementary,
@@ -11,6 +10,7 @@ import {
   euiPaletteWarm,
   euiPaletteGray,
   EUI_VIS_COLOR_STORE,
+  useEuiPaletteColorBlind,
 } from '../../../../src/services/color';
 
 import {
@@ -75,6 +75,8 @@ export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [size, setSize] = useState(sizes[1].value);
 
+  const euiPaletteColorBlind = useEuiPaletteColorBlind();
+
   const getPalettes = useCallback(
     () =>
       paletteNames.map((paletteName, index) => {
@@ -135,16 +137,13 @@ export default () => {
         <h3>Fixed</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiColorPaletteDisplay type="fixed" palette={euiPaletteColorBlind()} />
+      <EuiColorPaletteDisplay type="fixed" palette={euiPaletteColorBlind} />
       <EuiSpacer />
       <EuiTitle size="xxxs">
         <h3>Gradient</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiColorPaletteDisplay
-        type="gradient"
-        palette={euiPaletteColorBlind()}
-      />
+      <EuiColorPaletteDisplay type="gradient" palette={euiPaletteColorBlind} />
       <EuiSpacer />
       <EuiTitle size="xxxs">
         <h3>Fixed with stops</h3>

packages/eui/src-docs/src/views/combo_box/colors.js

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { EuiComboBox } from '../../../../src/components';
-import { euiPaletteColorBlindBehindText } from '../../../../src/services';
+import { useEuiPaletteColorBlindBehindText } from '../../../../src/services';
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-const visColorsBehindText = euiPaletteColorBlindBehindText();
-const optionsStatic = [
+const getOptionsStatic = (visColorsBehindText) => [
   {
     label: 'Titan',
     'data-test-subj': 'titanOption',
@@ -51,9 +50,17 @@ const optionsStatic = [
 ];
 
 export default () => {
-  const [options, setOptions] = useState(optionsStatic);
+  const visColorsBehindText = useEuiPaletteColorBlindBehindText();
+
+  const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText));
   const [selectedOptions, setSelected] = useState([options[2], options[5]]);
 
+  useEffect(() => {
+    const updatedOptions = getOptionsStatic(visColorsBehindText);
+    setOptions(updatedOptions);
+    setSelected([updatedOptions[2], updatedOptions[5]]);
+  }, [visColorsBehindText]);
+
   const onChange = (selectedOptions) => {
     setSelected(selectedOptions);
   };

packages/eui/src-docs/src/views/combo_box/render_option.js

@@ -1,18 +1,16 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import {
   EuiComboBox,
   EuiHighlight,
   EuiHealth,
 } from '../../../../src/components';
 import {
-  euiPaletteColorBlind,
-  euiPaletteColorBlindBehindText,
+  useEuiPaletteColorBlind,
+  useEuiPaletteColorBlindBehindText,
 } from '../../../../src/services';
 
-const visColors = euiPaletteColorBlind();
-const visColorsBehindText = euiPaletteColorBlindBehindText();
-const optionsStatic = [
+const getOptionsStatic = (visColorsBehindText) => [
   {
     value: {
       size: 5,
@@ -88,9 +86,18 @@ const optionsStatic = [
 ];
 
 export default () => {
-  const [options, setOptions] = useState(optionsStatic);
+  const visColors = useEuiPaletteColorBlind();
+  const visColorsBehindText = useEuiPaletteColorBlindBehindText();
+
+  const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText));
   const [selectedOptions, setSelected] = useState([options[2], options[5]]);
 
+  useEffect(() => {
+    const updatedOptions = getOptionsStatic(visColorsBehindText);
+    setOptions(updatedOptions);
+    setSelected([updatedOptions[2], updatedOptions[5]]);
+  }, [visColorsBehindText]);
+
   const onChange = (selectedOptions) => {
     setSelected(selectedOptions);
   };

packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx

@@ -18,10 +18,10 @@ import {
 } from '../../../../src/components';
 
 import {
-  euiPaletteForTemperature,
-  euiPaletteColorBlind,
-  euiPaletteGray,
   useEuiTheme,
+  useEuiPaletteColorBlind,
+  useEuiPaletteForTemperature,
+  useEuiPaletteGray,
 } from '../../../../src/services';
 
 import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from './data';
@@ -40,15 +40,16 @@ export default () => {
   const [formattedData, setFormattedData] = useState(false);
   const [grouped, setGrouped] = useState(false);
 
-  let color = euiPaletteColorBlind({ rotations: 2, order: 'group' }).slice(
+  const paletteTemperature0 = useEuiPaletteForTemperature(0);
+  const paletteTemperature3 = useEuiPaletteForTemperature(3);
+  const paletteGray = useEuiPaletteGray(5);
+
+  let color = useEuiPaletteColorBlind({ rotations: 2, order: 'group' }).slice(
     18,
     20
   );
   if (formatted) {
-    color = [
-      euiPaletteForTemperature(0)[0],
-      euiPaletteGray(5)[isDarkTheme ? 4 : 0],
-    ];
+    color = [paletteTemperature0[0], paletteGray[isDarkTheme ? 4 : 0]];
   }
 
   let data;
@@ -58,7 +59,7 @@ export default () => {
       ? orderBy(DAYS_OF_RAIN, ['precipitation', 'days'], ['desc', 'asc'])
       : DAYS_OF_RAIN;
     usesRainData = true;
-    color = euiPaletteForTemperature(3);
+    color = paletteTemperature3;
   } else {
     const DATASET = grouped ? GITHUB_DATASET_MOD : GITHUB_DATASET;
     data = orderBy(DATASET, 'issueType', 'asc');

packages/eui/src-docs/src/views/elastic_charts/theming.tsx

@@ -8,6 +8,7 @@ import {
   BarSeries,
   DataGenerator,
 } from '@elastic/charts';
+import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common';
 
 import {
   EuiSpacer,
@@ -29,7 +30,6 @@ import {
   EUI_VIS_COLOR_STORE,
 } from '../../../../src/services';
 import { useChartBaseTheme } from './utils/use_chart_base_theme';
-import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common';
 
 const getPaletteData = () => ({
   euiPaletteColorBlind,

packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx

@@ -18,17 +18,18 @@ import {
 
 import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared';
 import {
-  euiPaletteColorBlind,
   euiPaletteGreen,
   euiPaletteForStatus,
   euiPaletteGray,
+  useEuiPaletteColorBlind,
 } from '../../../../src/services';
 import type { EuiPalette } from '../../../../src/services/color/eui_palettes';
 import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
+  const euiPaletteColorBlind = useEuiPaletteColorBlind();
   const chartBaseTheme = useChartBaseTheme();
-  const highlightColor = euiPaletteColorBlind()[2];
+  const highlightColor = euiPaletteColorBlind[2];
 
   const idPrefix = 'colorType';
 
@@ -246,7 +247,7 @@ export default () => {
           data={data}
           xAccessor={'x'}
           yAccessors={['y']}
-          color={[euiPaletteColorBlind()[index < 2 ? 0 : 1]]}
+          color={[euiPaletteColorBlind[index < 2 ? 0 : 1]]}
           lineSeriesStyle={{
             line: {
               strokeWidth: isOdd ? 1 : 6,

packages/eui/src-docs/src/views/elastic_charts/treemap.tsx

@@ -8,7 +8,7 @@ import {
   EuiTitle,
   EuiSpacer,
 } from '../../../../src/components';
-import { euiPaletteColorBlind } from '../../../../src/services';
+import { useEuiPaletteColorBlind } from '../../../../src/services';
 
 import { GITHUB_DATASET_MOD } from './data';
 import { useChartBaseTheme } from './utils/use_chart_base_theme';
@@ -20,7 +20,7 @@ export default () => {
   /**
    * Create a 3 rotation palette (one for each level)
    */
-  const groupedPalette = euiPaletteColorBlind({
+  const groupedPalette = useEuiPaletteColorBlind({
     rotations: 3,
     order: 'group',
     sortBy: 'natural',

packages/eui/src-docs/src/views/facet/facet_layout.js

@@ -1,21 +1,22 @@
 import React, { useState } from 'react';
 
+import { useEuiPaletteColorBlind } from '../../../../src/services';
 import {
   EuiFacetButton,
   EuiFacetGroup,
   EuiIcon,
   EuiAvatar,
 } from '../../../../src/components';
 
-import { euiPaletteColorBlind } from '../../../../src/services';
-
 export default () => {
   const [icon, setIcon] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [avatars, setAvatars] = useState(false);
   const [loading, setLoading] = useState(false);
   const [selectedOptionId, setSelectedOptionId] = useState(undefined);
 
+  const euiPaletteColorBlind = useEuiPaletteColorBlind();
+
   const facet0Clicked = (id) => {
     setIcon(false);
     setDisabled(false);
@@ -65,42 +66,42 @@ export default () => {
       id: 'facet0',
       label: 'Simple, no icon',
       quantity: 6,
-      iconColor: euiPaletteColorBlind()[0],
+      iconColor: euiPaletteColorBlind[0],
       onClick: facet0Clicked,
     },
     {
       id: 'facet1',
       label: 'Label or color indicator',
       quantity: 60,
-      iconColor: euiPaletteColorBlind()[1],
+      iconColor: euiPaletteColorBlind[1],
       onClick: facet1Clicked,
     },
     {
       id: 'facet2',
       label: 'Disable all others',
       quantity: 600,
-      iconColor: euiPaletteColorBlind()[2],
+      iconColor: euiPaletteColorBlind[2],
       onClick: facet2Clicked,
     },
     {
       id: 'facet3',
       label: 'Avatars instead of icons',
       quantity: 60,
-      iconColor: euiPaletteColorBlind()[3],
+      iconColor: euiPaletteColorBlind[3],
       onClick: facet3Clicked,
     },
     {
       id: 'facet4',
       label: 'Show all as loading',
       quantity: 6,
-      iconColor: euiPaletteColorBlind()[4],
+      iconColor: euiPaletteColorBlind[4],
       onClick: facet4Clicked,
     },
     {
       id: 'facet5',
       label: 'Just here to show truncation of really long labels',
       quantity: 0,
-      iconColor: euiPaletteColorBlind()[5],
+      iconColor: euiPaletteColorBlind[5],
     },
   ];