eui&team review changes

elastic · Dec 18, 2024 · ceaf0a3 · ceaf0a3
1 parent b204b08
commit ceaf0a3
Show file tree

Hide file tree

Showing 17 changed files with 35 additions and 39 deletions.
diff --git a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts
@@ -40,11 +40,11 @@ export function getServiceHealthStatusColor(
 ) {
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return euiTheme.colors.vis.euiColorVis0;
+      return euiTheme.colors.success;
     case ServiceHealthStatus.warning:
-      return euiTheme.colors.vis.euiColorVis5;
+      return euiTheme.colors.warning;
     case ServiceHealthStatus.critical:
-      return euiTheme.colors.vis.euiColorVis9;
+      return euiTheme.colors.danger;
     case ServiceHealthStatus.unknown:
       return euiTheme.colors.mediumShade;
   }
@@ -56,11 +56,11 @@ export function getServiceHealthStatusBadgeColor(
 ) {
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return euiTheme.colors.vis.euiColorVis0;
+      return euiTheme.colors.success;
     case ServiceHealthStatus.warning:
-      return euiTheme.colors.vis.euiColorVis5;
+      return euiTheme.colors.warning;
     case ServiceHealthStatus.critical:
-      return euiTheme.colors.vis.euiColorVis9;
+      return euiTheme.colors.danger;
     case ServiceHealthStatus.unknown:
       return euiTheme.colors.mediumShade;
   }

diff --git a/...servability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/...servability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
@@ -22,7 +22,7 @@ import {
   Tooltip,
   niceTimeFormatter,
 } from '@elastic/charts';
-import { EuiSpacer, useEuiTheme } from '@elastic/eui';
+import { COLOR_MODES_STANDARD, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { IUiSettingsClient } from '@kbn/core/public';
 import { TimeUnitChar } from '@kbn/observability-plugin/common';
@@ -122,7 +122,7 @@ export function ChartPreview({
           legendPosition={'bottom'}
           legendSize={legendSize}
           locale={i18n.getLocale()}
-          theme={theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
+          theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME}
         />
         <LineAnnotation
           dataValues={[{ dataValue: threshold }]}

diff --git a/...y_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx b/...y_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx
@@ -281,7 +281,7 @@ export function FieldStatsPopover({
         )}
         data-test-subj={'apmCorrelationsContextPopoverButton'}
         css={css`
-          marginleft: ${euiTheme.size.xs};
+          margin-left: ${euiTheme.size.xs};
         `}
       />
     </EuiToolTip>

diff --git a/...lity_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx b/...lity_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx
@@ -34,7 +34,7 @@ const CentralizedContainer = styled.div`
 
 const Border = styled.div`
   height: 55px;
-  border-right: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade};
+  border-right: ${({ theme }) => theme.euiTheme.border.thin};
 `;
 
 function VerticalRule() {

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx
@@ -109,8 +109,7 @@ export function Controls() {
   );
 
   const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
-  // @ts-expect-error
-  const duration = parseInt(euiTheme.animation.fast, 10);
+  const duration = euiTheme.animation.fast ? parseInt(euiTheme.animation.fast, 10) : 0;
   const downloadUrl = useDebugDownloadUrl(cy);
   const viewFullMapUrl = getLegacyApmHref({
     basePath,

diff --git a/...plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts b/...plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts
@@ -80,10 +80,9 @@ function getBorderWidth(el: cytoscape.NodeSingular) {
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 
 export const getAnimationOptions = (euiTheme: EuiThemeComputed): cytoscape.AnimationOptions => ({
-  // @ts-expect-error
-  duration: parseInt(euiTheme.animation.normal, 10),
+  duration: euiTheme.animation.normal ? parseInt(euiTheme.animation.normal, 10) : 0,
   // @ts-expect-error The cubic-bezier options here are not recognized by the cytoscape types
-  easing: euiTheme.animation.bouncetheme,
+  easing: euiTheme.animation.bounce,
 });
 
 const zIndexNode = 200;
@@ -124,7 +123,7 @@ const getStyle = (
         color: (el: cytoscape.NodeSingular) =>
           el.hasClass('primary') || el.selected()
             ? euiTheme.colors.textPrimary
-            : euiTheme.colors.text,
+            : euiTheme.colors.textParagraph,
         // theme.euiFontFamily doesn't work here for some reason, so we're just
         // specifying a subset of the fonts for the label text.
         'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',

diff --git a/...ugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx b/...ugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx
@@ -204,7 +204,7 @@ function SummaryMetric({
           css={css`
             ${xlFontSize}
             font-weight: ${euiTheme.font.weight.bold};
-            color: ${euiTheme.colors.text};
+            color: ${euiTheme.colors.textParagraph};
           `}
         >
           {value}

diff --git a/...tion_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx b/...tion_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx
@@ -211,14 +211,14 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => {
       forceState={node.expanded ? 'open' : 'closed'}
       onToggle={toggleAccordion}
       css={css`
-        border-top: 1px solid ${euiTheme.colors.lightShade};
+        border-top: ${euiTheme.border.thin};
         .button_${node.item.id} {
           width: 100%;
           height: ${ACCORDION_HEIGHT}px;
           margin-left: ${marginLeftLevel}px;
           border-left: ${hasError
-            ? `2px solid ${euiTheme.colors.danger};`
-            : `1px solid ${euiTheme.colors.lightShade};`};
+            ? `${euiTheme.border.width.thick} solid ${euiTheme.colors.danger};`
+            : `${euiTheme.border.thin};`};
           &:hover {
             background-color: ${euiTheme.colors.lightestShade};
           }

diff --git a/...ins/observability_solution/apm/public/components/shared/charts/timeline/timeline_axis.tsx b/...ins/observability_solution/apm/public/components/shared/charts/timeline/timeline_axis.tsx
@@ -76,7 +76,7 @@ export function TimelineAxis({ plotValues, marks = [], topTraceDuration }: Timel
               key="topTrace"
               x={topTraceDurationPosition}
               y={0}
-              fill={euiTheme.colors.text}
+              fill={euiTheme.colors.textParagraph}
               textAnchor="middle"
             >
               {tickFormatter(topTraceDuration).formatted}

diff --git a/...ins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js b/...ins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js
@@ -43,7 +43,7 @@ const Description = styled.div`
 `;
 
 const ListItem = styled.li`
-  font-size: ${() => useEuiFontSize('s').fontSize};
+  font-size: ${() => useEuiFontSize('xs').fontSize};
   height: ${({ theme }) => theme.euiTheme.size.xl};
   align-items: center;
   display: flex;

diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx
@@ -48,7 +48,7 @@ export function MLCallout({
       }
     | undefined;
 
-  const getLearnMoreLink = (color: 'primary' | 'accentSecondary') => {
+  const getLearnMoreLink = (color: 'primary' | 'success') => {
     return (
       <EuiButton
         data-test-subj="apmGetLearnMoreLinkButton"
@@ -106,7 +106,7 @@ export function MLCallout({
         primaryAction: isOnSettingsPage ? (
           <EuiButton
             data-test-subj="apmMLCalloutUpdateJobsButton"
-            color="accentSecondary"
+            color="success"
             isLoading={loading}
             onClick={() => {
               setLoading(true);
@@ -120,7 +120,7 @@ export function MLCallout({
             })}
           </EuiButton>
         ) : (
-          getLearnMoreLink('accentSecondary')
+          getLearnMoreLink('success')
         ),
       };
       break;

diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx
@@ -52,7 +52,7 @@ const LineNumber = styled.div<{ highlight: boolean }>`
   color: ${({ theme }) => theme.euiTheme.colors.mediumShade};
   line-height: ${LINE_HEIGHT}px;
   text-align: right;
-  border-right: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade};
+  border-right: ${({ theme }) => theme.euiTheme.border.thin};
   background-color: ${({ highlight, theme }) =>
     highlight ? tint(0.9, theme.euiTheme.colors.warning) : null};
 

diff --git a/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx b/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx
@@ -112,15 +112,11 @@ export function expectTextsInDocument(output: any, texts: string[]) {
   });
 }
 
-export function renderWithTheme(
-  component: React.ReactNode,
-  params?: any,
-  { darkMode = false } = {}
-) {
+export function renderWithTheme(component: React.ReactNode, params?: any) {
   return render(<EuiThemeProvider>{component}</EuiThemeProvider>, params);
 }
 
-export function mountWithTheme(tree: React.ReactElement<any>, { darkMode = false } = {}) {
+export function mountWithTheme(tree: React.ReactElement<any>) {
   function WrappingThemeProvider(props: any) {
     return <EuiThemeProvider>{props.children}</EuiThemeProvider>;
   }

diff --git a/...gins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx b/...gins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx
@@ -11,6 +11,7 @@ import { max } from 'lodash';
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { LogEntriesSummaryBucket } from '@kbn/logs-shared-plugin/common';
+import { COLOR_MODES_STANDARD } from '@elastic/eui';
 
 interface DensityChartProps {
   buckets: LogEntriesSummaryBucket[];
@@ -66,14 +67,14 @@ export const DensityChart: React.FC<DensityChartProps> = ({
 
 const DensityChartPositiveBackground = styled.rect`
   fill: ${(props) =>
-    props.theme.colorMode === 'DARK'
+    props.theme.colorMode === COLOR_MODES_STANDARD.dark
       ? props.theme.euiTheme.colors.lightShade
       : props.theme.euiTheme.colors.lightestShade};
 `;
 
 const PositiveAreaPath = styled.path`
   fill: ${(props) =>
-    props.theme.colorMode === 'DARK'
+    props.theme.colorMode === COLOR_MODES_STANDARD.dark
       ? props.theme.euiTheme.colors.mediumShade
       : props.theme.euiTheme.colors.lightShade};
 `;
diff --git a/...lugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx b/...lugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx
@@ -14,6 +14,7 @@ import {
 import { scaleLinear } from 'd3-scale';
 import moment from 'moment';
 import * as React from 'react';
+import { COLOR_MODES_STANDARD } from '@elastic/eui';
 import { DensityChart } from './density_chart';
 import { HighlightedInterval } from './highlighted_interval';
 import { SearchMarkers } from './search_markers';
@@ -166,7 +167,7 @@ const TimeCursor = styled.line`
   pointer-events: none;
   stroke-width: 1px;
   stroke: ${(props) =>
-    props.theme.colorMode === 'DARK'
+    props.theme.colorMode === COLOR_MODES_STANDARD.dark
       ? props.theme.euiTheme.colors.darkestShade
       : props.theme.euiTheme.colors.darkShade};
 `;

diff --git a/...plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx b/...plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -8,7 +8,7 @@
 import { scaleTime } from 'd3-scale';
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { useEuiFontSize } from '@elastic/eui';
+import { COLOR_MODES_STANDARD, useEuiFontSize } from '@elastic/eui';
 import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_time_zone_setting';
 import { getTimeLabelFormat } from './time_label_formatter';
 
@@ -69,7 +69,7 @@ const TimeRulerTickLabel = styled.text`
 
 const TimeRulerGridLine = styled.line`
   stroke: ${(props) =>
-    props.theme.colorMode === 'DARK'
+    props.theme.colorMode === COLOR_MODES_STANDARD.dark
       ? props.theme.euiTheme.colors.darkestShade
       : props.theme.euiTheme.colors.darkShade};
   stroke-opacity: 0.5;

diff --git a/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx
@@ -6,12 +6,12 @@
  */
 
 import { LIGHT_THEME, DARK_THEME, PartialTheme } from '@elastic/charts';
-import { useEuiTheme } from '@elastic/eui';
+import { useEuiTheme, COLOR_MODES_STANDARD } from '@elastic/eui';
 import { useMemo } from 'react';
 
 export function useChartThemes() {
   const theme = useEuiTheme();
-  const baseTheme = theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME;
+  const baseTheme = theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME;
 
   return useMemo(() => {
     const themeOverrides: PartialTheme = {