Upgrade EUI to v99.1.0

package.json

@@ -117,8 +117,8 @@
     "@elastic/ecs": "^8.11.5",
     "@elastic/elasticsearch": "^8.17.0",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "99.0.0-borealis.1",
-    "@elastic/eui-theme-borealis": "0.0.8",
+    "@elastic/eui": "99.1.0-borealis.0",
+    "@elastic/eui-theme-borealis": "0.0.9",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "^1.2.3",
     "@elastic/numeral": "^2.5.1",

src/dev/license_checker/config.ts

@@ -87,8 +87,8 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.6.3': ['Elastic License 2.0'],
-  '@elastic/eui@99.0.0-borealis.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-theme-borealis@0.0.8': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@99.1.0-borealis.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@0.0.9': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/platform/packages/shared/kbn-coloring/src/palettes/types.ts

@@ -87,6 +87,10 @@ export interface PaletteDefinition<T = unknown> {
    * User facing title (should be i18n-ized)
    */
   title: string;
+  /**
+   * User facing tag (should be i18n-ized)
+   */
+  tag?: string;
   /**
    * Flag indicating whether users should be able to pick this palette manually.
    */

src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/palette_selector/palette_selector.tsx

@@ -12,7 +12,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { EuiColorPalettePicker, EuiConfirmModal, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { KbnPalettes } from '@kbn/palettes';
+import { KbnPalettes, getAppendedTag } from '@kbn/palettes';
 import { RootState, updatePalette } from '../../state/color_mapping';
 import { updateAssignmentsPalette, updateColorModePalette } from '../../config/assignments';
 
@@ -100,6 +100,7 @@ export function PaletteSelector({ palettes }: { palettes: KbnPalettes }) {
               'data-test-subj': `kbnColoring_ColorMapping_Palette-${palette.id}`,
               value: palette.id,
               title: palette.name,
+              append: getAppendedTag(palette.tag),
               palette: Array.from({ length: palette.colorCount }, (_, i) => {
                 return palette.getColor(i);
               }),

src/platform/packages/shared/kbn-palettes/classes/palette.ts

@@ -11,7 +11,7 @@ import { Optional } from 'utility-types';
 import { IKbnPalette, KbnPaletteType } from './types';
 
 export type KbnBasePaletteConfig = Optional<
-  Pick<IKbnPalette, 'id' | 'name' | 'colorCount' | 'legacy' | 'aliases' | 'standalone'>,
+  Pick<IKbnPalette, 'id' | 'name' | 'tag' | 'colorCount' | 'legacy' | 'aliases' | 'standalone'>,
   'legacy' | 'aliases'
 >;
 
@@ -20,6 +20,7 @@ export abstract class KbnBasePalette implements IKbnPalette {
 
   public readonly id: string;
   public readonly name: string;
+  public readonly tag?: string;
   public readonly colorCount: number;
   public readonly legacy: boolean;
   public readonly standalone: boolean;
@@ -28,13 +29,15 @@ export abstract class KbnBasePalette implements IKbnPalette {
   constructor({
     id,
     name,
+    tag,
     colorCount,
     aliases = [],
     legacy = false,
     standalone = false,
   }: KbnBasePaletteConfig) {
     this.id = id;
     this.name = name;
+    this.tag = tag;
     this.colorCount = colorCount;
     this.legacy = legacy;
     this.standalone = standalone;

src/platform/packages/shared/kbn-palettes/classes/types.ts

@@ -21,6 +21,10 @@ export interface IKbnPalette {
    * Display name of this palette.
    */
   name: string;
+  /**
+   * A tag for the palette displayed opposite of the `name`.
+   */
+  tag?: string;
   /**
    * Type of pallette
    */

src/platform/packages/shared/kbn-palettes/components/index.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+/**
+ * Text wrapper to remove text-decoration from `EuiText`
+ */
+export const getAppendedTag = (label?: string) =>
+  label && (
+    <EuiText color="subdued" size="xs">
+      <span
+        css={css`
+          display: inline-block;
+        `}
+      >
+        {label}
+      </span>
+    </EuiText>
+  );

src/platform/packages/shared/kbn-palettes/index.ts

@@ -9,6 +9,7 @@
 
 export * from './palettes';
 export * from './classes';
+export * from './components';
 export { DEFAULT_FALLBACK_PALETTE, KbnPalette } from './constants';
 
 export * from './hooks';

src/platform/packages/shared/kbn-palettes/palettes/categorical/elastic.ts

@@ -26,7 +26,10 @@ export const elasticPalette = new KbnColorFnPalette({
   colorCount: 10,
   defaultNumberOfColors: 30,
   name: i18n.translate('palettes.elastic.name', {
-    defaultMessage: 'Elastic (default)',
+    defaultMessage: 'Elastic',
+  }),
+  tag: i18n.translate('palettes.elastic.tag', {
+    defaultMessage: 'Default',
   }),
   // Return exact colors requested given enough rotations
   colorFn: (n) => euiPaletteColorBlind({ rotations: Math.ceil(n / 10) }).slice(0, n),

src/platform/packages/shared/kbn-palettes/palettes/index.ts

@@ -46,7 +46,7 @@ const lightKbnPalettes = new KbnPalettes(
     elasticPalette,
     kibana7Palette,
     kibana4Palette,
-    getNeutralPalette(true),
+    getNeutralPalette(false),
     complementaryPalette,
     coolPalette,
     grayPalette,

src/platform/packages/shared/kbn-palettes/tsconfig.json

@@ -5,7 +5,7 @@
     "types": [
       "jest",
       "node",
-      "react"
+      "@emotion/react/types/css-prop"
     ]
   },
   "include": [

src/platform/plugins/private/vis_default_editor/public/components/controls/palette_picker.tsx

@@ -13,6 +13,7 @@ import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
 import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { getAppendedTag } from '@kbn/palettes';
 
 const DEFAULT_PALETTE = 'default';
 
@@ -34,11 +35,12 @@ export function PalettePicker<ParamName extends string>({
   const palettesList: EuiColorPalettePickerPaletteProps[] = palettes
     .getAll()
     .filter(({ internal }) => !internal)
-    .map(({ id, title, getCategoricalColors }) => {
+    .map(({ id, title, tag, getCategoricalColors }) => {
       return {
         value: id,
         title,
         type: 'fixed',
+        append: getAppendedTag(tag),
         palette: getCategoricalColors(10, id === paletteName ? activePalette?.params : undefined),
       };
     });

src/platform/plugins/private/vis_default_editor/tsconfig.json

@@ -29,6 +29,7 @@
     "@kbn/saved-search-plugin",
     "@kbn/code-editor",
     "@kbn/react-kibana-context-render",
+    "@kbn/palettes",
   ],
   "exclude": [
     "target/**/*",

src/platform/plugins/shared/charts/public/services/palettes/palettes.tsx

@@ -215,6 +215,7 @@ export const buildPalettes = (theme: CoreTheme): Record<string, PaletteDefinitio
   return {
     default: {
       title: defaultPalette.name,
+      tag: defaultPalette.tag,
       ...buildRoundRobinCategoricalWithMappedColors(
         'default', // needs to match key of palette definition
         defaultPalette.colors(),

src/platform/plugins/shared/vis_types/timeseries/public/application/components/palette_picker.tsx

@@ -12,6 +12,7 @@ import type { PaletteRegistry, PaletteOutput } from '@kbn/coloring';
 import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { getAppendedTag } from '@kbn/palettes';
 import { rainbowColors } from '../lib/rainbow_colors';
 import { computeGradientFinalColor } from '../lib/compute_gradient_final_color';
 import { PALETTES } from '../../../common/enums';
@@ -36,10 +37,11 @@ export function PalettePicker({ activePalette, palettes, setPalette, color }: Pa
         ...palettes
           .getAll()
           .filter(({ internal }) => !internal)
-          .map(({ id, title, getCategoricalColors }) => {
+          .map(({ id, title, tag, getCategoricalColors }) => {
             return {
               value: id,
               title,
+              append: getAppendedTag(tag),
               type: 'fixed' as const,
               palette: getCategoricalColors(10),
             };

src/platform/plugins/shared/vis_types/timeseries/tsconfig.json

@@ -48,6 +48,7 @@
     "@kbn/code-editor",
     "@kbn/shared-ux-markdown",
     "@kbn/react-kibana-context-render",
+    "@kbn/palettes",
   ],
   "exclude": [
     "target/**/*",

x-pack/platform/plugins/shared/lens/public/shared_components/palette_picker.tsx

@@ -11,6 +11,7 @@ import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
 import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { getAppendedTag } from '@kbn/palettes';
 
 interface PalettePickerProps<T> {
   palettes: PaletteRegistry;
@@ -23,10 +24,11 @@ export function PalettePicker<T>({ palettes, activePalette, setPalette }: Palett
   const palettesToShow: EuiColorPalettePickerPaletteProps[] = palettes
     .getAll()
     .filter(({ internal }) => !internal)
-    .map(({ id, title, getCategoricalColors }) => {
+    .map(({ id, title, tag, getCategoricalColors }) => {
       return {
         value: id,
         title,
+        append: getAppendedTag(tag),
         type: 'fixed',
         palette: getCategoricalColors(10, id === paletteName ? activePalette?.params : undefined),
       };

x-pack/platform/plugins/shared/maps/public/classes/styles/color_palettes.ts

@@ -49,6 +49,9 @@ function getColorBlindPalette(steps: number) {
 
 const COLOR_PALETTES: COLOR_PALETTE[] = [
   {
+    // TODO remove all empty `title` props below after
+    // https://github.com/elastic/eui/pull/8289 is released
+    title: '',
     value: 'Blues',
     getPalette: (steps: number) => {
       return euiPaletteCool(steps);
@@ -57,6 +60,7 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: 'Greens',
     getPalette: (steps: number) => {
       return euiPaletteGreen(steps);
@@ -65,6 +69,7 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: 'Greys',
     getPalette: (steps: number) => {
       return euiPaletteGray(steps);
@@ -73,6 +78,7 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: 'Reds',
     getPalette: (steps: number) => {
       return euiPaletteRed(steps);
@@ -81,6 +87,7 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: 'Yellow to Red',
     getPalette: (steps: number) => {
       return euiPaletteWarm(steps);
@@ -89,6 +96,7 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: 'Green to Red',
     getPalette: (steps: number) => {
       return euiPaletteForStatus(steps);
@@ -97,6 +105,7 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: 'Blue to Red',
     getPalette: (steps: number) => {
       return euiPaletteForTemperature(steps);
@@ -105,6 +114,7 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: DEFAULT_HEATMAP_COLOR_RAMP_NAME,
     getPalette: (steps: number) => {
       return colorPaletteGenerator(HEATMAP_PALETTE, steps, true, true);
@@ -113,18 +123,21 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
     type: 'gradient',
   },
   {
+    title: '',
     value: 'palette_0',
     getPalette: getColorBlindPalette,
     palette: euiPaletteColorBlind(),
     type: 'fixed',
   },
   {
+    title: '',
     value: 'palette_20',
     getPalette: getColorBlindPalette,
     palette: euiPaletteColorBlind({ rotations: 2 }),
     type: 'fixed',
   },
   {
+    title: '',
     value: 'palette_30',
     getPalette: getColorBlindPalette,
     palette: euiPaletteColorBlind({ rotations: 3 }),