Skip to content

[ResponseOps] [UI] Color palette tokens and functions dynamically update with theme changes#203448

Merged
georgianaonoleata1904 merged 12 commits intoelastic:ro_eui_theme_borealisfrom
georgianaonoleata1904:eui-visual-refresh-task3
Dec 16, 2024
Merged

[ResponseOps] [UI] Color palette tokens and functions dynamically update with theme changes#203448
georgianaonoleata1904 merged 12 commits intoelastic:ro_eui_theme_borealisfrom
georgianaonoleata1904:eui-visual-refresh-task3

Conversation

@georgianaonoleata1904
Copy link
Contributor

@georgianaonoleata1904 georgianaonoleata1904 commented Dec 9, 2024

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'

},
};

// eslint-disable-next-line react/display-name
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please don't forget to add the display name and remove this warning

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, thanks!

import { CRITICAL, HIGH, LOW, MEDIUM } from './translations';

interface Props {
severity: 'low' | 'medium' | 'high' | 'critical';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be an enum? Ideally we would use the enum defined in x-pack/plugins/cases/common/types/domain/case/v1.ts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed to be CaseSeverity from /types/domain

}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this will be removed in favour of the SeverityHealth component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed it and used the new SeverityHealth component

};

// eslint-disable-next-line react/display-name
export const SeverityHealth: React.FC<Props> = ({ severity, label }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the label is also something that is known best here internally. This component should know what color-label combination should be shown depending on the severity

Copy link
Contributor Author

@georgianaonoleata1904 georgianaonoleata1904 Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, the label is now internally.

@georgianaonoleata1904 georgianaonoleata1904 changed the title [ResponseOps] [UI] Update to new token name [ResponseOps] [UI] Color palette tokens and functions dynamically update with theme changes Dec 13, 2024
@georgianaonoleata1904 georgianaonoleata1904 self-assigned this Dec 13, 2024
@georgianaonoleata1904 georgianaonoleata1904 added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:ResponseOps Platform ResponseOps team (formerly the Cases and Alerting teams) t// v9.0.0 EUI Visual Refresh labels Dec 13, 2024
@georgianaonoleata1904 georgianaonoleata1904 marked this pull request as ready for review December 13, 2024 08:33
@georgianaonoleata1904 georgianaonoleata1904 requested a review from a team as a code owner December 13, 2024 08:33
@elasticmachine
Copy link
Contributor

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

@georgianaonoleata1904 georgianaonoleata1904 changed the base branch from main to ro_eui_theme_borealis December 16, 2024 09:31
@elasticmachine
Copy link
Contributor

elasticmachine commented Dec 16, 2024

💔 Build Failed

Failed CI Steps

History

cc @georgianaonoleata1904

@georgianaonoleata1904 georgianaonoleata1904 merged commit 5f20ac6 into elastic:ro_eui_theme_borealis Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting EUI Visual Refresh release_note:skip Skip the PR/issue when compiling release notes Team:ResponseOps Platform ResponseOps team (formerly the Cases and Alerting teams) t// v9.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Response Ops][UI] Color palette tokens and functions dynamically update with theme changes

4 participants