all non-lens

elastic · Feb 4, 2025 · 4490ea4 · 4490ea4
1 parent 89ece5b
commit 4490ea4
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 56 deletions.
diff --git a/...nt-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx b/...nt-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx
@@ -9,13 +9,12 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker, useEuiTheme } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker, UseEuiTheme } from '@elastic/eui';
 import moment from 'moment';
 import type {
   PointInTimeEventAnnotationConfig,
   RangeEventAnnotationConfig,
 } from '@kbn/event-annotation-common';
-import { css } from '@emotion/react';
 import { isRangeAnnotationConfig } from '../..';
 import { defaultRangeAnnotationLabel, defaultAnnotationLabel } from './helpers';
 import { toLineAnnotationColor, toRangeAnnotationColor } from './helpers';
@@ -85,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,
@@ -100,22 +108,13 @@ export const ConfigPanelRangeDatePicker = ({
   calendarClassName: string | undefined;
   dataTestSubj?: string;
 }) => {
-  const { euiTheme } = useEuiTheme();
-
   return (
     <EuiFormRow
       display="rowCompressed"
       label={label}
       fullWidth
       className="lnsRowCompressedMargin"
-      css={css`
-        & + .lnsRowCompressedMargin {
-          margin-top: ${euiTheme.size.s};
-        }
-        .euiFormControlLayout__prepend {
-          min-width: 50px; // makes both labels ("from" and "to") the same width
-        }
-      `}
+      css={RowCompressedMarginStyle}
     >
       <EuiDatePicker
         compressed

diff --git a/...-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx b/...-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, useEuiTheme } 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';
@@ -25,7 +25,6 @@ import {
 } from '@kbn/visualization-ui-components';
 import { DataView } from '@kbn/data-views-plugin/common';
 import type { QueryPointEventAnnotationConfig } from '@kbn/event-annotation-common';
-import { css } from '@emotion/react';
 
 export const MAX_TOOLTIP_FIELDS_SIZE = 3;
 
@@ -44,13 +43,16 @@ function removeNewEmptyField(v: string) {
 
 const generateId = htmlIdGenerator();
 
+const NewBucketButtonStyles = ({ euiTheme }: UseEuiTheme) => `
+ margin-top: ${euiTheme.size.xs};
+`;
+
 interface LocalFieldEntry {
   name: string;
   id: string;
 }
 
 export function TooltipSection({ currentConfig, setConfig, dataView }: FieldInputsProps) {
-  const { euiTheme } = useEuiTheme();
   const { hasFieldData } = useExistingFieldsReader();
 
   // This is a local list that governs the state of UI, including empty fields which
@@ -80,9 +82,7 @@ export function TooltipSection({ currentConfig, setConfig, dataView }: FieldInpu
 
   const addFieldButton = (
     <NewBucketButton
-      css={css`
-        margin-top: ${euiTheme.size.xs};
-      `}
+      css={NewBucketButtonStyles}
       data-test-subj={`lnsXY-annotation-tooltip-add_field`}
       onClick={() => {
         setFields([...currentFields, { name: '', id: generateId() }]);

diff --git a/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json b/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json
@@ -10,6 +10,7 @@
   },
   "include": [
     "**/*",
+    "../../../../../typings/**/*",
   ],
   "exclude": [
     "target/**/*"

diff --git a/...m/packages/shared/kbn-visualization-ui-components/components/dimension_editor_section.tsx b/...m/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, useEuiTheme } from '@elastic/eui';
+import { EuiTitle, UseEuiTheme } from '@elastic/eui';
 import React from 'react';
-import { css } from '@emotion/react';
 
 export const DimensionEditorSection = ({
   children,
@@ -18,38 +17,14 @@ export const DimensionEditorSection = ({
   title?: string;
   children?: React.ReactNode | React.ReactNode[];
 }) => {
-  const { euiTheme } = useEuiTheme();
-
   return (
-    <div
-      css={css`
-        padding-bottom: ${euiTheme.size.base};
-        padding-top: ${euiTheme.size.base};
-        &:first-child {
-          padding-top: 0;
-        }
-      `}
-    >
-      <div
-        css={css`
-          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};
-          }
-        `}
-      />
+    <div css={DimensionEditorSectionStyles.self}>
+      <div css={DimensionEditorSectionStyles.divider} />
       {title && (
         <EuiTitle
           size="xxs"
           data-test-subj="lnsDimensionEditorSectionHeading"
-          css={css`
-            padding-bottom: ${euiTheme.size.base};
-          `}
+          css={DimensionEditorSectionStyles.heading}
         >
           <h3>{title}</h3>
         </EuiTitle>
@@ -58,3 +33,27 @@ export const DimensionEditorSection = ({
     </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};
+  `,
+};
diff --git a/...ages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx b/...ages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx
@@ -20,7 +20,7 @@ import {
   EuiPopoverProps,
   euiTextBreakWord,
   useEuiFontSize,
-  useEuiTheme,
+  UseEuiTheme,
 } from '@elastic/eui';
 import type { DataViewBase, Query } from '@kbn/es-query';
 import { css } from '@emotion/react';
@@ -49,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,
@@ -72,8 +79,6 @@ export function FilterQueryInput({
     dataView
   );
 
-  const { euiTheme } = useEuiTheme();
-
   return (
     <EuiFormRow
       display="rowCompressed"
@@ -123,12 +128,7 @@ export function FilterQueryInput({
                       onClick={() => {
                         setFilterPopoverOpen(!filterPopoverOpen);
                       }}
-                      css={css`
-                        ${euiTextBreakWord()};
-                        ${useEuiFontSize('s')};
-                        min-height: ${euiTheme.size.xl};
-                        width: 100%;
-                      `}
+                      css={LinkStyles}
                       color={isInputFilterValid ? 'text' : 'danger'}
                       title={i18n.translate(
                         'visualizationUiComponents.filterQueryInput.clickToEdit',

diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/tsconfig.json b/src/platform/packages/shared/kbn-visualization-ui-components/tsconfig.json
@@ -11,6 +11,7 @@
   },
   "include": [
     "**/*",
+    "../../../../../typings/**/*"
   ],
   "exclude": [
     "target/**/*"