[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]>

mgadewoll · 2024-12-16T13:45:39Z

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

@@ -198,12 +201,16 @@ const GroupingComponent = <T,>({
            {groupCount > 0 && unitCount > 0 ? (
              <EuiFlexGroup gutterSize="none">
                <EuiFlexItem grow={false}>
-                  <span css={countCss} data-test-subj="unit-count">
+                  <span css={countCss(euiTheme)} data-test-subj="unit-count">


We don't need to pass the theme to the styles, this happens automatically. 🙂
css={countCss} = css={({ euiTheme }) => countCss(euiTheme)}

mgadewoll · 2024-12-16T13:46:50Z

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

+                  <span
+                    css={countCss(euiTheme)}
+                    data-test-subj="group-count"
+                    style={{ borderRight: 'none' }}


We don't need to overwrite with inline styles, we can use css styles:

css={[countCss, css` border-right: none; `]}

mgadewoll · 2024-12-16T13:47:28Z

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

@@ -692,7 +691,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
      }
      buttonContentClassName="eui-fullWidth"
      buttonContent={
-        <EuiPanel color="subdued" paddingSize="m">
+        <EuiPanel color={subdued} paddingSize="m">


Question: Why do we need to override the default subdued panel style?

Since we had to replace useEuiBackgroundColor('subdued'), the closes color I found was euiTheme.colors.lightestShade, but if I hadn't also replaced the default subdued panel color, it would have looked something like this:

But still, it doesn't seem the best approach, since the colors supported by EuiPanel are the following: "transparent", "accent", "primary", "success", "warning", "danger", "subdued", "plain". I need to find a workaround.

I see. Since you're adding a background color to the Accordion, would it work to use <EuiPanel color="transparent" /> ?

Yes, this would work.

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:

@joana-cps Since we will use the hardcoded values, should we use the same in Borealis? The colors on your table seem to be different from the two themes.

@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.

mgadewoll · 2024-12-16T14:30:44Z

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

@@ -19,7 +18,7 @@ const Stat = styled(EuiStat)`
 `;

 const Divider = styled.div`
-  border-right: 1px solid ${euiThemeVars.euiColorLightShade};
+  border-right: 1px solid ${(props) => props.theme.euiTheme.colors.lightShade};


Let's update this to use a semantic border token:

border-right: ${euiTheme.border.thin};

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

adcoelho · 2024-12-18T14:47:04Z

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

+
+  const { color, label } = severityData[severity];
+
+  return <EuiHealth color={color}>{label}</EuiHealth>;


data-test-subj is missing here, i think that is why the tests are failing.

Thanks, i ll update!

elasticmachine · 2024-12-18T17:04:38Z

💚 Build Succeeded

Buildkite Build
Commit: 1f4b407

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`	100.3KB	100.1KB	-235.0B
`cases`	491.2KB	491.4KB	+249.0B
`cloudSecurityPosture`	503.0KB	503.0KB	+8.0B
`observability`	480.8KB	480.8KB	-30.0B
`securitySolution`	21.4MB	21.4MB	-635.0B
`stackConnectors`	660.5KB	660.6KB	+114.0B
`triggersActionsUi`	1.7MB	1.7MB	+228.0B
total			-301.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.6KB	-54.0B
`cases`	160.0KB	159.9KB	-54.0B
`stackConnectors`	59.0KB	58.9KB	-54.0B
`triggersActionsUi`	127.1KB	127.1KB	+26.0B
total			-136.0B

History

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

adcoelho reviewed Dec 18, 2024

View reviewed changes

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

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

mgadewoll Dec 16, 2024

mgadewoll Dec 16, 2024

georgianaonoleata1904 Dec 17, 2024 •

edited

Loading

mgadewoll Dec 17, 2024

georgianaonoleata1904 Dec 17, 2024

mgadewoll Dec 16, 2024

andreadelrio Dec 16, 2024

gvnmagni Dec 17, 2024

joana-cps Dec 17, 2024

gvnmagni Dec 17, 2024

cnasikas Dec 18, 2024

joana-cps Dec 18, 2024

cnasikas Dec 18, 2024 •

edited

Loading

joana-cps Dec 18, 2024

mgadewoll Dec 18, 2024

mgadewoll Dec 16, 2024

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

adcoelho Dec 18, 2024

georgianaonoleata1904 Dec 18, 2024

elasticmachine commented Dec 18, 2024

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


		const { color, label } = severityData[severity];

		return <EuiHealth color={color}>{label}</EuiHealth>;

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

Are you sure you want to change the base?

[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

georgianaonoleata1904 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

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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Dec 18, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

georgianaonoleata1904 commented Dec 16, 2024 •

edited

Loading

georgianaonoleata1904 Dec 17, 2024 •

edited

Loading

cnasikas Dec 18, 2024 •

edited

Loading

mgadewoll Dec 17, 2024 •

edited

Loading

andreadelrio Dec 17, 2024 •

edited

Loading