From c0560be528abe72ec1cdb5d7d8a2d885c7faeaf6 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 4 Mar 2025 00:32:06 +1100 Subject: [PATCH] [8.x] [Lens/SCSS] Replace expression legacy metric scss (#209546) (#212884) # Backport This will backport the following commits from `main` to `8.x`: - [[Lens/SCSS] Replace expression legacy metric scss (#209546)](https://github.com/elastic/kibana/pull/209546) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com> --- .../public/components/metric.scss | 56 ------------------- .../public/components/metric_component.tsx | 2 - .../public/components/metric_value.tsx | 44 +++++++++++++++ .../metric_vis_renderer.tsx | 15 ++++- .../expression_legacy_metric/tsconfig.json | 1 + .../page_objects/visualize_editor_page.ts | 2 +- 6 files changed, 60 insertions(+), 60 deletions(-) delete mode 100644 src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss deleted file mode 100644 index 59d06546da494..0000000000000 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss +++ /dev/null @@ -1,56 +0,0 @@ -// Prefix all styles with "mtr" to avoid conflicts. -// Examples -// mtrChart -// mtrChart__legend -// mtrChart__legend--small -// mtrChart__legend-isLoading - -.legacyMtrVis { - height: 100%; - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - flex-wrap: wrap; - overflow: auto; - @include euiScrollBar; -} - -.legacyMtrVis__value { - @include euiTextTruncate; - font-weight: $euiFontWeightBold; -} - -.legacyMtrVis__container { - text-align: center; - padding: $euiSize; - display: flex; - flex-direction: column; -} - -.legacyMtrVis__container--light { - color: $euiColorEmptyShade; -} - -.legacyMtrVis__container-isfull { - min-height: 100%; - min-width: max-content; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - flex: 1 0 100%; -} - -.legacyMtrVis__container-isFilterable { - cursor: pointer; - transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance; - transform: translate(0, 0); - - &:hover, - &:focus { - box-shadow: none; - transform: translate(0, -2px); - } -} \ No newline at end of file diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx index e4e5078c84dd8..f7ae231413aea 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx @@ -24,8 +24,6 @@ import { formatValue, shouldApplyColor } from '../utils'; import { needsLightText } from '../utils/palette'; import { withAutoScale } from './with_auto_scale'; -import './metric.scss'; - export interface MetricVisComponentProps { visParams: Pick; visData: Datatable; diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index 8199a2ec1f842..e65d83f95794f 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -10,6 +10,8 @@ import React, { CSSProperties, useLayoutEffect } from 'react'; import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; +import { UseEuiTheme, euiTextTruncate } from '@elastic/eui'; +import { css } from '@emotion/react'; import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types'; interface MetricVisValueProps { @@ -24,6 +26,7 @@ interface MetricVisValueProps { export const MetricVisValue = (props: MetricVisValueProps) => { const { style, metric, onFilter, labelConfig, colorFullBackground, autoScale } = props; + const containerClassName = classNames('legacyMtrVis__container', { 'legacyMtrVis__container--light': metric.lightText, 'legacyMtrVis__container-isfilterable': onFilter, @@ -38,11 +41,13 @@ export const MetricVisValue = (props: MetricVisValueProps) => { const metricComponent = (
{ return metricComponent; }; + +const styles = { + legacyMtrVisValue: ({ euiTheme }: UseEuiTheme) => + css` + ${euiTextTruncate()}; + font-weight: ${euiTheme.font.weight.bold}; + `, + legacyMtrVisContainer: ({ euiTheme }: UseEuiTheme) => + css({ + '&.legacyMtrVis__container': { + textAlign: 'center', + padding: euiTheme.size.base, + display: 'flex', + flexDirection: 'column', + }, + '&.legacyMtrVis__container--light': { + color: euiTheme.colors.emptyShade, + }, + '&.legacyMtrVis__container-isfull': { + minHeight: '100%', + minWidth: 'max-content', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + flex: '1 0 100%', + }, + '&.legacyMtrVis__container-isfilterable': { + cursor: 'pointer', + transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`, + transform: 'translate(0, 0)', + + '&:hover, &:focus': { + boxShadow: 'none', + transform: 'translate(0, -2px)', + }, + }, + }), +}; diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx index 45573fbdd13b4..e086508040259 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -27,6 +27,7 @@ import { extractContainerType, extractVisualizationType, } from '@kbn/chart-expressions-common'; +import { css } from '@emotion/react'; import { ExpressionLegacyMetricPluginStart } from '../plugin'; import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common'; @@ -113,10 +114,11 @@ export const getMetricVisRenderer: (