[docs] Fix Colors > Contrast docs page (#7506)

elastic · Feb 2, 2024 · 2477e79 · 2477e79
1 parent f67f5f0
commit 2477e79
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 29 deletions.
diff --git a/src-docs/src/views/theme/color/_contrast_js.tsx b/src-docs/src/views/theme/color/_contrast_js.tsx
@@ -56,7 +56,12 @@ export const ColorSectionJS: FunctionComponent<ColorSection> = ({
       }}
     >
       <EuiText size="xs">
-        <EuiFlexGrid columns={2} direction="column" gutterSize="s">
+        <EuiFlexGrid
+          css={{ gridTemplateRows: 'auto', gridAutoFlow: 'row' }}
+          columns={2}
+          direction="column"
+          gutterSize="s"
+        >
           {showTextVariants && colorIsCore(colorValue) && (
             <ColorsContrastItem
               foreground={`${color}Text`}
@@ -166,6 +171,8 @@ color: $\{euiTheme.colors.${foreground}};`;
               color: foregroundColor,
               borderRadius: euiTheme.border.radius.medium,
             }}
+            // @ts-expect-error - this isn't a valid color type, we mostly just want to disable the default EuiListGroupItem button color from being rendered since we're setting our own via `style`
+            color="inherit"
             label={sanitizeColorName(foreground)}
           />
         )}

diff --git a/src-docs/src/views/theme/color/_contrast_sass.tsx b/src-docs/src/views/theme/color/_contrast_sass.tsx
@@ -83,7 +83,12 @@ export const ColorSectionSass: FunctionComponent<ColorSection> = ({
       style={{ background: matchPanelColor ? palette[color] : undefined }}
     >
       <EuiText size="xs">
-        <EuiFlexGrid columns={2} direction="column" gutterSize="s">
+        <EuiFlexGrid
+          css={{ gridTemplateRows: 'auto', gridAutoFlow: 'row' }}
+          columns={2}
+          direction="column"
+          gutterSize="s"
+        >
           {showTextVariants && colorIsCore(color) && (
             <ColorsContrastItem
               foreground={`${color}Text`}
@@ -184,6 +189,8 @@ color: $${foreground};`;
               color: foregroundColor,
               borderRadius: euiTheme.border.radius.medium,
             }}
+            // @ts-expect-error - this isn't a valid color type, we mostly just want to disable the default EuiListGroupItem button color from being rendered since we're setting our own via `style`
+            color="inherit"
             label={sanitizeColorName(foreground)}
           />
         )}

diff --git a/src-docs/src/views/theme/color/_contrast_slider.tsx b/src-docs/src/views/theme/color/_contrast_slider.tsx
@@ -21,7 +21,7 @@ import {
   ratingAll,
 } from './_contrast_utilities';
 
-type ContrastSlider = EuiFlexGroupProps & {
+type ContrastSlider = Omit<EuiFlexGroupProps, 'onChange'> & {
   contrastValue: EuiRangeProps['value'];
   showTextVariants: boolean;
   onChange?: (value: number | string, checked: boolean) => void;

diff --git a/src-docs/src/views/theme/color/contrast.tsx b/src-docs/src/views/theme/color/contrast.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useCallback } from 'react';
 import { ThemeContext } from '../../../components/with_theme';
 
 import {
@@ -28,7 +28,7 @@ import { _EuiThemeColorsMode } from '../../../../../src/global_styling/variables
 import {
   BACKGROUND_COLORS,
   _EuiBackgroundColor,
-  useEuiBackgroundColor,
+  euiBackgroundColor,
 } from '../../../../../src/global_styling';
 import {
   BUTTON_COLORS,
@@ -48,23 +48,22 @@ export const contrastSections = [
 const background_colors = BACKGROUND_COLORS.filter(
   (color) => color !== 'transparent'
 );
+const backgroundButtons = [
+  'container',
+  // 'hover', Commenting out for now since contrast can't be calculated on transparent values
+  'button',
+].map((m) => {
+  return {
+    id: m,
+    label: m,
+  };
+});
 
 export default () => {
   const euiTheme = useEuiTheme();
   const [showTextVariants, setShowTextVariants] = useState(true);
   const [contrastValue, setContrastValue] = useState(4.5);
 
-  const backgroundButtons = [
-    'container',
-    // 'hover', Commenting out for now since contrast can't be calculated on transparent values
-    'button',
-  ].map((m) => {
-    return {
-      id: m,
-      label: m,
-    };
-  });
-
   const [backgroundColors, setBackgroundColors] =
     useState<any>(background_colors);
   const [backgroundFunction, setBackgroundFunction] = useState<any>(
@@ -74,7 +73,7 @@ export default () => {
     backgroundButtons[0].id
   );
 
-  const switchBackgroundColors = (id: string) => {
+  const switchBackgroundColors = useCallback((id: string) => {
     switch (id) {
       case 'container':
         setBackgroundSelected(id);
@@ -92,7 +91,7 @@ export default () => {
         setBackgroundFunction('euiButtonColor(color)');
         break;
     }
-  };
+  }, []);
 
   const showSass = useContext(ThemeContext).themeLanguage.includes('sass');
 
@@ -127,12 +126,8 @@ export default () => {
           <ContrastSlider
             contrastValue={contrastValue}
             showTextVariants={showTextVariants}
-            // @ts-ignore Help
-            onChange={(
-              sliderValue: React.SetStateAction<number>,
-              toggleChecked: React.SetStateAction<boolean>
-            ) => {
-              setContrastValue(sliderValue);
+            onChange={(sliderValue, toggleChecked) => {
+              setContrastValue(Number(sliderValue));
               setShowTextVariants(toggleChecked);
             }}
           />
@@ -301,7 +296,9 @@ export default () => {
                         <ColorSectionJS
                           key={color}
                           color={color as keyof _EuiThemeColorsMode}
-                          colorValue={useEuiBackgroundColor(
+                          // Can't use hooks in a conditional switch, so use the non-hook version
+                          colorValue={euiBackgroundColor(
+                            euiTheme,
                             color as _EuiBackgroundColor
                           )}
                           hookName="useEuiBackgroundColor"
@@ -318,7 +315,9 @@ export default () => {
                         <ColorSectionJS
                           key={color}
                           color={color as keyof _EuiThemeColorsMode}
-                          colorValue={useEuiBackgroundColor(
+                          // Can't use hooks in a conditional switch
+                          colorValue={euiBackgroundColor(
+                            euiTheme,
                             color as _EuiBackgroundColor,
                             { method: 'transparent' }
                           )}

diff --git a/src-docs/src/views/theme/color/tokens.tsx b/src-docs/src/views/theme/color/tokens.tsx
@@ -32,8 +32,8 @@ export const colorsInfo = {
   title: 'Colors',
   notice: <ThemeNotice />,
   showThemeLanguageToggle: true,
-  description: (
-    <>
+  intro: (
+    <EuiText grow={false}>
       <p>
         Elastic UI builds with a very limited palette. It uses a core set of
         three colors with a green / orange / red qualitative set and combined
@@ -46,7 +46,7 @@ export const colorsInfo = {
         their <strong>evaluated</strong> value but by their{' '}
         <strong>purpose</strong>.
       </p>
-    </>
+    </EuiText>
   ),
 };