Skip to content

Commit feab0c6

Browse files
cee-chencee-chen
authored
Upgrade EUI to v89.1.0 (#169135)
`v89.0.0`⏩`v89.1.0` This upgrade also contains an EuiDataGrid refactor (elastic/eui#7255) not listed in the changelog (as no end-user functionality or props changed as a result of the refactor). The unlisted changes should only affect DOM and `className` usages in Kibana (primarily CSS overrides and test selectors). --- ## [`89.1.0`](https://github.com/elastic/eui/tree/v89.1.0) - Added `tokenVectorSparse` token and updated `tokenDenseVector` token (now named `tokenVectorDense`). ([#7282](elastic/eui#7282)) **CSS-in-JS conversions** - Reduced default CSS prefixes generated by Emotion to only browsers supported by EUI (latest evergreen browsers). This can be customized by passing your own Emotion cache to `EuiProvider`. ([#7272](elastic/eui#7272))
1 parent da37c28 commit feab0c6

14 files changed

Lines changed: 41 additions & 41 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
"@elastic/datemath": "5.0.3",
103103
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
104104
"@elastic/ems-client": "8.5.0",
105-
"@elastic/eui": "89.0.0",
105+
"@elastic/eui": "89.1.0",
106106
"@elastic/filesaver": "1.1.2",
107107
"@elastic/node-crypto": "1.2.1",
108108
"@elastic/numeral": "^2.5.1",

‎packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/kbn-unified-data-table/src/components/data_table.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@
2222
font-size: $euiFontSizeS;
2323
}
2424

25-
.euiDataGridRowCell__definedHeight {
26-
white-space: pre-wrap;
27-
}
28-
2925
.unifiedDataTable__inner {
3026
display: flex;
3127
flex-direction: column;
@@ -51,7 +47,7 @@
5147
}
5248

5349
.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
54-
.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
50+
.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
5551
background-color: tintOrShade($euiColorLightShade, 50%, 0);
5652
}
5753
}
@@ -110,14 +106,14 @@
110106
.unifiedDataTable__rowControl {
111107
// fine-tuning the vertical alignment with the text for any row height setting
112108
margin-top: -3px;
113-
.euiDataGridRowCell__truncate & { // "Single line" row height setting
109+
.euiDataGridRowCell__defaultHeight & { // "Single line" row height setting
114110
margin-top: 0;
115111
}
116112
}
117113

118114
.unifiedDataTable__descriptionList {
119115
// force the content truncation when "Single line" row height setting is active
120-
.euiDataGridRowCell__truncate & {
116+
.euiDataGridRowCell__defaultHeight & {
121117
-webkit-line-clamp: 1;
122118
display: -webkit-box;
123119
-webkit-box-orient: vertical;

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import React, { FC, useMemo } from 'react';
1010
import useObservable from 'react-use/lib/useObservable';
1111
import createCache from '@emotion/cache';
1212

13-
import { EuiProvider, EuiProviderProps } from '@elastic/eui';
13+
import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui';
1414
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
1515
import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common';
1616
import { ThemeServiceStart } from '@kbn/react-kibana-context-common';
@@ -25,18 +25,23 @@ export interface KibanaEuiProviderProps extends Pick<EuiProviderProps<{}>, 'modi
2525

2626
// Set up the caches.
2727
// https://eui.elastic.co/#/utilities/provider#cache-location
28+
const stylisPlugins = [euiStylisPrefixer]; // https://emotion.sh/docs/@emotion/cache#stylisplugins
29+
2830
const emotionCache = createCache({
2931
key: 'css',
32+
stylisPlugins,
3033
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
3134
});
3235

3336
const globalCache = createCache({
3437
key: EUI_STYLES_GLOBAL,
38+
stylisPlugins,
3539
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
3640
});
3741

3842
const utilitiesCache = createCache({
3943
key: EUI_STYLES_UTILS,
44+
stylisPlugins,
4045
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
4146
});
4247

‎src/dev/license_checker/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
8585
'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
8686
'@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
8787
'@elastic/ems-client@8.5.0': ['Elastic License 2.0'],
88-
'@elastic/eui@89.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
88+
'@elastic/eui@89.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
8989
'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
9090
'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
9191
};

‎x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ describe('DataTable', () => {
149149
wrapper
150150
.find('[data-test-subj="dataGridRowCell"]')
151151
.at(0)
152-
.find('.euiDataGridRowCell__truncate')
152+
.find('.euiDataGridRowCell__content')
153153
.childAt(0)
154154
.text()
155155
).toEqual(mockTimelineData[0].ecs.timestamp);

‎x-pack/packages/security-solution/data_table/components/data_table/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,11 @@ const EuiDataGridContainer = styled.div<{ hideLastPage: boolean }>`
118118
${({ hideLastPage }) => `${hideLastPage ? 'display:none' : ''}`};
119119
}
120120
}
121-
div .euiDataGridRowCell__contentByHeight {
122-
height: auto;
123-
align-self: center;
121+
div .euiDataGridRowCell__contentWrapper {
122+
display: flex;
123+
align-items: center;
124124
}
125-
div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__contentByHeight {
125+
div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__content {
126126
flex-grow: 0;
127127
width: 100%;
128128
}

‎x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,15 @@ export const useStyles = () => {
4646
& .euiDataGridRowCell {
4747
font-size: ${euiTheme.size.m};
4848
}
49-
& .euiDataGridRowCell__expandActions > [data-test-subj='euiDataGridCellExpandButton'] {
49+
& .euiDataGridRowCell__actions > [data-test-subj='euiDataGridCellExpandButton'] {
5050
display: none;
5151
}
52-
& .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
52+
& .euiDataGridRowCell__actions--overlay {
5353
padding: 0;
5454
}
5555
56-
& .euiDataGridRowCell__expandFlex {
56+
& .euiDataGridRowCell__contentWrapper {
57+
display: flex;
5758
align-items: center;
5859
}
5960
& .euiDataGridRowCell.euiDataGridRowCell--numeric {

‎x-pack/plugins/osquery/cypress/tasks/integrations.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
CONFIRM_MODAL_BTN_SEL,
1414
CREATE_PACKAGE_POLICY_SAVE_BTN,
1515
DATA_COLLECTION_SETUP_STEP,
16+
DATE_PICKER_ABSOLUTE_TAB,
1617
DATE_PICKER_ABSOLUTE_TAB_SEL,
1718
TOAST_CLOSE_BTN,
1819
TOAST_CLOSE_BTN_SEL,
@@ -98,7 +99,7 @@ export function closeModalIfVisible() {
9899
export function closeDateTabIfVisible() {
99100
cy.get('body').then(($body) => {
100101
if ($body.find(DATE_PICKER_ABSOLUTE_TAB_SEL).length) {
101-
cy.getBySel(DATE_PICKER_ABSOLUTE_TAB_SEL).clickOutside();
102+
cy.getBySel(DATE_PICKER_ABSOLUTE_TAB).clickOutside();
102103
}
103104
});
104105
}

‎x-pack/plugins/security/server/prompt_page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import 'css.escape'; // Polyfill required to render `EuiPageTemplate` server-side
9-
import { EuiPageTemplate, EuiProvider } from '@elastic/eui';
9+
import { EuiPageTemplate, EuiProvider, euiStylisPrefixer } from '@elastic/eui';
1010
// @ts-expect-error no definitions in component folder
1111
import { icon as EuiIconWarning } from '@elastic/eui/lib/components/icon/assets/warning';
1212
// @ts-expect-error no definitions in component folder
@@ -32,7 +32,7 @@ appendIconComponentCache({
3232
warning: EuiIconWarning,
3333
});
3434

35-
const emotionCache = createCache({ key: 'eui' });
35+
const emotionCache = createCache({ key: 'eui', stylisPlugins: [euiStylisPrefixer] });
3636

3737
interface Props {
3838
buildNumber: number;

0 commit comments

Comments
 (0)