[ResponseOps][UI] - EUI Visual Refresh integration and QA #204352

georgianaonoleata1904 · 2024-12-16T10:20:43Z

Summary

Closes: #202551
Closes: #202550
Closes: #202549
Closes: #202548

Meta: #202547

Summary

Buttons with success color have been updated to primary
Replaced "textSuccess" to "successText"
example: Edit connector -> Save button

All references to renamed tokens have been updated to use the new token name
Replaced the color utility functions with EUI color tokens as they will be deprecated
All usage of color palette tokens and functions now pull from the theme
changed severity colors in Borealis

Amsterdam:

Borealis:

…203068) Closes #202548 Closes #202549 ## Summary - no changes were needed to the use of "success" color as it was used for semantic purpose - replaced "textSuccess" to "successText" --------- Co-authored-by: Elastic Machine <[email protected]>

…precated color variables (#203120) Closes #202550 ## Summary - All references to renamed tokens have been updated to use the new token name # previous color token -> new color token primaryText -> textPrimary accentText -> textAccent between this and textSuccess. warningText -> textWarning dangerText -> textDanger text -> textParagraph title -> textHeading subduedText -> textSubdued disabledText -> textDisabled successText -> textSuccess - replaced the color utility functions with EUI color tokens as they will be deprecated

…ate with theme changes (#203448) Closes #202551 ## Summary - All usage of color palette tokens and functions now pull from the theme JSON tokens are anything from: @elastic/eui/dist/eui_theme_light.json @elastic/eui/dist/eui_theme_dark.json import { euiThemeVars } from '@kbn/ui-theme' --------- Co-authored-by: kibanamachine <[email protected]>

packages/kbn-grouping/src/components/grouping.tsx

packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx

x-pack/plugins/alerting/public/pages/maintenance_windows/components/page_header.tsx

mgadewoll · 2024-12-16T14:18:17Z

x-pack/plugins/cases/public/components/severity/config.tsx

+  const { euiTheme } = useEuiTheme();
+
+  const severityData = {
+    low: { color: euiTheme.colors.vis.euiColorVis0, label: LOW },


The vis colors have changed and don't directly map to similar colors (related conversation)

Since these are used as severity colors here, you likely want to ensure they are still using a specific color.
The severity color palette is still being worked on, but we can remap vis colors per theme.
I'm not sure who's the responsible designer to involve here for this code? cc @gvnmagni

We have two options here:

use new tokens which mean the current Amsterdam colors change a bit (the main issue seems to be distinguishing high and critical)

map severity colors per theme

Option 1

low: { color: euiTheme.colors.vis.euiColorVisSuccess0, label: LOW } medium: { euiTheme.colors.vis.euiColorVisWarning0, label: MEDIUM } high: { color: euiTheme.colors.vis.euiColorVisDanger1, label: CRITICAL } critical: { color: euiTheme.colors.vis.euiColorVisDanger0, label: CRITICAL }

Severity level previous value Amsterdam Borealis

low #54B399 #209280 #24C292

medium #D6BF57 #D6BF57 #FCD883

high #DA8B45 #E7664C #FFC9C2

critical #E7664C #CC5642 #F6726A

Option 2

const { euiTheme } = useEuiTheme(); const { hasVisColorAdjustment } = euiTheme; low: { color: hasVisColorAdjustment ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorVisSuccess0, label: LOW } medium: { color: hasVisColorAdjustment ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorVisWarning0, label: MEDIUM } high: { color: hasVisColorAdjustment ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.vis.euiColorVisDanger1, label: CRITICAL } critical: { color: hasVisColorAdjustment ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVisDanger0, label: CRITICAL }

Severity level previous value Amsterdam Borealis

low #54B399 #54B399 #24C292

medium #D6BF57 #D6BF57 #FCD883

high #DA8B45 #DA8B45 #FFC9C2

critical #E7664C #E7664C #F6726A

Hi @mgadewoll, thanks for the detailed suggestion here. @joana-cps is the designer in charge of this area of the product. I'm personally ok with either option. Will defer to @gvnmagni or @joana-cps.

@joana-cps let's chat about this, I want to be sure I can support you but I need to understand a little bit better the context

Hi @mgadewoll, thanks very much for the detailed suggestion here, this was a topic that we spent some time discussing with the team (@georgianaonoleata1904 and @cnasikas) and we agreed on using this approach:

Severity level previous value Amsterdam Borealis Color token

low #54B399 #00BFB3 #008A5E colors.success

medium #D6BF57 #FEC514 #FACB3D colors.warning

high #DA8B45 #F04E98 #BC1E70 colors.accent

critical #E7664C #BD271E #C61E25 colors.danger

The main reasons:

We tried both proposals but in Borealis #FFC9C2 it's too light for a High Status

We use colors.success, colors.warning and colors.danger in other ResponseOps pages, so we would like to have some consistency in our status

We use same color token for both themes

The new severity colors change will have less impact since we are already using dark red/pink in higher status

We were missing an "orange" for the high status, and this was the best solution that we could find
Let me know what you think 😊

ok, I got the chance to chat with Joana and I believe we reached a consensus.

From my perspective, I would not change anything in Amsterdam, while for Borealis I would proceed this way. We don't have yet all the tokens set up for our new Severity Color Palette (issue) but what we can do is to apply color primitives directly and eventually come back here introducing severity tokens as soon as they are ready.

Specifically, this would be the mapping of our levels in this case:

@cnasikas The idea is to keep Amsterdam as it is right now and just change the Borealis for the new ones.

Ok! Is this a final decision? Could we all agree on this before @georgianaonoleata1904 does the implementation?

@mgadewoll can you please confirm if you're ok with these changes?

Yes, I agree. Let's keep Amsterdam as is and use the new ones for Borealis.

Fyi, we're introducing new tokens for severity colors. These will then replace these mappings, but it will be done as a follow-up.

Fyi, the severity colors are already available on euiTheme.colors.vis

Suggestion based on @gvnmagni comment above:

low: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5 medium: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7 high: isAmsterdam ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.vis.euiColorSeverity10 critical: isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorSeverity14

That results in

Amsterdam Borealis

#54B399 #CAD3E2

#D6BF57 #FCD883

#DA8B45 #FC9188

#E7664C #C61E25

...plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx

cnasikas · 2024-12-17T07:58:11Z

...ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx

-                          color: isActive ? '#a8376a' : euiTheme.colors.subduedText,
+                          color: isActive
+                            ? euiTheme.colors.textAccent
+                            : euiTheme.colors.textSubdued,
                          backgroundColor: isActive ? 'rgba(240,78,152,0.2)' : euiTheme.colors.body,


@mgadewoll Should we also replace rgba(240,78,152,0.2)?

Maybe, yes. Does it need the transparency or can it be a solid color?

Just looking at the code, I'd think it can become a solid color as this is a button. And based on button definitions it should then probably use euiTheme.colors.backgroundLightAccent.

Edit: One note on that: This will change the color for current Amsterdam, so I'd advise to check if that change is ok.

cc @georgianaonoleata1904 @joana-cps

I reviewed it with @georgianaonoleata1904 and it looks good to me in Amsterdam and Borealis 👍

@joana-cps Not blocking but looking at the code only, I'm curious why we are using a button here instead of EuiButton and why we're passing a custom color. Something to consider for later.

yes good point @andreadelrio, I didn't look into the code, I just did a visual review.
Something to look into @georgianaonoleata1904 @cnasikas.

elasticmachine · 2024-12-17T13:36:12Z

Pinging @elastic/response-ops (Team:ResponseOps)

…e directly

mgadewoll

✅ Changes LGTM from EUI side

…o ro_eui_theme_borealis

joana-cps · 2025-01-10T13:00:44Z

Visual check done, changes LGTM ✅

…o ro_eui_theme_borealis

…-fix'

jcger · 2025-01-13T14:30:16Z

x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx

+
+  const severityData = {
+    low: {
+      color: euiTheme.flags.hasVisColorAdjustment ? '#54B399' : '#CAD3E2',


should this be updated with #204352 (comment) ?

You're right, I hadn't seen the comment above. I'll update, thanks!

jcger · 2025-01-13T14:35:40Z

...orm/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx

 interface Props {
  selectedSeverity: CaseSeverity;
  onSeverityChange: (status: CaseSeverity) => void;
 }

 export const SeverityFilter: React.FC<Props> = ({ selectedSeverity, onSeverityChange }) => {
+  const { euiTheme } = useEuiTheme();
+
+  const severities = {


what do you think about taking the chance to have just one source of truth? We seem to have the same object in x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx

done, thanks!

I think you forgot to update here, right? We discussed via dm to not apply this change because of the package being private it can't be exported and we agreed that it would be out of scope to solve it.

…apping'

…o ro_eui_theme_borealis

…apping'

…o ro_eui_theme_borealis

elasticmachine · 2025-01-14T16:32:52Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: f694052

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`alerting`	99.0KB	98.7KB	-235.0B
`cases`	538.8KB	539.0KB	+249.0B
`cloudSecurityPosture`	520.7KB	520.7KB	+8.0B
`observability`	480.8KB	480.8KB	-30.0B
`securitySolution`	21.2MB	21.2MB	-635.0B
`stackConnectors`	740.1KB	740.3KB	+183.0B
`triggersActionsUi`	1.7MB	1.7MB	+78.0B
total			-382.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`alerting`	25.6KB	25.5KB	-54.0B
`cases`	162.1KB	162.0KB	-54.0B
`stackConnectors`	61.9KB	61.8KB	-54.0B
`triggersActionsUi`	130.2KB	130.2KB	+26.0B
total			-136.0B

History

💔 Build #266922 failed 8bc77e1
💔 Build #266910 failed 974f34c
💛 Build #266384 was flaky 7790689
💔 Build #266372 failed 48a97bb
💔 Build #266335 failed a6748c8

cc @georgianaonoleata1904

georgianaonoleata1904 and others added 4 commits December 16, 2024 12:06

changed color mapping

60a9959

cnasikas added release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v9.0.0 EUI Visual Refresh labels Dec 16, 2024

mgadewoll requested changes Dec 16, 2024

View reviewed changes

removed running MW highlighted background

58d146c

cnasikas reviewed Dec 17, 2024

View reviewed changes

georgianaonoleata1904 added 2 commits December 17, 2024 10:08

fixes for check types

f0020dc

addressed comments

6bb2a1c

georgianaonoleata1904 self-assigned this Dec 17, 2024

mgadewoll mentioned this pull request Dec 17, 2024

[Observability plugin] Audit new EUI Borealis theme #204234

Closed

small changes

7c644ef

georgianaonoleata1904 marked this pull request as ready for review December 17, 2024 13:36

georgianaonoleata1904 requested a review from a team as a code owner December 17, 2024 13:36

This was referenced Dec 17, 2024

[ObsUX] [APM] Migrate APM from styled-components to @emotion #204222

Merged

Eui Refresh #204007

Open

georgianaonoleata1904 added 3 commits December 18, 2024 11:34

fixed check types and changed the warning colors to pull from euiThem…

e2aebb6

…e directly

changed severity color values

c0ccec4

fixed check types

a155c28

mgadewoll approved these changes Dec 18, 2024

View reviewed changes

georgianaonoleata1904 added 4 commits December 18, 2024 12:31

Merge branch 'main' into ro_eui_theme_borealis

6c76609

fixes for the failes jest tests

e5c1b96

small fix

04ae65e

Merge branch 'ro_eui_theme_borealis' of github.com:elastic/kibana int…

893e241

…o ro_eui_theme_borealis

added missing data-test-subj to the severity options

1f4b407

angorayc mentioned this pull request Dec 19, 2024

[Security Solution][Explore][EUI visual refresh] rename color variables #202499

Open

georgianaonoleata1904 added 6 commits January 8, 2025 13:41

solved merge conflicts

bc23837

Merge branch 'main' into ro_eui_theme_borealis

78cc221

fixed check type failure

dc3c3fc

Merge branch 'ro_eui_theme_borealis' of github.com:elastic/kibana int…

7bdb51d

…o ro_eui_theme_borealis

Merge branch 'main' into ro_eui_theme_borealis

7c7e9bb

Merge branch 'main' into ro_eui_theme_borealis

306d385

georgianaonoleata1904 and others added 8 commits January 10, 2025 15:41

changed button to EuiButton

0fc2725

Merge branch 'main' into ro_eui_theme_borealis

97dc655

fixed check type

1ed6fe8

Merge branch 'ro_eui_theme_borealis' of github.com:elastic/kibana int…

1feaf1a

…o ro_eui_theme_borealis

fixed check type test

06e4b19

Merge branch 'main' into ro_eui_theme_borealis

a6748c8

Merge branch 'main' into ro_eui_theme_borealis

48a97bb

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

7790689

…-fix'

jcger approved these changes Jan 13, 2025

View reviewed changes

georgianaonoleata1904 and others added 8 commits January 14, 2025 13:55

addressed comments

fa1537c

[CI] Auto-commit changed files from 'node scripts/styled_components_m…

a2f0cb1

…apping'

revert prev changes

caa5e1b

Merge branch 'ro_eui_theme_borealis' of github.com:elastic/kibana int…

f29548c

…o ro_eui_theme_borealis

[CI] Auto-commit changed files from 'node scripts/styled_components_m…

974f34c

…apping'

removed unused import

b0df5e3

Merge branch 'ro_eui_theme_borealis' of github.com:elastic/kibana int…

8bc77e1

…o ro_eui_theme_borealis

Merge branch 'main' into ro_eui_theme_borealis

f694052

georgianaonoleata1904 merged commit 10cc891 into main Jan 15, 2025
8 checks passed

georgianaonoleata1904 deleted the ro_eui_theme_borealis branch January 15, 2025 07:07

mgadewoll mentioned this pull request Jan 15, 2025

[Security Solution] Eui visual refresh - make palettes theme aware #205873

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ResponseOps][UI] - EUI Visual Refresh integration and QA #204352

[ResponseOps][UI] - EUI Visual Refresh integration and QA #204352

georgianaonoleata1904 commented Dec 16, 2024 •

edited

Loading

mgadewoll Dec 16, 2024

andreadelrio Dec 16, 2024

gvnmagni Dec 17, 2024

joana-cps Dec 17, 2024

gvnmagni Dec 17, 2024

joana-cps Dec 18, 2024

cnasikas Dec 18, 2024 •

edited

Loading

joana-cps Dec 18, 2024

mgadewoll Dec 18, 2024

mgadewoll Jan 9, 2025

cnasikas Dec 17, 2024

mgadewoll Dec 17, 2024 •

edited

Loading

cnasikas Dec 17, 2024

joana-cps Dec 17, 2024

andreadelrio Dec 17, 2024 •

edited

Loading

joana-cps Dec 17, 2024

elasticmachine commented Dec 17, 2024

mgadewoll left a comment

joana-cps commented Jan 10, 2025

jcger Jan 13, 2025

georgianaonoleata1904 Jan 14, 2025

jcger Jan 13, 2025

georgianaonoleata1904 Jan 14, 2025

jcger Jan 15, 2025

elasticmachine commented Jan 14, 2025

Severity level	previous value	Amsterdam	Borealis
low	`#54B399`	`#209280`	`#24C292`
medium	`#D6BF57`	`#D6BF57`	`#FCD883`
high	`#DA8B45`	`#E7664C`	`#FFC9C2`
critical	`#E7664C`	`#CC5642`	`#F6726A`

Severity level	previous value	Amsterdam	Borealis	Color token
low	`#54B399`	`#00BFB3`	`#008A5E`	colors.success
medium	`#D6BF57`	`#FEC514`	`#FACB3D`	colors.warning
high	`#DA8B45`	`#F04E98`	`#BC1E70`	colors.accent
critical	`#E7664C`	`#BD271E`	`#C61E25`	colors.danger

Amsterdam	Borealis
`#54B399`	`#CAD3E2`
`#D6BF57`	`#FCD883`
`#DA8B45`	`#FC9188`
`#E7664C`	`#C61E25`

[ResponseOps][UI] - EUI Visual Refresh integration and QA #204352

[ResponseOps][UI] - EUI Visual Refresh integration and QA #204352

Conversation

georgianaonoleata1904 commented Dec 16, 2024 • edited Loading

Summary

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnasikas Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgadewoll Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andreadelrio Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Dec 17, 2024

mgadewoll left a comment

Choose a reason for hiding this comment

joana-cps commented Jan 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Jan 14, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Page load bundle

History

georgianaonoleata1904 commented Dec 16, 2024 •

edited

Loading

cnasikas Dec 18, 2024 •

edited

Loading

mgadewoll Dec 17, 2024 •

edited

Loading

andreadelrio Dec 17, 2024 •

edited

Loading