docs: update EuiFacet docs examples

elastic · Jan 29, 2025 · f45a7dc · f45a7dc
1 parent e1228f3
commit f45a7dc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/packages/eui/src-docs/src/views/facet/facet_layout.js b/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],
     },
   ];
 

diff --git a/packages/website/docs/components/navigation/facet.mdx b/packages/website/docs/components/navigation/facet.mdx
@@ -54,7 +54,7 @@ import {
   EuiFacetGroup,
   EuiIcon,
   EuiAvatar,
-  euiPaletteColorBlind,
+  useEuiPaletteColorBlind,
 } from '@elastic/eui';
 
 export default () => {
@@ -64,6 +64,8 @@ export default () => {
   const [loading, setLoading] = useState(false);
   const [selectedOptionId, setSelectedOptionId] = useState(undefined);
 
+  const euiPaletteColorBlind = useEuiPaletteColorBlind();
+
   const facet0Clicked = (id) => {
     setIcon(false);
     setDisabled(false);
@@ -113,42 +115,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],
     },
   ];
 
@@ -219,6 +221,8 @@ export default () => {
   const [loading, setLoading] = useState(false);
   const [selectedOptionId, setSelectedOptionId] = useState(undefined);
 
+  const euiPaletteColorBlind = useEuiPaletteColorBlind();
+
   const facet0Clicked = (id) => {
     setIcon(false);
     setDisabled(false);
@@ -268,42 +272,42 @@ export default () => {
       id: 'facetHorizontal0',
       label: 'Simple, no icon',
       quantity: 6,
-      iconColor: euiPaletteColorBlind()[0],
+      iconColor: euiPaletteColorBlind[0],
       onClick: facet0Clicked,
     },
     {
       id: 'facetHorizontal1',
       label: 'Label or color indicator',
       quantity: 60,
-      iconColor: euiPaletteColorBlind()[1],
+      iconColor: euiPaletteColorBlind[1],
       onClick: facet1Clicked,
     },
     {
       id: 'facetHorizontal2',
       label: 'Disable all others',
       quantity: 600,
-      iconColor: euiPaletteColorBlind()[2],
+      iconColor: euiPaletteColorBlind[2],
       onClick: facet2Clicked,
     },
     {
       id: 'facetHorizontal3',
       label: 'Avatars instead of icons',
       quantity: 60,
-      iconColor: euiPaletteColorBlind()[3],
+      iconColor: euiPaletteColorBlind[3],
       onClick: facet3Clicked,
     },
     {
       id: 'facetHorizontal4',
       label: 'Show all as loading',
       quantity: 6,
-      iconColor: euiPaletteColorBlind()[4],
+      iconColor: euiPaletteColorBlind[4],
       onClick: facet4Clicked,
     },
     {
       id: 'facetHorizontal5',
       label: 'Just here to show truncation of really long labels',
       quantity: 0,
-      iconColor: euiPaletteColorBlind()[5],
+      iconColor: euiPaletteColorBlind[5],
     },
   ];