From 5b11724fa57a22543cd28dfbc4bd732ec22ae829 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 2 Feb 2024 11:06:46 -0800 Subject: [PATCH 1/6] Fix `EuiListGroupItem` default button color overriding parent style --- src-docs/src/views/theme/color/_contrast_js.tsx | 2 ++ src-docs/src/views/theme/color/_contrast_sass.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src-docs/src/views/theme/color/_contrast_js.tsx b/src-docs/src/views/theme/color/_contrast_js.tsx index e2bcb001eb8..2207b216392 100644 --- a/src-docs/src/views/theme/color/_contrast_js.tsx +++ b/src-docs/src/views/theme/color/_contrast_js.tsx @@ -166,6 +166,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 index cb3836195f0..54b286e427a 100644 --- a/src-docs/src/views/theme/color/_contrast_sass.tsx +++ b/src-docs/src/views/theme/color/_contrast_sass.tsx @@ -184,6 +184,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)} /> )} From c486926fed6f535698f4f9dc8cba3329c7dd9818 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 2 Feb 2024 11:24:02 -0800 Subject: [PATCH 2/6] Fix nested `

` DOM validation error on page --- src-docs/src/views/theme/color/tokens.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/theme/color/tokens.tsx b/src-docs/src/views/theme/color/tokens.tsx index 4d58a2c09bd..cf9433c7545 100644 --- 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: , showThemeLanguageToggle: true, - description: ( - <> + intro: ( +

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 evaluated value but by their{' '} purpose.

- + ), }; From eb644aefcdf9c50460cbdab1836e8ae0c9395443 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 2 Feb 2024 11:48:44 -0800 Subject: [PATCH 3/6] Fix typescript comment --- src-docs/src/views/theme/color/_contrast_slider.tsx | 2 +- src-docs/src/views/theme/color/contrast.tsx | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/theme/color/_contrast_slider.tsx b/src-docs/src/views/theme/color/_contrast_slider.tsx index d3d959dfaa3..71cdd587c4c 100644 --- 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 & { 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 index b4b3efa0da3..2af0cc21feb 100644 --- a/src-docs/src/views/theme/color/contrast.tsx +++ b/src-docs/src/views/theme/color/contrast.tsx @@ -127,12 +127,8 @@ export default () => { , - toggleChecked: React.SetStateAction - ) => { - setContrastValue(sliderValue); + onChange={(sliderValue, toggleChecked) => { + setContrastValue(Number(sliderValue)); setShowTextVariants(toggleChecked); }} /> From b14d529d6db36af913eeb13231a888ccf6f74ac5 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 2 Feb 2024 12:14:23 -0800 Subject: [PATCH 4/6] Fix EuiFlexGrid usage - caused by `.map`/components that returns empty null/undefined --- src-docs/src/views/theme/color/_contrast_js.tsx | 7 ++++++- src-docs/src/views/theme/color/_contrast_sass.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/theme/color/_contrast_js.tsx b/src-docs/src/views/theme/color/_contrast_js.tsx index 2207b216392..ca98bc014b7 100644 --- 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 = ({ }} > - + {showTextVariants && colorIsCore(colorValue) && ( = ({ style={{ background: matchPanelColor ? palette[color] : undefined }} > - + {showTextVariants && colorIsCore(color) && ( Date: Fri, 2 Feb 2024 12:29:13 -0800 Subject: [PATCH 5/6] Fix crashing hook error on button group click --- src-docs/src/views/theme/color/contrast.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/theme/color/contrast.tsx b/src-docs/src/views/theme/color/contrast.tsx index 2af0cc21feb..8c81b73768f 100644 --- a/src-docs/src/views/theme/color/contrast.tsx +++ b/src-docs/src/views/theme/color/contrast.tsx @@ -28,7 +28,7 @@ import { _EuiThemeColorsMode } from '../../../../../src/global_styling/variables import { BACKGROUND_COLORS, _EuiBackgroundColor, - useEuiBackgroundColor, + euiBackgroundColor, } from '../../../../../src/global_styling'; import { BUTTON_COLORS, @@ -297,7 +297,9 @@ export default () => { { Date: Fri, 2 Feb 2024 12:29:22 -0800 Subject: [PATCH 6/6] misc perf improvements --- src-docs/src/views/theme/color/contrast.tsx | 27 ++++++++++----------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src-docs/src/views/theme/color/contrast.tsx b/src-docs/src/views/theme/color/contrast.tsx index 8c81b73768f..e9a96a4c286 100644 --- 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 { @@ -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(background_colors); const [backgroundFunction, setBackgroundFunction] = useState( @@ -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');