From 59d31e78e04c384d5e8a0b8cf066faa18a3ed958 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 12 Mar 2024 12:07:31 +0100 Subject: [PATCH 1/5] refactor: rename positive/negative palettes --- .../color_palette_quantitative.js | 8 ++--- .../color_picker/color_palette_display.js | 8 ++--- .../elastic_charts/accessibility_bullet.tsx | 6 ++-- src-docs/src/views/elastic_charts/goal.tsx | 4 +-- src-docs/src/views/elastic_charts/theming.tsx | 8 ++--- .../elastic_charts/theming_categorical.tsx | 4 +-- .../views/elastic_charts/theming_example.js | 7 ++--- .../markdown_editor_with_plugins.js | 8 ++--- src/services/color/eui_palettes.ts | 30 +++++++++---------- src/services/color/index.ts | 4 +-- src/services/index.ts | 4 +-- 11 files changed, 45 insertions(+), 46 deletions(-) diff --git a/src-docs/src/views/color_palette/color_palette_quantitative.js b/src-docs/src/views/color_palette/color_palette_quantitative.js index 79c5be5ba1c..ae5cbdbf513 100644 --- a/src-docs/src/views/color_palette/color_palette_quantitative.js +++ b/src-docs/src/views/color_palette/color_palette_quantitative.js @@ -16,16 +16,16 @@ import { euiPaletteForTemperature, euiPaletteCool, euiPaletteWarm, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteGray, } from '../../../../src/services'; const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src-docs/src/views/color_picker/color_palette_display.js b/src-docs/src/views/color_picker/color_palette_display.js index 12585bd7776..2c168b8b578 100644 --- a/src-docs/src/views/color_picker/color_palette_display.js +++ b/src-docs/src/views/color_picker/color_palette_display.js @@ -4,8 +4,8 @@ import { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, @@ -50,8 +50,8 @@ const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx index 01e386a7b7c..324fc35a4db 100644 --- a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx +++ b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx @@ -3,7 +3,7 @@ import { Chart, Settings, Goal } from '@elastic/charts'; import { EuiSpacer, EuiTitle } from '../../../../src/components'; import { htmlIdGenerator, - euiPalettePositive, + euiPaletteGreen, colorPalette, euiPaletteGray, useEuiTheme, @@ -28,8 +28,8 @@ export default () => { const bandLabels = ['freezing', 'cold', 'brisk', 'warm', 'hot']; const bands = [0, 100, 125, 150, 250]; - let spectrum = euiPalettePositive(5); - // For dark theme, start with the brightest positive color and create a palette that goes to dark gray instead of light + let spectrum = euiPaletteGreen(5); + // For dark theme, start with the brightest green color and create a palette that goes to dark gray instead of light if (isDarkTheme) { spectrum = colorPalette([spectrum[4], euiPaletteGray(5)[4]], 5).reverse(); } diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx index 5edcac5b28f..e3a215253e9 100644 --- a/src-docs/src/views/elastic_charts/goal.tsx +++ b/src-docs/src/views/elastic_charts/goal.tsx @@ -5,7 +5,7 @@ import { htmlIdGenerator, useEuiTheme, useIsWithinBreakpoints, - euiPalettePositive, + euiPaletteGreen, } from '../../../../src/services'; import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex'; @@ -27,7 +27,7 @@ export const GoalChart = () => { const bandLabels = ['', 'freezing', 'cold', 'warm', 'hot']; const bands = [-10, 0, 15, 25, 40]; - const spectrum = euiPalettePositive(5); + const spectrum = euiPaletteGreen(5); const opacityMapHex: Record = { '-10': spectrum[0], '0': spectrum[1], diff --git a/src-docs/src/views/elastic_charts/theming.tsx b/src-docs/src/views/elastic_charts/theming.tsx index 8810a9e814d..3b6da67a52c 100644 --- a/src-docs/src/views/elastic_charts/theming.tsx +++ b/src-docs/src/views/elastic_charts/theming.tsx @@ -28,8 +28,8 @@ import { euiPaletteForTemperature, euiPaletteCool, euiPaletteWarm, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteGray, useEuiTheme, } from '../../../../src/services'; @@ -39,8 +39,8 @@ const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src-docs/src/views/elastic_charts/theming_categorical.tsx b/src-docs/src/views/elastic_charts/theming_categorical.tsx index 8ffef39feb2..ca5f4bdc07c 100644 --- a/src-docs/src/views/elastic_charts/theming_categorical.tsx +++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx @@ -24,7 +24,7 @@ import { import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared'; import { euiPaletteColorBlind, - euiPalettePositive, + euiPaletteGreen, euiPaletteForStatus, euiPaletteGray, useEuiTheme, @@ -118,7 +118,7 @@ export default () => { }; const createQuantityChart = (numCharts: number) => { - const vizColors = euiPalettePositive(numCharts); + const vizColors = euiPaletteGreen(numCharts); // convert series labels to percentages const dg = new DataGenerator(); diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js index 9c48b22e2ad..915b7cdb661 100644 --- a/src-docs/src/views/elastic_charts/theming_example.js +++ b/src-docs/src/views/elastic_charts/theming_example.js @@ -88,11 +88,11 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI

- {`import { euiPalettePositive } from '../../../../src/services'; + {`import { euiPaletteGreen } from '../../../../src/services'; const customColors = { colors: { - vizColors: euiPalettePositive(5), + vizColors: euiPaletteGreen(5), }, }; @@ -134,8 +134,7 @@ const customColors = { a single color that spans from light colors for low amounts to dark colors for high amounts. If the data signifies{' '} trends, use a two-color divergent scheme, with the - darkest colors at the extremes. Remember that red means bad/negative - and green is good/positive. + darkest colors at the extremes.

Whan signifying quantities, group values into intervals instead of a diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js index 77e101a268a..d5cfda19d01 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js @@ -42,8 +42,8 @@ import { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteWarm, } from '../../../../src/services'; import { getDefaultEuiMarkdownUiPlugins } from '../../../../src/components/markdown_editor'; @@ -52,8 +52,8 @@ const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index 7c820e04a35..c44a3bbfb0a 100644 --- a/src/services/color/eui_palettes.ts +++ b/src/services/color/eui_palettes.ts @@ -141,30 +141,30 @@ export const euiPaletteForDarkBackground = function (): EuiPalette { return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A']; }; -const positiveColor: HEX = '#209280'; -const negativeColor: HEX = '#CC5642'; -const lightNegativeColor: HEX = euiPaletteColorBlind()[9]; +const greenColor: HEX = '#209280'; +const redColor: HEX = '#CC5642'; +const lightRedColor: HEX = euiPaletteColorBlind()[9]; const coolArray: HEX[] = [euiPaletteColorBlind()[1], '#6092C0']; const warmArray: HEX[] = [euiPaletteColorBlind()[7], euiPaletteColorBlind()[9]]; export const euiPaletteForStatus = function (steps: number): EuiPalette { if (steps === 1) { - return [positiveColor]; + return [greenColor]; } if (steps <= 3) { return euiPalette( - [positiveColor, euiPaletteColorBlind()[5], negativeColor], + [greenColor, euiPaletteColorBlind()[5], redColor], steps, true ); } return euiPalette( [ - positiveColor, + greenColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], - lightNegativeColor, - negativeColor, + lightRedColor, + redColor, ], steps, true @@ -178,7 +178,7 @@ export const euiPaletteForTemperature = function (steps: number): EuiPalette { if (steps === 1) { return [cools[0]]; } else if (steps <= 3) { - return euiPalette([cools[0], lightNegativeColor], steps, true); + return euiPalette([cools[0], lightRedColor], steps, true); } return euiPalette([...cools, ...warms], steps, true); @@ -196,20 +196,20 @@ export const euiPaletteComplementary = function (steps: number): EuiPalette { ); }; -export const euiPaletteNegative = function (steps: number): EuiPalette { +export const euiPaletteRed = function (steps: number): EuiPalette { if (steps === 1) { - return [lightNegativeColor]; + return [lightRedColor]; } - return euiPalette(['white', negativeColor], steps); + return euiPalette(['white', redColor], steps); }; -export const euiPalettePositive = function (steps: number): EuiPalette { +export const euiPaletteGreen = function (steps: number): EuiPalette { if (steps === 1) { return [euiPaletteColorBlind()[0]]; } - return euiPalette(['white', positiveColor], steps); + return euiPalette(['white', greenColor], steps); }; export const euiPaletteCool = function (steps: number): EuiPalette { @@ -222,7 +222,7 @@ export const euiPaletteCool = function (steps: number): EuiPalette { export const euiPaletteWarm = function (steps: number): EuiPalette { if (steps === 1) { - return [lightNegativeColor]; + return [lightRedColor]; } return euiPalette(['#FBFBDC', ...warmArray], steps); diff --git a/src/services/color/index.ts b/src/services/color/index.ts index f071ef59502..574c5ffb0b7 100644 --- a/src/services/color/index.ts +++ b/src/services/color/index.ts @@ -31,8 +31,8 @@ export { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src/services/index.ts b/src/services/index.ts index e8e4ce074cd..a8501828e8c 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -38,8 +38,8 @@ export { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteWarm, getSteppedGradient, hexToHsv, From 1bc9eeb89c65eecd6052e45a1016d2b26b45e0fc Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 12 Mar 2024 12:22:04 +0100 Subject: [PATCH 2/5] add changelog --- changelogs/upcoming/7570.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 changelogs/upcoming/7570.md diff --git a/changelogs/upcoming/7570.md b/changelogs/upcoming/7570.md new file mode 100644 index 00000000000..34eabdf6a03 --- /dev/null +++ b/changelogs/upcoming/7570.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Renamed `euiPalettePositive` and `euiPaletteNegative` to a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed` ([#7570](https://github.com/elastic/eui/pull/7570)) \ No newline at end of file From 0025808554abfe1d372d79bc56cf89dcfec4853f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Mar 2024 10:07:30 +0100 Subject: [PATCH 3/5] deprecated old palettes --- changelogs/upcoming/7570.md | 4 ++-- src/services/color/eui_palettes.ts | 9 +++++++++ src/services/color/index.ts | 2 ++ src/services/index.ts | 2 ++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/changelogs/upcoming/7570.md b/changelogs/upcoming/7570.md index 34eabdf6a03..6bae0eb2032 100644 --- a/changelogs/upcoming/7570.md +++ b/changelogs/upcoming/7570.md @@ -1,3 +1,3 @@ -**Breaking changes** +**Deprecations** -- Renamed `euiPalettePositive` and `euiPaletteNegative` to a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed` ([#7570](https://github.com/elastic/eui/pull/7570)) \ No newline at end of file +- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed` ([#7570](https://github.com/elastic/eui/pull/7570)) \ No newline at end of file diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index c44a3bbfb0a..94fd3f10f3f 100644 --- a/src/services/color/eui_palettes.ts +++ b/src/services/color/eui_palettes.ts @@ -203,6 +203,10 @@ export const euiPaletteRed = function (steps: number): EuiPalette { return euiPalette(['white', redColor], steps); }; +/** + * @deprecated - use `euiPaletteRed` instead + */ +export const euiPaletteNegative = euiPaletteRed; export const euiPaletteGreen = function (steps: number): EuiPalette { if (steps === 1) { @@ -212,6 +216,11 @@ export const euiPaletteGreen = function (steps: number): EuiPalette { return euiPalette(['white', greenColor], steps); }; +/** + * @deprecated - use `euiPaletteGreen` instead + */ +export const euiPalettePositive = euiPaletteGreen; + export const euiPaletteCool = function (steps: number): EuiPalette { if (steps === 1) { return [coolArray[1]]; diff --git a/src/services/color/index.ts b/src/services/color/index.ts index 574c5ffb0b7..803f0f81a46 100644 --- a/src/services/color/index.ts +++ b/src/services/color/index.ts @@ -33,6 +33,8 @@ export { euiPaletteComplementary, euiPaletteRed, euiPaletteGreen, + euiPaletteNegative, + euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src/services/index.ts b/src/services/index.ts index a8501828e8c..4816f7235bf 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -40,6 +40,8 @@ export { euiPaletteGray, euiPaletteRed, euiPaletteGreen, + euiPalettePositive, + euiPaletteNegative, euiPaletteWarm, getSteppedGradient, hexToHsv, From 56c207dd971c1ef8c69d8e103ba92de12b58caab Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 13 Mar 2024 10:46:18 -0700 Subject: [PATCH 4/5] changelog tweak --- changelogs/upcoming/7570.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelogs/upcoming/7570.md b/changelogs/upcoming/7570.md index 6bae0eb2032..7ad933a7bfa 100644 --- a/changelogs/upcoming/7570.md +++ b/changelogs/upcoming/7570.md @@ -1,3 +1,3 @@ **Deprecations** -- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed` ([#7570](https://github.com/elastic/eui/pull/7570)) \ No newline at end of file +- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed` \ No newline at end of file From fb66c62edda391bc17dc05467585012c987b6254 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 13 Mar 2024 10:46:27 -0700 Subject: [PATCH 5/5] newline tweak --- src/services/color/eui_palettes.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index 94fd3f10f3f..681584c98c6 100644 --- a/src/services/color/eui_palettes.ts +++ b/src/services/color/eui_palettes.ts @@ -215,7 +215,6 @@ export const euiPaletteGreen = function (steps: number): EuiPalette { return euiPalette(['white', greenColor], steps); }; - /** * @deprecated - use `euiPaletteGreen` instead */