From aae6d6131596a1d73066fb5bca301f43aa99d4ec Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Wed, 30 Apr 2025 15:16:22 +0200 Subject: [PATCH] Update EUI to v102.0.0 (#219482) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors https://github.com/elastic/kibana/commit/4c852f13f98c33e83484540a1192f4e65a8cce05 - Types fix regarding `euiTheme.colors` https://github.com/elastic/kibana/pull/219482/commits/ddc8d2d79c86c14fdc8a02a7bf4607edccf04b6e, https://github.com/elastic/kibana/pull/219482/commits/ba7ec4f18ee154279fbd46dc604bf720f980d832 ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](https://github.com/elastic/eui/pull/8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](https://github.com/elastic/eui/pull/8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](https://github.com/elastic/eui/pull/8598)) ### `@elastic/eui-theme-borealis@1.0.0` - Added semantic severity color tokens: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](https://github.com/elastic/eui/pull/8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](https://github.com/elastic/eui/pull/8606)) ### `@elastic/eui-theme-common@1.0.0` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](https://github.com/elastic/eui/pull/8601)) - Added type for semantic severity color tokens ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](https://github.com/elastic/eui/pull/8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](https://github.com/elastic/eui/pull/8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit ec008b0a63bb83b70cdc898f7571c5f52aee66e8) --- package.json | 4 +-- src/dev/license_checker/config.ts | 4 +-- .../public/components/severity/config.tsx | 12 +++------ .../layer_actions/layer_actions.tsx | 14 ++++++++-- .../cases_webhook/severity_filter.tsx | 12 +++------ .../apm/common/service_health_status.ts | 16 +++++------- .../public/components/rca/rca_panel/index.tsx | 6 ++++- yarn.lock | 26 +++++++++---------- 8 files changed, 48 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 1f0e899156b09..e643eb24404cf 100644 --- a/package.json +++ b/package.json @@ -123,8 +123,8 @@ "@elastic/ecs": "^8.11.5", "@elastic/elasticsearch": "^8.17.0", "@elastic/ems-client": "8.6.3", - "@elastic/eui": "101.4.0", - "@elastic/eui-theme-borealis": "0.2.0", + "@elastic/eui": "102.0.0", + "@elastic/eui-theme-borealis": "1.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "^1.2.3", "@elastic/numeral": "^2.5.1", diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 26464260f1723..e164fb82f2c03 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -88,8 +88,8 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.6.3': ['Elastic License 2.0'], - '@elastic/eui@101.4.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], - '@elastic/eui-theme-borealis@0.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui@102.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui-theme-borealis@1.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry 'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause) diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx index dd95baa5668e3..8216625f6110c 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx @@ -36,23 +36,19 @@ export const SeverityHealth: React.FC = ({ severity }) => { const severityData = { low: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.neutral, label: LOW, }, medium: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning, label: MEDIUM, }, high: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis7 - : euiTheme.colors.vis.euiColorSeverity10, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.severity.risk, label: HIGH, }, critical: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorSeverity14, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger, label: CRITICAL, }, }; diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx index 9140c90f67d60..067fa2f3aae3d 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx @@ -101,6 +101,16 @@ const InContextMenuActions = (props: LayerActionsProps) => { } }, [isPopoverOpen]); + // `neutral` and `risk` variants belong to `severity` so they're not + // available in `euiTheme.colors` directly + const getColorFromTheme = useCallback( + (color: LayerAction['color']) => + color === 'risk' || color === 'neutral' + ? euiTheme.colors.severity[color] + : euiTheme.colors[color!], + [euiTheme] + ); + return ( { {...(i.color ? { css: css` - color: ${euiTheme.colors[i.color]}; + color: ${getColorFromTheme(i.color)}; &:hover { - text-decoration-color: ${euiTheme.colors[i.color]} !important; + text-decoration-color: ${getColorFromTheme(i.color)} !important; } `, size: 's', // need to be explicit here as css prop will disable the default small size diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index aefdd895a5b02..a8f7b7739bf65 100644 --- a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -35,23 +35,19 @@ export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityCh const severities = { [CaseSeverity.LOW]: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.neutral, label: i18n.SEVERITY_LOW_LABEL, }, [CaseSeverity.MEDIUM]: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning, label: i18n.SEVERITY_MEDIUM_LABEL, }, [CaseSeverity.HIGH]: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis7 - : euiTheme.colors.vis.euiColorSeverity10, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.severity.risk, label: i18n.SEVERITY_HIGH_LABEL, }, [CaseSeverity.CRITICAL]: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorSeverity14, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger, label: i18n.SEVERITY_CRITICAL_LABEL, }, }; diff --git a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts b/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts index f9b960693e391..d90090b5697fa 100644 --- a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts +++ b/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts @@ -42,15 +42,11 @@ export function getServiceHealthStatusColor( switch (status) { case ServiceHealthStatus.healthy: - return isAmsterdam - ? euiTheme.colors.vis.euiColorVis0 - : euiTheme.colors.vis.euiColorVisSuccess0; + return isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.success; case ServiceHealthStatus.warning: - return isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorVis9; + return isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning; case ServiceHealthStatus.critical: - return isAmsterdam - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorSeverity14; + return isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger; case ServiceHealthStatus.unknown: return euiTheme.colors.mediumShade; } @@ -66,15 +62,15 @@ export function getServiceHealthStatusBadgeColor( case ServiceHealthStatus.healthy: return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 - : euiTheme.colors.vis.euiColorVisSuccess0; + : euiTheme.colors.severity.success; case ServiceHealthStatus.warning: return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText5 - : euiTheme.colors.vis.euiColorVis9; + : euiTheme.colors.severity.warning; case ServiceHealthStatus.critical: return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText9 - : euiTheme.colors.vis.euiColorSeverity12; + : euiTheme.colors.severity.risk; case ServiceHealthStatus.unknown: return euiTheme.colors.mediumShade; } diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx index 173bf8a2c96a0..89e673d82590f 100644 --- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx +++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx @@ -20,6 +20,7 @@ export function RootCauseAnalysisPanel({ }) { const theme = useTheme(); + const isSeverityColor = color === 'risk' || color === 'neutral'; const panelClassName = color && color !== 'transparent' && @@ -28,7 +29,10 @@ export function RootCauseAnalysisPanel({ color !== 'highlighted' ? css` border: 1px solid; - border-color: ${rgba(theme.colors[color], 0.25)}; + border-color: ${rgba( + isSeverityColor ? theme.colors.severity[color] : theme.colors[color], + 0.25 + )}; ` : undefined; diff --git a/yarn.lock b/yarn.lock index 04ca49f857137..262cfbf71e0cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2167,26 +2167,26 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui-theme-borealis@0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-0.2.0.tgz#abfe2776778be05d65a60ba02e936c2203bb1549" - integrity sha512-3gD60+QR4cWeCqC8OG6hXyO3xeagQ0chMBe+zZJE7qBcYXuPqGhaFb78rEI1BNniEm+pyUiGN88FQtLaoHInNw== +"@elastic/eui-theme-borealis@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.0.0.tgz#f85679d2d72dfc43a620241cbf4161d4e4e81841" + integrity sha512-Zf3ZX5siUhF+TNOdP0FZ3PNEpVmfe3DDXFm5biAKFlGp4e5yrR1FKPYOzkOdJtPWlOoNaedawnALXNVjp1UH8w== -"@elastic/eui-theme-common@0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-0.2.0.tgz#570a988f58c24076c6f867475e70930769f3cff5" - integrity sha512-g2n38Uk4G9UqQU/wim+ZKWusWtO1bdudvDy/7+sdCYaxtgbINT5hhMHoU9M49D+7FJSsPuHn7gVfdYKMN9bTdQ== +"@elastic/eui-theme-common@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.0.0.tgz#c5e7b7597c4ebe71fc533b18458415a14a93794d" + integrity sha512-9+P21npVm05OmFr0OPkA5DSdts9teOo/OEotbJFAVkqBLkNf+Eevv6q89B8eQ6r383RnVwTl7vBzb6M9PnULJg== dependencies: "@types/lodash" "^4.14.202" chroma-js "^2.4.2" lodash "^4.17.21" -"@elastic/eui@101.4.0": - version "101.4.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-101.4.0.tgz#2db2d7163e2a317b514b6308197173655ff2ac4b" - integrity sha512-oKmlsjBMp4DSdu34YUqQD821Fov46mJ4nPHkWAUIHCv3+5PfAeK7NpVBEnyVZW5LTo+sAANqLN5mJFsovR8NZg== +"@elastic/eui@102.0.0": + version "102.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.0.0.tgz#dda965d92eb46bf061aac8d0219218779aea28bb" + integrity sha512-o4BuXdyGLTAJOBMIUVovDaDmmW+RJgKG6XdIDds7aJyQFlcqIOHgM59yCorzEHhpPAuaYparShJE/vug2dJAIQ== dependencies: - "@elastic/eui-theme-common" "0.2.0" + "@elastic/eui-theme-common" "1.0.0" "@elastic/prismjs-esql" "^1.1.0" "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202"