From 6c3f84425f1de30306d1f2e815c041832d890c70 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 11 Dec 2024 09:59:54 +0100 Subject: [PATCH] [Discover][Borealis] Update colors in field stats for Borealis theme (#203579) - Closes https://github.com/elastic/kibana/issues/202044 ## Summary This PR updates the colors for field stats for Borealis theme. For Amsterdam theme there should be no visual changes. Screenshot 2024-12-10 at 13 50 37 Screenshot 2024-12-10 at 13 51 07 ### 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` --- .../src/components/field_stats/field_stats.tsx | 14 ++++++++++++-- .../field_stats/field_top_values.test.tsx | 1 + .../components/field_stats/field_top_values.tsx | 9 ++++++--- .../field_stats/field_top_values_bucket.tsx | 11 ++++++++++- 4 files changed, 29 insertions(+), 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 index 58ff36069dd8c..74c85662754fe 100755 --- 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,7 +127,7 @@ const FieldStatsComponent: React.FC = ({ toDate, dataViewOrDataViewId, field, - color = getDefaultColor(), + color: originalColor, 'data-test-subj': dataTestSubject = 'fieldStats', overrideMissingContent, overrideFooter, @@ -128,6 +135,9 @@ const FieldStatsComponent: React.FC = ({ overrideFieldTopValueBar, onStateChange, }) => { + const { euiTheme } = useEuiTheme(); + const color = originalColor ?? getDefaultColor(euiTheme.themeName); + const { fieldFormats, uiSettings, charts, dataViews, data } = services; const [state, changeState] = useState({ 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 index 7817fd0278901..edb38d4610864 100644 --- 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 ', () => { 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 index a2f57d03bf515..31ee1479bb081 100755 --- 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 = ({ dataView, field, sampledValuesCount, - color = getDefaultColor(), + color, 'data-test-subj': dataTestSubject, onAddFilter, overrideFieldTopValueBar, @@ -106,7 +106,10 @@ export const FieldTopValues: React.FC = ({ ); }; -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 index 77266edc2de07..a53bbcdebc468 100755 --- 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 = ({ overrideFieldTopValueBar, ...fieldTopValuesBucketOverridableProps }) => { + const { euiTheme } = useEuiTheme(); const overrides = overrideFieldTopValueBar ? overrideFieldTopValueBar(fieldTopValuesBucketOverridableProps) : ({} as FieldTopValuesBucketParams); @@ -141,7 +145,7 @@ const FieldTopValuesBucket: React.FC = ({ })} delay="long" > - + {formattedPercentage} @@ -207,6 +211,11 @@ const FieldTopValuesBucket: React.FC = ({ ); }; +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;