From 5ea1c452d92b7c831c83323ceab771bb56954ac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Georgiana-Andreea=20Onolea=C8=9B=C4=83?= Date: Mon, 16 Dec 2024 12:16:14 +0200 Subject: [PATCH] [ResponseOps][UI] EUI Visual Refresh integration and QA - replaced deprecated color variables (#203120) Closes https://github.com/elastic/kibana/issues/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 --- .../rule_form/src/rule_actions/rule_actions_item.tsx | 7 +++---- .../src/rule_actions/rule_actions_system_actions_item.tsx | 4 ++-- .../rule_form_errors/rule_form_error_prompt_wrapper.tsx | 6 ++++-- .../response-ops/rule_form/src/rule_page/rule_page.tsx | 5 +++-- .../public/components/streaming_response.tsx | 4 ++-- .../cases/public/components/recent_cases/recent_cases.tsx | 2 +- .../components/text_area_with_autocomplete/index.tsx | 3 +-- .../alert_summary_widget/components/alert_counts.tsx | 2 +- .../components/rule_execution_summary_and_chart.tsx | 2 +- .../components/rule_snooze/panel/base_snooze_panel.tsx | 4 +++- 10 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx index d3a77b21c1379..94773a4c361b9 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx +++ b/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx @@ -16,7 +16,6 @@ import { EuiPanel, EuiButtonIcon, useEuiTheme, - useEuiBackgroundColor, EuiIcon, EuiText, EuiTabs, @@ -110,9 +109,9 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => { } = useRuleFormState(); const [tab, setTab] = useState(MESSAGES_TAB); - const subdued = useEuiBackgroundColor('subdued'); - const plain = useEuiBackgroundColor('plain'); const { euiTheme } = useEuiTheme(); + const subdued = euiTheme.colors.lightestShade; + const plain = euiTheme.colors.backgroundBasePlain; const [availableActionVariables, setAvailableActionVariables] = useState(() => { if (!selectedRuleType.actionVariables) { @@ -692,7 +691,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => { } buttonContentClassName="eui-fullWidth" buttonContent={ - + {accordionIcon} {connectorTitle} diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx index 4ed0305ec6e8d..a545956e0232f 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx +++ b/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx @@ -126,8 +126,8 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem >({}); const [warning, setWarning] = useState(null); - const subdued = useEuiBackgroundColor('subdued'); const { euiTheme } = useEuiTheme(); + const subdued = euiTheme.colors.lightestShade; const dispatch = useRuleFormDispatch(); const actionTypeModel = actionTypeRegistry.get(action.actionTypeId); @@ -267,7 +267,7 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem buttonContent={ diff --git a/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx b/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx index 359a7cc911a3e..b35e29ead0302 100644 --- a/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx +++ b/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { useEuiBackgroundColorCSS, EuiPageTemplate } from '@elastic/eui'; +import { EuiPageTemplate } from '@elastic/eui'; interface RuleFormErrorPromptWrapperProps { hasBorder?: boolean; @@ -18,7 +18,9 @@ interface RuleFormErrorPromptWrapperProps { export const RuleFormErrorPromptWrapper: React.FC< React.PropsWithChildren > = ({ children, hasBorder, hasShadow }) => { - const styles = useEuiBackgroundColorCSS().transparent; + const styles = { + backgroundColor: 'transparent', + }; return ( diff --git a/packages/response-ops/rule_form/src/rule_page/rule_page.tsx b/packages/response-ops/rule_form/src/rule_page/rule_page.tsx index 58f16403ecc12..b57ba74428dfb 100644 --- a/packages/response-ops/rule_form/src/rule_page/rule_page.tsx +++ b/packages/response-ops/rule_form/src/rule_page/rule_page.tsx @@ -18,7 +18,6 @@ import { EuiSpacer, EuiSteps, EuiStepsProps, - useEuiBackgroundColorCSS, } from '@elastic/eui'; import { checkActionFormActionTypeEnabled } from '@kbn/alerts-ui-shared'; import React, { useCallback, useMemo, useState } from 'react'; @@ -70,7 +69,9 @@ export const RulePage = (props: RulePageProps) => { const canReadConnectors = !!application.capabilities.actions?.show; - const styles = useEuiBackgroundColorCSS().transparent; + const styles = { + backgroundColor: 'transparent', + }; const onSaveInternal = useCallback(() => { onSave({ diff --git a/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx b/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx index 8cba309a1274e..1c3bdf0c9a655 100644 --- a/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx +++ b/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx @@ -150,13 +150,13 @@ export const StreamingResponse = ({ id={`streamingResponse`} css={css` .euiButtonIcon { - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; } `} buttonContent={ - + {i18n.translate( 'genAiStreamingResponseExample.app.component.streamingResponseTitle', diff --git a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx index f3a276d66a9c0..1d17ea74777e8 100644 --- a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx +++ b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx @@ -28,7 +28,7 @@ import { useCasesContext } from '../cases_context/use_cases_context'; const getMarkdownContainerCss = (euiTheme: EuiThemeComputed<{}>) => css` max-height: 150px; overflow-y: auto; - color: ${euiTheme.colors.subduedText}; + color: ${euiTheme.colors.textSubdued}; `; const getTruncateCompCss = css` diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx index da3b08fda8e18..2d574bb19a6f9 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx @@ -17,7 +17,6 @@ import { EuiHighlight, EuiOutsideClickDetector, useEuiTheme, - useEuiBackgroundColor, } from '@elastic/eui'; import { ActionVariable } from '@kbn/alerting-plugin/common'; import { AddMessageVariables } from '@kbn/alerts-ui-shared'; @@ -48,7 +47,7 @@ export const TextAreaWithAutocomplete: React.FunctionComponent { const { euiTheme } = useEuiTheme(); - const backgroundColor = useEuiBackgroundColor('plain'); + const backgroundColor = euiTheme.colors.backgroundBasePlain; const textAreaRef = React.useRef(null); const selectableRef = React.useRef(null); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx index c9f83a0eee527..10a62046b0ab9 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx @@ -41,7 +41,7 @@ export const AlertCounts = ({ activeAlertCount, recoveredAlertCount, handleClick 0 ? euiTheme.colors.dangerText : euiTheme.colors.textSuccess} + color={activeAlertCount > 0 ? euiTheme.colors.textDanger : euiTheme.colors.textSuccess} alertType={ALERT_STATUS_ACTIVE} handleClick={handleClick} showWarningIcon={true} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx index d5d740748b371..de85e91f42361 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx @@ -192,7 +192,7 @@ export const RuleExecutionSummaryAndChart = (props: RuleExecutionSummaryAndChart )} - + {formatMillisForDisplay(computedRuleSummary.executionDuration.average)} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx index 3d6523a144e99..859da54a845f2 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx @@ -223,7 +223,9 @@ export const BaseSnoozePanel: React.FunctionComponent = ({ height: '36px', // Replicate euiPanel--accent vs euiPanel--subdued // Applying these classNames by themselves doesn't work due to a CSS-in-JS issue with EuiPanel - 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, }} className="euiButton euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--noBorder"