[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './index.scss';
 import { isFieldLensCompatible } from '@kbn/visualization-ui-components';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
@@ -365,7 +364,6 @@ const AnnotationEditorControls = ({
         >
           <EuiFormRow
             display="rowCompressed"
-            className="lnsRowCompressedMargin"
             fullWidth
             label={i18n.translate('eventAnnotationComponents.xyChart.annotation.tooltip', {
               defaultMessage: 'Show additional fields',

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx

@@ -70,7 +70,6 @@ export const ConfigPanelQueryAnnotation = ({
       <EuiFormRow
         hasChildLabel
         display="rowCompressed"
-        className="lnsRowCompressedMargin"
         fullWidth
         label={i18n.translate('eventAnnotationComponents.xyChart.annotation.queryInput', {
           defaultMessage: 'Annotation query',

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx

@@ -9,7 +9,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker, UseEuiTheme } from '@elastic/eui';
 import moment from 'moment';
 import type {
   PointInTimeEventAnnotationConfig,
@@ -31,7 +31,7 @@ export const ConfigPanelApplyAsRangeSwitch = ({
 }) => {
   const isRange = isRangeAnnotationConfig(annotation);
   return (
-    <EuiFormRow display="columnCompressed" className="lnsRowCompressedMargin">
+    <EuiFormRow display="columnCompressed">
       <EuiSwitch
         data-test-subj="lns-xyAnnotation-rangeSwitch"
         label={
@@ -84,6 +84,15 @@ export const ConfigPanelApplyAsRangeSwitch = ({
   );
 };
 
+const RowCompressedMarginStyle = ({ euiTheme }: UseEuiTheme) => `
+  & + .lnsRowCompressedMargin {
+    margin-top: ${euiTheme.size.s};
+  }
+  .euiFormControlLayout__prepend {
+    min-width: 50px; // makes both labels ("from" and "to") the same width
+  }
+`;
+
 export const ConfigPanelRangeDatePicker = ({
   value,
   label,
@@ -102,9 +111,10 @@ export const ConfigPanelRangeDatePicker = ({
   return (
     <EuiFormRow
       display="rowCompressed"
-      fullWidth
       label={label}
-      className="lnsConfigPanelAnnotations__date lnsRowCompressedMargin"
+      fullWidth
+      className="lnsRowCompressedMargin"
+      css={RowCompressedMarginStyle}
     >
       <EuiDatePicker
         compressed

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFlexItem, EuiPanel, EuiText, htmlIdGenerator } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel, EuiText, UseEuiTheme, htmlIdGenerator } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useCallback, useState } from 'react';
 import fastIsEqual from 'fast-deep-equal';
@@ -43,6 +43,10 @@ function removeNewEmptyField(v: string) {
 
 const generateId = htmlIdGenerator();
 
+const NewBucketButtonStyles = ({ euiTheme }: UseEuiTheme) => `
+ margin-top: ${euiTheme.size.xs};
+`;
+
 interface LocalFieldEntry {
   name: string;
   id: string;
@@ -78,7 +82,7 @@ export function TooltipSection({ currentConfig, setConfig, dataView }: FieldInpu
 
   const addFieldButton = (
     <NewBucketButton
-      className="lnsConfigPanelAnnotations__addButton"
+      css={NewBucketButtonStyles}
       data-test-subj={`lnsXY-annotation-tooltip-add_field`}
       onClick={() => {
         setFields([...currentFields, { name: '', id: generateId() }]);

src/platform/packages/shared/kbn-event-annotation-components/package.json

@@ -2,8 +2,5 @@
   "name": "@kbn/event-annotation-components",
   "private": true,
   "version": "1.0.0",
-  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
-  "sideEffects": [
-    "*.scss"
-  ]
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
 }

src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json

@@ -10,6 +10,7 @@
   },
   "include": [
     "**/*",
+    "../../../../../typings/**/*",
   ],
   "exclude": [
     "target/**/*"

src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx

@@ -10,7 +10,6 @@
 import React from 'react';
 import { EuiColorPaletteDisplay } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { AccessorConfig } from './types';
 
 export function PaletteIndicator({ accessorConfig }: { accessorConfig: AccessorConfig }) {
@@ -25,12 +24,7 @@ export function PaletteIndicator({ accessorConfig }: { accessorConfig: AccessorC
       `}
     >
       <EuiColorPaletteDisplay
-        className="lnsLayerPanel__palette"
         css={css`
-          height: ${euiThemeVars.euiSizeXS} / 2;
-          border-radius: 0 0 (${euiThemeVars.euiBorderRadius} - 1px)
-            (${euiThemeVars.euiBorderRadius} - 1px);
-
           &::after {
             border: none;
           }

src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_editor_section.tsx

@@ -7,9 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiTitle } from '@elastic/eui';
+import { EuiTitle, UseEuiTheme } from '@elastic/eui';
 import React from 'react';
-import './dimension_editor_section.scss';
 
 export const DimensionEditorSection = ({
   children,
@@ -19,14 +18,42 @@ export const DimensionEditorSection = ({
   children?: React.ReactNode | React.ReactNode[];
 }) => {
   return (
-    <div className="lnsDimensionEditorSection">
-      <div className="lnsDimensionEditorSection__border" />
+    <div css={DimensionEditorSectionStyles.self}>
+      <div css={DimensionEditorSectionStyles.divider} />
       {title && (
-        <EuiTitle size="xxs" className="lnsDimensionEditorSection__heading">
+        <EuiTitle
+          size="xxs"
+          data-test-subj="lnsDimensionEditorSectionHeading"
+          css={DimensionEditorSectionStyles.heading}
+        >
           <h3>{title}</h3>
         </EuiTitle>
       )}
       {children}
     </div>
   );
 };
+
+const DimensionEditorSectionStyles = {
+  self: ({ euiTheme }: UseEuiTheme) => `
+    padding-bottom: ${euiTheme.size.base};
+    padding-top: ${euiTheme.size.base};
+    &:first-child {
+      padding-top: 0;
+    }
+  `,
+  divider: ({ euiTheme }: UseEuiTheme) => `
+    position: relative;
+    &:before {
+      content: '';
+      position: absolute;
+      top: -${euiTheme.size.base};
+      right: -${euiTheme.size.base};
+      left: -${euiTheme.size.base};
+      border-top: 1px solid ${euiTheme.colors.lightShade};
+    }
+  `,
+  heading: ({ euiTheme }: UseEuiTheme) => `
+    padding-bottom: ${euiTheme.size.base};
+  `,
+};

src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/new_bucket_button.tsx

@@ -14,15 +14,13 @@ interface NewBucketButtonProps {
   label: string;
   onClick: () => void;
   isDisabled?: boolean;
-  className?: string;
   'data-test-subj'?: string;
 }
 
 export const NewBucketButton = ({
   label,
   onClick,
   isDisabled,
-  className,
   'data-test-subj': dataTestSubj = 'lns-newBucket-add',
 }: NewBucketButtonProps) => (
   <EuiButtonEmpty
@@ -32,7 +30,6 @@ export const NewBucketButton = ({
     onClick={onClick}
     isDisabled={isDisabled}
     flush="left"
-    className={className}
   >
     {label}
   </EuiButtonEmpty>

src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.tsx

@@ -7,12 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './field_picker.scss';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import classNames from 'classnames';
 import { comboBoxFieldOptionMatcher } from '@kbn/field-utils';
-import { EuiComboBox, EuiComboBoxOptionOption, EuiComboBoxProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiComboBoxProps, useEuiTheme } from '@elastic/eui';
 import { FieldIcon } from '@kbn/field-utils/src/components/field_icon';
 import { calculateWidthFromCharCount } from '@kbn/calculate-width-from-char-count';
 import type { FieldOptionValue, FieldOption } from './types';
@@ -43,6 +41,7 @@ export function FieldPicker<T extends FieldOptionValue = FieldOptionValue>(
     ...rest
   } = props;
 
+  const { euiTheme } = useEuiTheme();
   const [selectedOption, setSelectedOption] = React.useState(activeField);
 
   let maxLabelLength = 0;
@@ -63,10 +62,10 @@ export function FieldPicker<T extends FieldOptionValue = FieldOptionValue>(
                 className="eui-alignMiddle"
               />
             ) : null,
-            className: classNames({
-              'lnFieldPicker__option--incompatible': !fieldOption.compatible,
-              'lnFieldPicker__option--nonExistant': !fieldOptionExists,
-            }),
+            css: {
+              color: !fieldOption.compatible ? euiTheme.colors.lightShade : undefined,
+              backgroundColor: !fieldOptionExists ? euiTheme.colors.lightestShade : undefined,
+            },
           };
         }),
       };
@@ -77,10 +76,10 @@ export function FieldPicker<T extends FieldOptionValue = FieldOptionValue>(
       prepend: otherAttr.value.dataType ? (
         <FieldIcon type={otherAttr.value.dataType} fill="none" className="eui-alignMiddle" />
       ) : null,
-      className: classNames({
-        'lnFieldPicker__option--incompatible': !compatible,
-        'lnFieldPicker__option--nonExistant': !exists,
-      }),
+      css: {
+        color: !compatible ? euiTheme.colors.lightShade : undefined,
+        backgroundColor: !exists ? euiTheme.colors.lightestShade : undefined,
+      },
     };
   });
 

src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx

@@ -18,11 +18,14 @@ import {
   EuiFlexGroup,
   EuiIconTip,
   EuiPopoverProps,
+  euiTextBreakWord,
+  useEuiFontSize,
+  UseEuiTheme,
 } from '@elastic/eui';
 import type { DataViewBase, Query } from '@kbn/es-query';
+import { css } from '@emotion/react';
 import { QueryInput, validateQuery } from '.';
 import type { QueryInputServices } from '.';
-import './filter_query_input.scss';
 
 const filterByLabel = i18n.translate('visualizationUiComponents.filterQueryInput.label', {
   defaultMessage: 'Filter by',
@@ -46,6 +49,13 @@ export interface FilterQueryInputProps {
   appName: string;
 }
 
+const LinkStyles = ({ euiTheme }: UseEuiTheme) => `
+  ${euiTextBreakWord()};
+  ${useEuiFontSize('s')};
+  min-height: ${euiTheme.size.xl};
+  width: 100%;
+`;
+
 export function FilterQueryInput({
   inputFilter,
   onChange,
@@ -100,6 +110,11 @@ export function FilterQueryInput({
             isOpen={filterPopoverOpen}
             closePopover={onClosePopup}
             display="block"
+            panelProps={{
+              css: css`
+                width: 960px;
+              `,
+            }}
             panelClassName="filterQueryInput__popover"
             initialFocus={dataTestSubj ? `textarea[data-test-subj='${dataTestSubj}']` : undefined}
             button={
@@ -113,6 +128,7 @@ export function FilterQueryInput({
                       onClick={() => {
                         setFilterPopoverOpen(!filterPopoverOpen);
                       }}
+                      css={LinkStyles}
                       color={isInputFilterValid ? 'text' : 'danger'}
                       title={i18n.translate(
                         'visualizationUiComponents.filterQueryInput.clickToEdit',