Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade EUI to v70.2.4 #144845

Merged
merged 59 commits into from
Nov 18, 2022
Merged

Upgrade EUI to v70.2.4 #144845

Show file tree
Hide file tree
Changes from 38 commits
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
26a094a
Upgrade EUI to v70.2.0
cee-chen Nov 8, 2022
9d0a49f
Update i18n tokens
cee-chen Nov 8, 2022
4047448
Address EUI tooltip TODO from previous EUI upgrade
cee-chen Nov 8, 2022
44ab049
Address EUI TODO for selectable & horizontal EuiCards
cee-chen Nov 8, 2022
902fa62
[EuiCode][EuiCodeBlock] Account for removed Sass variables
cee-chen Nov 8, 2022
b052461
[EuiCodeBlock] Account for removed niche color var
cee-chen Nov 8, 2022
ee12916
[EuiCodeBlock] Fix index management component using now-removed CSS c…
cee-chen Nov 8, 2022
0704e41
[EuiFlex] Fix type issues
cee-chen Nov 8, 2022
d6351c5
[EuiFlex] Fix removed Sass gutter variables
cee-chen Nov 8, 2022
c52d42e
[EuiFlex] Fix CSS references to removed modifier classes
cee-chen Nov 10, 2022
4a427fe
[EuiFlex] Fix tests assertions
cee-chen Nov 9, 2022
681f989
[EuiFlex] Snapshot updates
cee-chen Nov 9, 2022
ef4eb55
[EuiListGroup][EuiCollapsibleNav] Replace removed `color="ghost"` wit…
cee-chen Nov 8, 2022
237341b
[EuiListGroup] Update snapshots
cee-chen Nov 9, 2022
212b25c
[EuiSkipLink] Fix event type
cee-chen Nov 8, 2022
03def98
[EuiSkipLink] Fix custom usage for table
cee-chen Nov 10, 2022
dd64ea2
[EuiForm] Update snapshots caused by `fullWidth` support
cee-chen Nov 9, 2022
e6c252d
[EuiCard] Update snapshots
cee-chen Nov 9, 2022
3e5cabc
[EuiSwitch][EuiCheckbox] Update snapshots
cee-chen Nov 9, 2022
9fd86b5
[EuiOverlayMask] Update snapshots
cee-chen Nov 9, 2022
d006461
[EuiTab] Fix selectors/test assertions
cee-chen Nov 9, 2022
9547e1a
[EuiBadge] Update snapshots/tests
cee-chen Nov 9, 2022
ab980d0
[EuiDataGrid] Update fixed `data-test-subj` selector
cee-chen Nov 9, 2022
6e48660
Fix multiple tests to use rendered vs mounted snapshots
cee-chen Nov 9, 2022
5265375
Update visual diff tolerance
cee-chen Nov 9, 2022
1f32026
[FTR] Fix now-invalid selector caused by Emotion classes
cee-chen Nov 10, 2022
d43735e
[Security] Fix failing scroll test
cee-chen Nov 10, 2022
f92bf06
[Security] Fix broken looking flyout tabs
cee-chen Nov 10, 2022
b3e4cc9
[Security] Fix spacing above flyout tabs
cee-chen Nov 10, 2022
3c2e62b
[Discover] Fix broken tabs/badge alignment
cee-chen Nov 10, 2022
0d293fd
[Security] Fix hidden flyout/failing Cypress test caused by `styled-c…
cee-chen Nov 14, 2022
b6cca3f
[EuiFlex] Replace removed fractions variables
cee-chen Nov 14, 2022
fb6642a
[osquery] attempt to fix failing tests
cee-chen Nov 14, 2022
92786f2
[APM][PR feedback] Fix size conversion var
constancecchen Nov 15, 2022
aa16cbc
Merge remote-tracking branch 'upstream/main' into eui-70.2.x
cee-chen Nov 15, 2022
2dde3c1
[Security] Fix incorrect use of EuiFlexGrid
cee-chen Nov 15, 2022
93c278a
Upgrade EUI to 70.2.1 to get backport fixes
cee-chen Nov 15, 2022
14854a5
Merge remote-tracking branch 'upstream/main' into eui-70.2.x
cee-chen Nov 15, 2022
6dcdf94
[Security][Cases] Fix padding previously reliant on EuiFlex margins
cee-chen Nov 16, 2022
9ca6ed5
[Lens] Restore EuiListGroup display back to previous custom columns
cee-chen Nov 16, 2022
ca332d2
[ML][DataVisualizer] Fix incorrect usage of EuiFlexGrid
cee-chen Nov 16, 2022
beeb9b7
Merge remote-tracking branch 'upstream/main' into eui-70.2.x
cee-chen Nov 16, 2022
fb3056a
[ML][Jobs] Fix missing margins in Jobs Groups list
cee-chen Nov 16, 2022
d09aab4
Update snapshots from main
cee-chen Nov 16, 2022
32b2384
more snapshots
cee-chen Nov 16, 2022
46cccd3
Merge remote-tracking branch 'upstream/main' into eui-70.2.x
cee-chen Nov 17, 2022
ed28359
Update EUI to v70.2.2 to get latest backport fixes
cee-chen Nov 17, 2022
f8aa870
[EuiFlyout] snapshot updates
cee-chen Nov 17, 2022
d18cf7a
[EuiButtonDisplay] snapshot updates
cee-chen Nov 17, 2022
4936913
[Maps] Fix broken facet button display
cee-chen Nov 17, 2022
c24c836
[Maps] snapshots
cee-chen Nov 17, 2022
b6f322a
Fixing `Lens` dimension editor operation button size
miukimiu Nov 17, 2022
12cba12
Upgrade EUI to v70.2.4
cee-chen Nov 17, 2022
c085c5e
[Advanced Settings] Fix flex gap/margins
cee-chen Nov 17, 2022
0756d11
Merge remote-tracking branch 'upstream/main' into eui-70.2.x
cee-chen Nov 17, 2022
759e0f8
Merge branch 'main' into eui-70.2.x
kibanamachine Nov 18, 2022
d5f93d3
[Security] EuiDescriptionList tweaks
cee-chen Nov 18, 2022
99391c9
Merge remote-tracking branch 'upstream/main' into eui-70.2.x
cee-chen Nov 18, 2022
fdcfd91
Merge branch 'main' into eui-70.2.x
kibanamachine Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
"@elastic/datemath": "5.0.3",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.4.0-canary.1",
"@elastic/ems-client": "8.3.3",
"@elastic/eui": "67.1.8",
"@elastic/eui": "70.2.1",
"@elastic/filesaver": "1.1.2",
"@elastic/node-crypto": "1.2.1",
"@elastic/numeral": "^2.5.1",
Expand Down
138 changes: 69 additions & 69 deletions ...me/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

41 changes: 21 additions & 20 deletions packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

import './collapsible_nav.scss';
import {
EuiThemeProvider,
EuiCollapsibleNav,
EuiCollapsibleNavGroup,
EuiFlexItem,
Expand All @@ -19,7 +20,7 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { groupBy, sortBy } from 'lodash';
import React, { Fragment, useMemo } from 'react';
import React, { useMemo } from 'react';
import useObservable from 'react-use/lib/useObservable';
import * as Rx from 'rxjs';
import type { HttpStart } from '@kbn/core-http-browser';
Expand Down Expand Up @@ -162,35 +163,35 @@ export function CollapsibleNav({
size={248}
>
{customNavLink && (
<Fragment>
<>
<EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
<EuiCollapsibleNavGroup
background="dark"
className="eui-yScroll"
style={{ maxHeight: '40vh' }}
>
<EuiListGroup
listItems={[
createEuiListItem({
link: customNavLink,
basePath,
navigateToUrl,
dataTestSubj: 'collapsibleNavCustomNavLink',
onClick: closeNav,
externalLink: true,
iconProps: { color: 'ghost' },
}),
]}
maxWidth="none"
gutterSize="none"
size="s"
color="ghost"
/>
<EuiThemeProvider colorMode="dark">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're already providing the theme provider at the root level of the react tree, so why do you need to add another one here? Forcing colorMode to dark seems wrong to me?

Copy link
Member Author

@cee-chen cee-chen Nov 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's done because these types of sections in the EuiCollapsibleNav are always dark. You can see an example on our docs here: https://elastic.github.io/eui/#/navigation/collapsible-nav#nav-groups-with-lists-and-other-content

The reason why switching/forcing the colorMode is superior because it cascades to all child components - links, text color, buttons, icon fills, etc. - everything just switches without needing a bunch of custom cascading/nesting CSS.

EuiBottomBar also has the same logic / nested dark provider as this.

Copy link
Contributor

@chandlerprall chandlerprall Nov 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also dropped support for EuiListGroup[color=ghost] as a design decision,

(from the EUI changelog)

Breaking changes

(from the EUI pr description)

Breaking changes

  • Removed ghost color from EuiListGroupItem. Consumers now must pass a EuiThemProvider color="dark" to use a ghost color.
  • Removed inherit color from EuiListGroupItem. The inherit in my opinion was not making sense anymore. The consumer should pass the color they think makes sense for their use case.
  • The list items now defaults to color text

and our upgrade strategy for Kibana historically defaults to maintain the same look & feel unless we've pre-coordinated changes with affected teams, which is why we're adding the theme provider here instead of changing the UX away from the ghost color.

FYI this is prompting a wider discussion about these types of breaking changes in elastic/eui#6364

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@miukimiu mentioned this as well in our sync today, but I would be curious if people would feel less confused about this change if we preserved color="ghost" as a prop/API option and had the component automatically internally wrap <EuiThemeProvider colorMode="dark"> instead of consumers explicitly having to.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the explanations

<EuiListGroup
listItems={[
createEuiListItem({
link: customNavLink,
basePath,
navigateToUrl,
dataTestSubj: 'collapsibleNavCustomNavLink',
onClick: closeNav,
externalLink: true,
}),
]}
maxWidth="none"
gutterSize="none"
size="s"
/>
</EuiThemeProvider>
</EuiCollapsibleNavGroup>
</EuiFlexItem>

<EuiHorizontalRule margin="none" />
</Fragment>
</>
)}

{/* Pinned items */}
Expand Down
30 changes: 27 additions & 3 deletions packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

144 changes: 135 additions & 9 deletions packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,18 +125,24 @@ export const getEuiContextMapping = (): EuiTokensObject => {
defaultMessage: 'Unavailable',
description: 'Displayed button text when a card option is unavailable.',
}),
'euiCodeBlock.copyButton': i18n.translate('core.euiCodeBlock.copyButton', {
'euiCodeBlockCopy.copy': i18n.translate('core.euiCodeBlockCopy.copy', {
defaultMessage: 'Copy',
description: 'ARIA label for a button that copies source code text to the clipboard',
}),
'euiCodeBlock.fullscreenCollapse': i18n.translate('core.euiCodeBlock.fullscreenCollapse', {
defaultMessage: 'Collapse',
description: 'ARIA label for a button that exits fullscreen view',
}),
'euiCodeBlock.fullscreenExpand': i18n.translate('core.euiCodeBlock.fullscreenExpand', {
defaultMessage: 'Expand',
description: 'ARIA label for a button that enters fullscreen view',
}),
'euiCodeBlockFullScreen.fullscreenCollapse': i18n.translate(
'core.euiCodeBlockFullScreen.fullscreenCollapse',
{
defaultMessage: 'Collapse',
description: 'ARIA label for a button that exits fullscreen view',
}
),
'euiCodeBlockFullScreen.fullscreenExpand': i18n.translate(
'core.euiCodeBlockFullScreen.fullscreenExpand',
{
defaultMessage: 'Expand',
description: 'ARIA label for a button that enters fullscreen view',
}
),
'euiCollapsedItemActions.allActions': i18n.translate(
'core.euiCollapsedItemActions.allActions',
{
Expand Down Expand Up @@ -385,6 +391,126 @@ export const getEuiContextMapping = (): EuiTokensObject => {
'There is a new region landmark called {landmarkHeading} with page level controls at the end of the document.',
values: { landmarkHeading },
}),
'euiKeyboardShortcuts.title': i18n.translate('core.euiKeyboardShortcuts.title', {
defaultMessage: 'Keyboard shortcuts',
}),
'euiKeyboardShortcuts.upArrowTitle': i18n.translate('core.euiKeyboardShortcuts.upArrowTitle', {
defaultMessage: 'Up arrow',
}),
'euiKeyboardShortcuts.upArrowDescription': i18n.translate(
'core.euiKeyboardShortcuts.upArrowDescription',
{
defaultMessage: 'Move one cell up',
}
),
'euiKeyboardShortcuts.downArrowTitle': i18n.translate(
'core.euiKeyboardShortcuts.downArrowTitle',
{
defaultMessage: 'Down arrow',
}
),
'euiKeyboardShortcuts.downArrowDescription': i18n.translate(
'core.euiKeyboardShortcuts.downArrowDescription',
{
defaultMessage: 'Move one cell down',
}
),
'euiKeyboardShortcuts.rightArrowTitle': i18n.translate(
'core.euiKeyboardShortcuts.rightArrowTitle',
{
defaultMessage: 'Right arrow',
}
),
'euiKeyboardShortcuts.rightArrowDescription': i18n.translate(
'core.euiKeyboardShortcuts.rightArrowDescription',
{
defaultMessage: 'Move one cell right',
}
),
'euiKeyboardShortcuts.leftArrowTitle': i18n.translate(
'core.euiKeyboardShortcuts.leftArrowTitle',
{
defaultMessage: 'Left arrow',
}
),
'euiKeyboardShortcuts.leftArrowDescription': i18n.translate(
'core.euiKeyboardShortcuts.leftArrowDescription',
{
defaultMessage: 'Move one cell left',
}
),
'euiKeyboardShortcuts.homeTitle': i18n.translate('core.euiKeyboardShortcuts.homeTitle', {
defaultMessage: 'Home',
}),
'euiKeyboardShortcuts.homeDescription': i18n.translate(
'core.euiKeyboardShortcuts.homeDescription',
{
defaultMessage: 'Move to the first cell of the current row',
}
),
'euiKeyboardShortcuts.endTitle': i18n.translate('core.euiKeyboardShortcuts.endTitle', {
defaultMessage: 'End',
}),
'euiKeyboardShortcuts.endDescription': i18n.translate(
'core.euiKeyboardShortcuts.endDescription',
{
defaultMessage: 'Move to the last cell of the current row',
}
),
'euiKeyboardShortcuts.ctrl': i18n.translate('core.euiKeyboardShortcuts.ctrl', {
defaultMessage: 'Ctrl',
}),
'euiKeyboardShortcuts.ctrlHomeDescription': i18n.translate(
'core.euiKeyboardShortcuts.ctrlHomeDescription',
{
defaultMessage: 'Move to the first cell of the current page',
}
),
'euiKeyboardShortcuts.ctrlEndDescription': i18n.translate(
'core.euiKeyboardShortcuts.ctrlEndDescription',
{
defaultMessage: 'Move to the last cell of the current page',
}
),
'euiKeyboardShortcuts.pageUpTitle': i18n.translate('core.euiKeyboardShortcuts.pageUpTitle', {
defaultMessage: 'Page Up',
}),
'euiKeyboardShortcuts.pageUpDescription': i18n.translate(
'core.euiKeyboardShortcuts.pageUpDescription',
{
defaultMessage: 'Go to the last row of the previous page',
}
),
'euiKeyboardShortcuts.pageDownTitle': i18n.translate(
'core.euiKeyboardShortcuts.pageDownTitle',
{
defaultMessage: 'Page Down',
}
),
'euiKeyboardShortcuts.pageDownDescription': i18n.translate(
'core.euiKeyboardShortcuts.pageDownDescription',
{
defaultMessage: 'Go to the first row of the next page',
}
),
'euiKeyboardShortcuts.enterTitle': i18n.translate('core.euiKeyboardShortcuts.enterTitle', {
defaultMessage: 'Enter',
}),
'euiKeyboardShortcuts.enterDescription': i18n.translate(
'core.euiKeyboardShortcuts.enterDescription',
{
defaultMessage: 'Open cell details and actions',
}
),
'euiKeyboardShortcuts.escapeTitle': i18n.translate('core.euiKeyboardShortcuts.escapeTitle', {
defaultMessage: 'Escape',
}),
'euiKeyboardShortcuts.escapeDescription': i18n.translate(
'core.euiKeyboardShortcuts.escapeDescription',
{
defaultMessage: 'Close cell details and actions',
}
),
'euiDataGrid.screenReaderNotice': i18n.translate('core.euiDataGrid.screenReaderNotice', {
defaultMessage: 'Cell contains interactive content.',
}),
Expand Down
Loading