[Discover][Borealis] Update colors in field stats for Borealis theme (e…

…lastic#203579) - Closes elastic#202044 ## Summary This PR updates the colors for field stats for Borealis theme. For Amsterdam theme there should be no visual changes. <img width="513" alt="Screenshot 2024-12-10 at 13 50 37" src="https://github.com/user-attachments/assets/b5bc37da-eb95-45f6-b196-37511f6c936a"> <img width="514" alt="Screenshot 2024-12-10 at 13 51 07" src="https://github.com/user-attachments/assets/cdf3c206-c88c-4f82-9905-3c9187d7461c"> ### Testing * Add the following to your `kibana.dev.yml` ``` uiSettings.experimental.themeSwitcherEnabled: true uiSettings.overrides.theme:name: borealis ``` * Start Kibana with `KBN_OPTIMIZER_THEMES="experimental" yarn start`
CAWilson94 · Dec 12, 2024 · 6c3f844 · 6c3f844
1 parent 28850a8
commit 6c3f844
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx
@@ -19,7 +19,14 @@ import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import type { ChartsPluginSetup } from '@kbn/charts-plugin/public';
 import DateMath from '@kbn/datemath';
-import { EuiButtonGroup, EuiLoadingSpinner, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiButtonGroup,
+  EuiLoadingSpinner,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
   Axis,
@@ -120,14 +127,17 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
   toDate,
   dataViewOrDataViewId,
   field,
-  color = getDefaultColor(),
+  color: originalColor,
   'data-test-subj': dataTestSubject = 'fieldStats',
   overrideMissingContent,
   overrideFooter,
   onAddFilter,
   overrideFieldTopValueBar,
   onStateChange,
 }) => {
+  const { euiTheme } = useEuiTheme();
+  const color = originalColor ?? getDefaultColor(euiTheme.themeName);
+
   const { fieldFormats, uiSettings, charts, dataViews, data } = services;
   const [state, changeState] = useState<FieldStatsState>({
     isLoading: false,

diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_top_values.test.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_top_values.test.tsx
@@ -59,6 +59,7 @@ describe('UnifiedFieldList <FieldTopValues />', () => {
           key: 'sourceB',
         },
       ],
+      color: '#000',
       'data-test-subj': 'testing',
     };
   });

diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_top_values.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_top_values.tsx
@@ -20,7 +20,7 @@ export interface FieldTopValuesProps {
   dataView: DataView;
   field: DataViewField;
   sampledValuesCount: number;
-  color?: string;
+  color: string;
   'data-test-subj': string;
   onAddFilter?: AddFieldFilterHandler;
   overrideFieldTopValueBar?: OverrideFieldTopValueBarCallback;
@@ -32,7 +32,7 @@ export const FieldTopValues: React.FC<FieldTopValuesProps> = ({
   dataView,
   field,
   sampledValuesCount,
-  color = getDefaultColor(),
+  color,
   'data-test-subj': dataTestSubject,
   onAddFilter,
   overrideFieldTopValueBar,
@@ -106,7 +106,10 @@ export const FieldTopValues: React.FC<FieldTopValuesProps> = ({
   );
 };
 
-export const getDefaultColor = () => euiPaletteColorBlind()[1];
+export const getDefaultColor = (euiThemeName: string) =>
+  euiThemeName?.toLowerCase().includes('borealis')
+    ? euiPaletteColorBlind()[2]
+    : euiPaletteColorBlind()[1]; // FIXME: remove in 9.x when Borealis becomes the default theme
 
 export const getFormattedPercentageValue = (
   currentValue: number,

diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx
@@ -15,7 +15,10 @@ import {
   EuiProgress,
   EuiText,
   EuiTextBlockTruncate,
+  EuiThemeComputed,
   EuiToolTip,
+  makeHighContrastColor,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
@@ -53,6 +56,7 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
   overrideFieldTopValueBar,
   ...fieldTopValuesBucketOverridableProps
 }) => {
+  const { euiTheme } = useEuiTheme();
   const overrides = overrideFieldTopValueBar
     ? overrideFieldTopValueBar(fieldTopValuesBucketOverridableProps)
     : ({} as FieldTopValuesBucketParams);
@@ -141,7 +145,7 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
               })}
               delay="long"
             >
-              <EuiText size="xs" textAlign="left" color={color}>
+              <EuiText size="xs" textAlign="left" color={getPercentageColor(euiTheme, color)}>
                 {formattedPercentage}
               </EuiText>
             </EuiToolTip>
@@ -207,6 +211,11 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
   );
 };
 
+const getPercentageColor = (euiTheme: EuiThemeComputed, color: string) =>
+  euiTheme.themeName?.toLowerCase().includes('borealis')
+    ? makeHighContrastColor(color)(euiTheme)
+    : color; // FIXME: remove in 9.x when Borealis becomes the default theme
+
 // Necessary for React.lazy
 // eslint-disable-next-line import/no-default-export
 export default FieldTopValuesBucket;
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ describe('UnifiedFieldList <FieldTopValues />', () => { @@
               key: 'sourceB',
             },
           ],
+          color: '#000',
           'data-test-subj': 'testing',
         };
       });
@@ Expand Down @@