[Lens] Make metric color fill the entire space (#122091)

* ✨ Make color fill maximise space usage

* ✅ Update tests

* 🐛 Fix for dark mode

* ✅ Update tests

* 🐛 Fix tests and simplified code

* 💄 Use euiTextColor in the appropriate context based on theme

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/public/metric_visualization/expression.scss

@@ -16,5 +16,6 @@
 
   .lnsMetricExpression__title {
     font-size: $euiSizeXL;
+    color: $euiTextColor;
   }
 }

x-pack/plugins/lens/public/metric_visualization/expression.test.tsx

@@ -8,7 +8,7 @@
 import { MetricChart } from './expression';
 import { MetricConfig, metricChart } from '../../common/expressions';
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
 import type { IFieldFormat } from '../../../../../src/plugins/field_formats/common';
 import { layerTypes } from '../../common';
@@ -94,6 +94,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="3"
@@ -101,7 +102,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               3
             </div>
@@ -132,6 +132,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="last"
@@ -139,7 +140,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               last
             </div>
@@ -169,6 +169,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="3"
@@ -176,7 +177,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               3
             </div>
@@ -206,6 +206,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="3"
@@ -213,7 +214,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               3
             </div>
@@ -287,6 +287,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="0"
@@ -294,7 +295,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               0
             </div>
@@ -337,7 +337,7 @@ describe('metric_expression', () => {
         colors: ['red', 'yellow', 'green'],
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -346,7 +346,9 @@ describe('metric_expression', () => {
         />
       );
 
-      expect(instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')).toEqual(
+      expect(
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
+      ).toEqual(
         expect.objectContaining({
           color: 'red',
         })
@@ -368,7 +370,7 @@ describe('metric_expression', () => {
         continuity: 'above',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -378,7 +380,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -400,7 +402,7 @@ describe('metric_expression', () => {
         continuity: 'below',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -410,7 +412,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -433,7 +435,7 @@ describe('metric_expression', () => {
         continuity: 'none',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -443,7 +445,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -466,7 +468,7 @@ describe('metric_expression', () => {
         continuity: 'none',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -476,7 +478,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -499,7 +501,7 @@ describe('metric_expression', () => {
         continuity: 'all',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -508,7 +510,9 @@ describe('metric_expression', () => {
         />
       );
 
-      expect(instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')).toEqual(
+      expect(
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
+      ).toEqual(
         expect.objectContaining({
           color: 'green',
         })
@@ -530,7 +534,7 @@ describe('metric_expression', () => {
         continuity: 'all',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -539,7 +543,9 @@ describe('metric_expression', () => {
         />
       );
 
-      expect(instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')).toEqual(
+      expect(
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
+      ).toEqual(
         expect.objectContaining({
           color: 'red',
         })

x-pack/plugins/lens/public/metric_visualization/expression.tsx

@@ -98,7 +98,8 @@ function getColorStyling(
     [cssProp]: color,
   };
   if (colorMode === ColorMode.Background && color) {
-    styling.color = getContrastColor(color, isDarkTheme);
+    // set to "euiTextColor" for both light and dark color, depending on the theme
+    styling.color = getContrastColor(color, isDarkTheme, 'euiTextColor', 'euiTextColor');
   }
   return styling;
 }
@@ -143,13 +144,17 @@ export function MetricChart({
   const color = getColorStyling(rawValue, colorMode, palette, uiSettings.get('theme:darkMode'));
 
   return (
-    <VisualizationContainer className="lnsMetricExpression__container">
+    <VisualizationContainer className="lnsMetricExpression__container" style={color}>
       <AutoScale key={value}>
-        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value" style={color}>
+        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value">
           {value}
         </div>
         {mode === 'full' && (
-          <div data-test-subj="lns_metric_title" className="lnsMetricExpression__title">
+          <div
+            data-test-subj="lns_metric_title"
+            className="lnsMetricExpression__title"
+            style={colorMode === ColorMode.Background ? color : undefined}
+          >
             {metricTitle}
           </div>
         )}

x-pack/plugins/lens/public/shared_components/coloring/utils.ts

@@ -293,9 +293,17 @@ export function getColorStops(
   return freshColorStops;
 }
 
-export function getContrastColor(color: string, isDarkTheme: boolean) {
-  const darkColor = isDarkTheme ? euiDarkVars.euiColorInk : euiLightVars.euiColorInk;
-  const lightColor = isDarkTheme ? euiDarkVars.euiColorGhost : euiLightVars.euiColorGhost;
+export function getContrastColor(
+  color: string,
+  isDarkTheme: boolean,
+  darkTextProp: 'euiColorInk' | 'euiTextColor' = 'euiColorInk',
+  lightTextProp: 'euiColorGhost' | 'euiTextColor' = 'euiColorGhost'
+) {
+  // when in light theme both text color and colorInk are dark and the choice
+  // may depends on the specific context.
+  const darkColor = isDarkTheme ? euiDarkVars.euiColorInk : euiLightVars[darkTextProp];
+  // Same thing for light color in dark theme
+  const lightColor = isDarkTheme ? euiDarkVars[lightTextProp] : euiLightVars.euiColorGhost;
   const backgroundColor = isDarkTheme
     ? euiDarkVars.euiPageBackgroundColor
     : euiLightVars.euiPageBackgroundColor;

x-pack/test/functional/page_objects/lens_page.ts

@@ -1020,7 +1020,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
     },
 
     async getMetricStyle() {
-      const el = await testSubjects.find('lns_metric_value');
+      const el = await testSubjects.find('lnsVisualizationContainer');
       const styleString = await el.getAttribute('style');
       return styleString.split(';').reduce<Record<string, string>>((memo, cssLine) => {
         const [prop, value] = cssLine.split(':');