wip lens

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.scss

@@ -1,3 +0,0 @@
-.lnsDynamicColoringRow {
-  align-items: center;
-}

x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.tsx

@@ -17,15 +17,14 @@ import {
 import { GaugeTicksPositions, GaugeColorModes } from '@kbn/expression-gauge-plugin/common';
 import { getMaxValue, getMinValue } from '@kbn/expression-gauge-plugin/public';
 import { TooltipWrapper } from '@kbn/visualization-utils';
+import { css } from '@emotion/react';
 import { isNumericFieldForDatatable } from '../../../common/expressions/datatable/utils';
 import { PalettePanelContainer } from '../../shared_components';
 import type { VisualizationDimensionEditorProps } from '../../types';
 import type { GaugeVisualizationState } from './constants';
 import { defaultPaletteParams } from './palette_config';
 import { getAccessorsFromState } from './utils';
 
-import './dimension_editor.scss';
-
 export function GaugeDimensionEditor(
   props: VisualizationDimensionEditorProps<GaugeVisualizationState> & {
     paletteService: PaletteRegistry;
@@ -74,7 +73,9 @@ export function GaugeDimensionEditor(
         label={i18n.translate('xpack.lens.gauge.dynamicColoring.label', {
           defaultMessage: 'Band colors',
         })}
-        className="lnsDynamicColoringRow"
+        css={css`
+          align-items: center;
+        `}
       >
         <EuiSwitch
           data-test-subj="lnsDynamicColoringGaugeSwitch"
@@ -111,12 +112,14 @@ export function GaugeDimensionEditor(
       {hasDynamicColoring && (
         <>
           <EuiFormRow
-            className="lnsDynamicColoringRow"
             display="columnCompressed"
             fullWidth
             label={i18n.translate('xpack.lens.paletteMetricGradient.label', {
               defaultMessage: 'Color mapping',
             })}
+            css={css`
+              align-items: center;
+            `}
           >
             <PalettePanelContainer
               palette={displayStops.map(({ color }) => color)}

x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.tsx

@@ -11,9 +11,9 @@ import { EuiFormRow } from '@elastic/eui';
 import { CustomizablePalette, PaletteRegistry } from '@kbn/coloring';
 import type { VisualizationDimensionEditorProps } from '../../types';
 import { PalettePanelContainer } from '../../shared_components';
-import './dimension_editor.scss';
 import type { HeatmapVisualizationState } from './types';
 import { getSafePaletteParams } from './utils';
+import { css } from '@emotion/react';
 
 export function HeatmapDimensionEditor(
   props: VisualizationDimensionEditorProps<HeatmapVisualizationState> & {
@@ -37,12 +37,14 @@ export function HeatmapDimensionEditor(
   return (
     <>
       <EuiFormRow
-        className="lnsDynamicColoringRow"
         display="columnCompressed"
         fullWidth
         label={i18n.translate('xpack.lens.paletteHeatmapGradient.label', {
           defaultMessage: 'Color',
         })}
+        css={css`
+          align-items: center;
+        `}
       >
         <PalettePanelContainer
           palette={displayStops.map(({ color }) => color)}

x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.tsx

@@ -14,14 +14,13 @@ import {
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ColorMode } from '@kbn/charts-plugin/common';
+import { css } from '@emotion/react';
 import type { LegacyMetricState } from '../../../common/types';
 import { isNumericFieldForDatatable } from '../../../common/expressions/datatable/utils';
 import { PalettePanelContainer } from '../../shared_components';
 import type { VisualizationDimensionEditorProps } from '../../types';
 import { defaultPaletteParams } from './palette_config';
 
-import './dimension_editor.scss';
-
 const idPrefix = htmlIdGenerator()();
 
 export function MetricDimensionEditor(
@@ -134,12 +133,14 @@ export function MetricDimensionEditor(
       </EuiFormRow>
       {hasDynamicColoring && (
         <EuiFormRow
-          className="lnsDynamicColoringRow"
           display="columnCompressed"
           fullWidth
           label={i18n.translate('xpack.lens.paletteMetricGradient.label', {
             defaultMessage: 'Color mapping',
           })}
+          css={css`
+            align-items: center;
+          `}
         >
           <PalettePanelContainer
             palette={stops.map(({ color }) => color)}