Skip to content

Commit 1384ced

Browse files
mgadewollmgadewoll
authored
[8.x] Upgrade EUI to v98.2.1-borealis.1 (#204783)
>[!IMPORTANT] This PR introduces the Borealis enabled EUI package to `8.x`. The intention is to support new features being developed that need to live in `main` as well as `8.x`. >[!IMPORTANT] All `8.x` versions should continue to use the current Amsterdam theme. To ensure this even with upcoming changes to the default theme for EUI, we're adding `euiThemeAmsterdam` on `EuiProvider` usages manually. ## Description This PR introduces all previous Borealis related PR changes but excludes the specific changes to support `@elastic/eui-theme-borealis` as only Amsterdam is supported as theme in `8.x`. Previous PRs - #199993 - #201049 - #202073 --- `v97.3.1`⏩`v98.2.1-borealis.1` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([#8247](elastic/eui#8247)) --- # `@elastic/eui` ## [`v98.1.0`](https://github.com/elastic/eui/releases/v98.1.0) - Updated `EuiBetaBadge` with a new `warning` color variant ([#8177](elastic/eui#8177)) **Accessibility** - Ensures `autoFocus` on `EuiSelectableList` triggers initial focus ([#8091](elastic/eui#8091)) - Improved the accessibility of `EuiSearchBarFilters` by: ([#8091](elastic/eui#8091)) - adding a more descriptive `aria-label` to selection filter buttons - ensuring the selection listbox is initially focused when opening a selection popover - Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab group is a tab stop and tabs can be traversed with arrow keys. ([#8116](elastic/eui#8116)) - Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows setting a custom screen reader label on the copy button. ([#8176](elastic/eui#8176)) **CSS-in-JS conversions** - Removed the following global Sass variables: ([#8169](elastic/eui#8169)) - `$euiButtonMinWidth` - `$euiDatePickerCalendarWidth` - Removed the following Sass animations: ([#8169](elastic/eui#8169)) - `euiAnimFadeIn` - `euiGrow` - `focusRingAnimate` - `focusRingAnimateLarge` - `euiButtonActive` - Removed the following Sass mixins: ([#8169](elastic/eui#8169)) - `euiFullHeight` - `euiSlightShadowHover` - `datePickerArrow` # Borealis updates - [Visual Refresh] Fix euiColorFullShade Sass variable mapping (elastic/eui#8178) --- # `@elastic/eui` ## [`v98.0.0`](https://github.com/elastic/eui/releases/v98.0.0) **Bug fixes** - Fixed an `EuiDataGrid` bug where column actions where not clickable when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was used inside a modal ([#8135](elastic/eui#8135)) **Breaking changes** - Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display prop. Use `columnCompressed` instead ([#8113](elastic/eui#8113)) # Borealis updates **Bug fixes** - Fixed computed border token mapping (elastic/eui#8170)
1 parent b98dcc9 commit 1384ced

File tree

38 files changed

+193
-105
lines changed

38 files changed

+193
-105
lines changed

‎examples/data_view_field_editor_example/public/app.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
EuiSpacer,
2020
EuiText,
2121
useGeneratedHtmlId,
22+
EuiThemeAmsterdam,
2223
} from '@elastic/eui';
2324
import { AppMountParameters } from '@kbn/core/public';
2425
import { DataPublicPluginStart } from '@kbn/data-plugin/public';
@@ -136,7 +137,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
136137
);
137138

138139
return (
139-
<EuiProvider>
140+
<EuiProvider theme={EuiThemeAmsterdam}>
140141
<EuiPageTemplate offset={0}>
141142
<EuiPageTemplate.Header pageTitle="Data view field editor demo" />
142143
<EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>

‎examples/error_boundary/public/plugin.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* License v3.0 only", or the "Server Side Public License, v 1".
88
*/
99

10-
import { EuiButton, EuiProvider } from '@elastic/eui';
10+
import { EuiButton, EuiProvider, EuiThemeAmsterdam } from '@elastic/eui';
1111

1212
import React, { useState } from 'react';
1313
import ReactDOM from 'react-dom';
@@ -79,7 +79,7 @@ export class ErrorBoundaryExamplePlugin implements Plugin<void, void, SetupDeps>
7979
// Using the "EuiProvider" here rather than KibanaRenderContextProvider, because KibanaRenderContextProvider
8080
// wraps KibanaErrorBoundaryProvider and KibanaErrorBoundary and we want to test it directly, not a wrapper.
8181
ReactDOM.render(
82-
<EuiProvider>
82+
<EuiProvider theme={EuiThemeAmsterdam}>
8383
<KibanaErrorBoundaryProvider analytics={core.analytics}>
8484
<KibanaErrorBoundary>
8585
<KibanaPageTemplate>

‎examples/esql_ast_inspector/public/app.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,20 @@
88
*/
99

1010
import * as React from 'react';
11-
import { EuiPage, EuiPageBody, EuiPageSection, EuiPageHeader, EuiSpacer } from '@elastic/eui';
11+
import {
12+
EuiPage,
13+
EuiPageBody,
14+
EuiPageSection,
15+
EuiPageHeader,
16+
EuiSpacer,
17+
EuiThemeAmsterdam,
18+
} from '@elastic/eui';
1219
import { EuiProvider } from '@elastic/eui';
1320
import { EsqlInspector } from './components/esql_inspector';
1421

1522
export const App = () => {
1623
return (
17-
<EuiProvider>
24+
<EuiProvider theme={EuiThemeAmsterdam}>
1825
<EuiPage>
1926
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
2027
<EuiPageHeader paddingSize="s" bottomBorder={true} pageTitle="ES|QL AST Inspector" />

‎examples/field_formats_example/public/app.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
EuiProvider,
1919
EuiSpacer,
2020
EuiText,
21+
EuiThemeAmsterdam,
2122
EuiTitle,
2223
} from '@elastic/eui';
2324
import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
@@ -168,7 +169,7 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
168169

169170
export const App: React.FC<{ deps: Deps }> = (props) => {
170171
return (
171-
<EuiProvider>
172+
<EuiProvider theme={EuiThemeAmsterdam}>
172173
<EuiPageTemplate offset={0}>
173174
<EuiPageTemplate.Header pageTitle="Field formats examples" />
174175
<EuiPageTemplate.Section grow={false}>

‎examples/files_example/public/components/app.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
EuiIcon,
2222
EuiButtonIcon,
2323
EuiLink,
24+
EuiThemeAmsterdam,
2425
} from '@elastic/eui';
2526

2627
import { CoreStart } from '@kbn/core/public';
@@ -133,7 +134,7 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
133134
];
134135

135136
return (
136-
<EuiProvider>
137+
<EuiProvider theme={EuiThemeAmsterdam}>
137138
<EuiPageTemplate restrictWidth>
138139
<EuiPageTemplate.Header pageTitle="Files example" />
139140
<EuiPageTemplate.Section>

‎examples/partial_results_example/public/app/app.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
EuiPageTemplate,
1818
EuiSpacer,
1919
EuiText,
20+
EuiThemeAmsterdam,
2021
} from '@elastic/eui';
2122
import type { Datatable } from '@kbn/expressions-plugin/common';
2223
import { ExpressionsContext } from './expressions_context';
@@ -42,7 +43,7 @@ export function App() {
4243
}, [expressions]);
4344

4445
return (
45-
<EuiProvider>
46+
<EuiProvider theme={EuiThemeAmsterdam}>
4647
<EuiPageTemplate offset={0}>
4748
<EuiPageTemplate.Header pageTitle="Partial Results Demo" />
4849
<EuiPageTemplate.Section>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
"@elastic/ecs": "^8.11.1",
118118
"@elastic/elasticsearch": "^8.16.0",
119119
"@elastic/ems-client": "8.6.2",
120-
"@elastic/eui": "97.3.1",
120+
"@elastic/eui": "98.2.1-borealis.1",
121121
"@elastic/filesaver": "1.1.2",
122122
"@elastic/node-crypto": "^1.2.3",
123123
"@elastic/numeral": "^2.5.1",

‎packages/kbn-eslint-config/.eslintrc.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,14 @@ module.exports = {
128128
exclude: USES_STYLED_COMPONENTS,
129129
disallowedMessage: `Prefer using @emotion/react instead. To use styled-components, ensure you plugin is enabled in packages/kbn-babel-preset/styled_components_files.js.`,
130130
},
131-
...['@elastic/eui/dist/eui_theme_light.json', '@elastic/eui/dist/eui_theme_dark.json'].map(
132-
(from) => ({
133-
from,
134-
to: false,
135-
disallowedMessage: `Use "@kbn/ui-theme" to access theme vars.`,
136-
})
137-
),
131+
...[
132+
'@elastic/eui/dist/eui_theme_amsterdam_light.json',
133+
'@elastic/eui/dist/eui_theme_amsterdam_dark.json',
134+
].map((from) => ({
135+
from,
136+
to: false,
137+
disallowedMessage: `Use "@kbn/ui-theme" to access theme vars.`,
138+
})),
138139
{
139140
from: '@kbn/test/jest',
140141
to: '@kbn/test-jest-helpers',

‎packages/react/kibana_context/root/eui_provider.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import React, { FC, PropsWithChildren, useMemo } from 'react';
1111
import useObservable from 'react-use/lib/useObservable';
1212
import createCache from '@emotion/cache';
1313

14-
import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui';
14+
import { EuiProvider, EuiProviderProps, euiStylisPrefixer, EuiThemeAmsterdam } from '@elastic/eui';
1515
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
1616
import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common';
1717
import type { UserProfileService } from '@kbn/core-user-profile-browser';
@@ -78,7 +78,16 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
7878
const globalStyles = globalStylesProp === false ? false : undefined;
7979

8080
return (
81-
<EuiProvider {...{ cache, modify, colorMode, globalStyles, utilityClasses: globalStyles }}>
81+
<EuiProvider
82+
{...{
83+
cache,
84+
modify,
85+
colorMode,
86+
globalStyles,
87+
utilityClasses: globalStyles,
88+
theme: EuiThemeAmsterdam,
89+
}}
90+
>
8291
{children}
8392
</EuiProvider>
8493
);

‎src/core/packages/i18n/browser-internal/src/__snapshots__/i18n_service.test.tsx.snap

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/packages/i18n/browser-internal/src/i18n_eui_mapping.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -1822,5 +1822,19 @@ export const getEuiContextMapping = (): EuiTokensObject => {
18221822
defaultMessage: 'Select listbox',
18231823
description: 'Accessible label for Super Selects without a visible label.',
18241824
}),
1825+
'euiFieldValueSelectionFilter.buttonLabelHint': i18n.translate(
1826+
'core.euiFieldValueSelectionFilter.buttonLabelHint',
1827+
{
1828+
defaultMessage: 'Selection',
1829+
}
1830+
),
1831+
'euiCodeBlockFullScreen.ariaLabel': i18n.translate('core.euiCodeBlockFullScreen.ariaLabel', {
1832+
defaultMessage: 'Expanded code block',
1833+
}),
1834+
'euiCodeBlock.label': ({ language }: EuiValues) =>
1835+
i18n.translate('core.euiCodeBlock.label', {
1836+
defaultMessage: '{language} code block:',
1837+
values: { language },
1838+
}),
18251839
};
18261840
};

‎src/dev/license_checker/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const LICENSE_OVERRIDES = {
8787
'[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
8888
'@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
8989
'@elastic/[email protected]': ['Elastic License 2.0'],
90-
'@elastic/eui@97.3.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
90+
'@elastic/eui@98.2.1-borealis.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
9191
'[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
9292
'[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
9393
'@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

‎src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ module.exports = (_, argv) => {
6565
'@elastic/eui/optimize/es/components/provider/nested',
6666
'@elastic/eui/optimize/es/services',
6767
'@elastic/eui/optimize/es/services/format',
68-
'@elastic/eui/dist/eui_theme_light.json',
69-
'@elastic/eui/dist/eui_theme_dark.json',
68+
'@elastic/eui/dist/eui_theme_amsterdam_light.json',
69+
'@elastic/eui/dist/eui_theme_amsterdam_dark.json',
7070
'@elastic/numeral',
7171
'@emotion/cache',
7272
'@emotion/react',

‎src/platform/packages/private/kbn-unsaved-changes-badge/src/components/unsaved_changes_badge/__snapshots__/unsaved_changes_badge.test.tsx.snap

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/platform/packages/private/kbn-unsaved-changes-badge/src/utils/__snapshots__/get_top_nav_unsaved_changes_badge.test.tsx.snap

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/platform/packages/shared/kbn-ui-theme/src/theme.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
*/
99

1010
/* eslint-disable-next-line @kbn/eslint/module_migration */
11-
import { default as v8Light } from '@elastic/eui/dist/eui_theme_light.json';
11+
import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
1212
/* eslint-disable-next-line @kbn/eslint/module_migration */
13-
import { default as v8Dark } from '@elastic/eui/dist/eui_theme_dark.json';
13+
import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
1414

1515
const globals: any = typeof window === 'undefined' ? {} : window;
1616

‎src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('<ToolbarPopover />', () => {
3737
const button = component.find('EuiButton');
3838
expect(button.prop('color')).toBe('text');
3939
expect(button.prop('css')).toMatchObject({
40-
backgroundColor: '#FFF',
40+
backgroundColor: '#FFFFFF',
4141
border: '1px solid #D3DAE6',
4242
color: '#343741',
4343
});

0 commit comments

Comments
 (0)