Upgrade EUI to v77.2.2 by 1Copenut · Pull Request #155208 · elastic/kibana

1Copenut · 2023-04-18T22:04:51Z

Summary

eui@77.1.1 ⏩ eui@77.2.2

Closes elastic/eui#6724

`77.2.2`

Updated EuiFocusTrap to support the gapMode prop configuration (now defaults to padding) (#6744)

Bug fixes

Fixed the scrollLock property on EuiFocusTrap (and other components using EuiFocusTrap, such as EuiFlyout and EuiModal) to no longer block scrolling on nested portalled content, such as combobox dropdowns (#6744)

`77.2.1`

Bug fixes

Fixed EuiFieldNumber's native browser validity detection causing extra unnecessary rerenders (#6741)

`77.2.0`

Updated EuiFieldNumber to detect native browser invalid state and show an invalid icon (#6704)
Improved the input widths of EuiRange and EuiDualRange when showInput={true} to account for invalid icons (#6704)
Improved the isInvalid styling of EuiDualRange when showInput="inputWithPopover" (#6704)
Updated EuiFormControlLayoutIcons to render left icons in expected DOM order (#6705)
Updated EuiDatePickerRange's isInvalid state to match other range inputs (#6705)
Updated EuiSuperDatePicker's isInvalid state to match other range inputs (#6705)

Bug fixes

Fixed EuiValidatableControl to correctly display isInvalid states on mount (#6705)
Fixed an issue with EuiSearchBar where quoted phrases were not quoted when generating an Elasticsearch query. (#6714)

…teps

elasticmachine · 2023-05-02T01:02:19Z

Pinging @elastic/eui-team (EUI)

elasticmachine · 2023-05-02T05:51:51Z

Pinging @elastic/uptime (Team:uptime)

jughosta

Data Discovery changes LGTM 👍

nreese · 2023-05-02T13:14:15Z

There are some signifiant changes to EuiFieldNumber that are not well advertised. An invalid indicator is displayed for any EuiFieldNumber that accepts a decimal and does not also set step="any". For example, see the screen shot below. What are the plans to resolve these issues? Are teams expected to audit each use of EuiFieldNumber? I think we need a plan to avoid shipping 8.9 with a ton of broken looking EuiFieldNumber inputs.

nreese · 2023-05-02T13:23:11Z

...s/maps/public/connected_components/toolbar_overlay/set_view_control/decimal_degrees_form.tsx

            onChange={this._onLatChange}
            isInvalid={isLatInvalid}
            data-test-subj="latitudeInput"
+            step="any" // Browsers will validate decimals as invalid otherwise


There are other cases where EuiFieldNumber accepts decimals and step is not set. How should these be addressed?

Our recommendation would be for your decimal usages to set step="any": elastic/eui#5327

There are some signifiant changes to EuiFieldNumber that are not well advertised. An invalid indicator is displayed for any EuiFieldNumber that accepts a decimal and does not also set step="any".

Just to be clear, and so we're on the same page about this behavior - EuiFieldNumber is not doing anything to the default browser level ValidityState API for decimals inputs and the step prop.

Browsers are the ones defaulting step to non-decimal 1, not EUI. You can see this default behavior in this CodeSandbox when you type in 0.5 into a raw <input type="number"> with nothing but :invalid styling on it. You can also see in this example that adding step="any" (again, a native browser/HTML API, not EUI's) to the native input removes the :invalid styling.

So for all plugins in Kibana now noticing this behavior, it was already happening prior to this release/upgrade. EUI was already setting a red underline via the :invalid CSS selector on all form control elements, which is visible once the blue focus underline is not present. The browser-level tooltip error message was also already occurring, users likely simply weren't hovering over it to see it (or in some browsers, e.g. Safari, tooltips are less evident than e.g., Firefox).

All this change does is add an extra more visible icon when the native browser ValidityState flags something as :invalid.

So to summarize:

If you're seeing this issue now, you already had it before, the icon just made it more obvious

Devs are interacting with EuiFieldNumber props/attributes the exact same way you would interact with a <input type="number"> field

The solution on all levels (EUI usage and native HTML usage) is for those implementing a number field to set step="any" on fields where you expect decimals.

There is an argument to be made here for EuiFieldNumber to default step to "any" on your behalf to make this less of a manual process for consumers. In general, EUI prefers to stick to native/browser behavior as closely as possible, but there are absolutely exceptions to be made for things like accessibility, common pain points, and developer experience. We'd be super open to hearing if you'd prefer that to be the path we take.

Just to be clear, and so we're on the same page about this behavior - EuiFieldNumber is not doing anything to the default browser level ValidityState API for decimals inputs and the step prop.

understood

If you're seeing this issue now, you already had it before, the icon just made it more obvious

This is what concerns me. I don't think this change has been given the visibility it deserves. The icon is now visible and may confuse users as the input now displays an error icon. I just want to make sure teams understand the implications and take the time to audit their usage of EuiFieldNumber. Otherwise, there are going to be a lot of broken looking numeric inputs.

I have created #156540 to track the issue for Maps.

Gotcha. I think there's a few options we can take here:

Add a notice to the Kibana newsletter and EUI newsletter to try and flag this behavior more and get folks to update before 8.9 FF

As I mentioned above, I think there's an argument to be made here for defaulting EuiFieldNumber to step="any" - this would remove any work needed on Kibana's part. Do you have any thoughts / preference on this?

As I mentioned above, I think there's an argument to be made here for defaulting EuiFieldNumber to step="any" - this would remove any work needed on Kibana's part. Do you have any thoughts / preference on this?

I am not sure if that would create more problems than it solves. I think you should expect consumers to properly set step and not rely on defaults

Thanks Nathan - that's a super helpful point! We'll make sure to get this change added to the Kibana newsletter for awareness.

Just wanted to follow up on this thread - after having drilled down into the default browser behavior a bit more, we realized that the reason why this behavior wasn't obvious to users & devs beforehand is because when step is undefined, browsers set :invalid state while typing but then set :valid after the input is blurred. Our focus styles (blue underline) were always taking precedence over invalid styles (red underline), and then on blur, both were removed. The icon, as mentioned, is what what flags the mis-alignment in what's happening vs. what's shown to the user.

After conferring with our designers, EUI has decided to go with defaulting to step="any" on EuiFieldNumber - we consider it to be a UX improvement without significant downsides over the arguably unintuitive default browser behavior. See elastic/eui#6760 for more details, or feel free to leave us comments there.

Thanks again for flagging this @nreese, it's seriously much appreciated.

justinkambic

Synthetics changes LGTM

TattdCodeMonkey

ent-search changes LGTM

nreese

kibana-gis changes LGTM
code review, tested in chrome

stratoula · 2023-05-03T13:58:31Z

src/plugins/unified_search/public/query_string_input/query_string_input.tsx

              >
                {this.forwardNewValueIfNeeded(this.getQueryString())}
              </EuiTextArea>
+              {/* EUI TODO: This will need to be fixed before the Emotion conversion */}


@cee-chen @1Copenut what is it about? What needs to be fixed?

This component is our EUI Sass-generated classNames directly instead of EUI components (i.e., className="euiFormControlLayoutIcons" vs. <EuiFormControlLayout>).

In general, we strongly advise against this usage of EUI - but specifically, once our form components are converted to Emotion, said classNames will no longer have any meaningful CSS attached to them and the visual appearance of this icon will break again.

Part of why this custom implementation was added was (I assume) because EuiTextArea doesn't implement icon support OOTB - that's either something we can look at on EUI's end, or we can try to tweak this plugin in Kibana to use EUI components instead of classes.

Got it! So for now we are ok, we will revisit when we convert the component to use emotion instead 👍

stratoula

Visualizations team changes LGTM!

kibana-ci · 2023-05-03T18:25:42Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 3e80248

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`maps`	2.8MB	2.8MB	+33.0B
`unifiedSearch`	268.4KB	268.5KB	+68.0B
total			+101.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	363.3KB	363.5KB	+139.0B
`kbnUiSharedDeps-css`	314.9KB	313.2KB	-1.7KB
`kbnUiSharedDeps-npmDll`	6.0MB	6.0MB	+2.0KB
total			+409.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	19	21	+2
`securitySolution`	398	401	+3
total			+5

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	20	22	+2
`securitySolution`	478	481	+3
total			+5

History

💚 Build #124643 succeeded ba76636
💔 Build #124608 failed 186be51
💔 Build #124605 failed 966e65b
💔 Build #124259 failed 0a6f436
💔 Build #124151 failed 7c6c1e7
💔 Build #124145 failed 142d398

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @1Copenut

PhilippeOberti

LGTM for the Protections Experience team!

* main: (153 commits) [Security Solution] {{state.signals_count}} Object not working (#156472) (#156707) [Synthetics] refresh data on visualization scrubbing (#156777) [RAM] Docs for slack improvements (#153885) [RAM] Alert search bar only KQL (#155947) [ML] Functional tests - stabilize export job tests (#156586) [Saved Search] Update saved search schema to allow empty `sort` arrays (#156769) [ML] Rename `curated` model type to `elastic` (#156684) [Discover] Enable sharing for text based languages (#156652) [api-docs] 2023-05-05 Daily api_docs build (#156781) Upgrade EUI to v77.2.2 (#155208) [RAM][Maintenance Window][8.8]Fix window maintenance workflow (#156427) [DOCS] Case file attachments (#156459) [D4C] additional error handling for 'block' action added + policy editor UI fixes (#156629) [Enterprise Search] refactor(SearchApplications): rename telemetry ids (#156733) [Enterprise Search] Add telemetry to ELSER deployment buttons + error (#156545) [Security Solution] fixes Data Quality dashboard errors when a `basePath` is configured (#156233) [Logs onboarding] StepsFooter outside of main panel (#156686) [Security Solution] Add a migration to unmute custom Security Solution rules (#156593) [Enterprise Search][Behavioral Analytics] Update formulas (#156704) Add API Events to Endpoint Security Advanced Policy (#156718) ...

1Copenut added release_note:skip Skip the PR/issue when compiling release notes EUI backport:skip This PR does not require backporting ci:cloud-deploy Create or update a Cloud deployment v8.8.0 labels Apr 18, 2023

1Copenut self-assigned this Apr 18, 2023

1Copenut mentioned this pull request Apr 18, 2023

Kibana upgrade to v77.2.0 elastic/eui#6724

Closed

1Copenut changed the title ~~Feature/eui v77.2.0~~ Upgrade EUI to v77.2.0 Apr 24, 2023

cee-chen added v8.9.0 and removed backport:skip This PR does not require backporting v8.8.0 ci:cloud-deploy Create or update a Cloud deployment labels Apr 25, 2023

cee-chen mentioned this pull request Apr 27, 2023

[EuiFieldNumber] Clean up native :invalid detection elastic/eui#6741

Merged

5 tasks

1Copenut and others added 7 commits April 27, 2023 15:05

Bumping EUI to v77.2.0.

978f428

Adding language translations for EUI v77.2.0 bump.

70cf830

Updating snapshot tests for EUI.

a2ab2aa

Updating unit test for new EuiDatePickerRange JSX structure.

5e8010b

Revising one test from mount to shallow Enzyme method.

526edd4

Fixing CSS in query string text area.

899b5d3

Backport EUI v77.2.1

a708c48

cee-chen changed the title ~~Upgrade EUI to v77.2.0~~ Upgrade EUI to v77.2.1 Apr 27, 2023

cee-chen mentioned this pull request Apr 27, 2023

[Lens] assist EUI with bug investigation to get to version 77.2.0 #155890

Closed

kibanamachine and others added 5 commits April 27, 2023 19:41

Merge branch 'main' into feature/eui-v77.2.0

142d398

Merge branch 'main' into feature/eui-v77.2.0

7c6c1e7

Merge branch 'main' into feature/eui-v77.2.0

0a6f436

Bumping EUI to 72.2.2 backport.

3355336

Merging upstream main.

966e65b

1Copenut changed the title ~~Upgrade EUI to v77.2.1~~ Upgrade EUI to v77.2.2 May 1, 2023

1Copenut and others added 2 commits May 1, 2023 14:52

package.json newline.

186be51

Fix maps location decimal degrees showing invalid state for decimal s…

2ded4cf

…teps

cee-chen requested a review from a team as a code owner May 2, 2023 01:02

cee-chen requested a review from a team May 2, 2023 01:02

cee-chen requested review from a team as code owners May 2, 2023 01:02

pgayvallet approved these changes May 2, 2023

View reviewed changes

botelastic bot added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label May 2, 2023

sabarasaba approved these changes May 2, 2023

View reviewed changes

jughosta approved these changes May 2, 2023

View reviewed changes

jbudz approved these changes May 2, 2023

View reviewed changes

nreese reviewed May 2, 2023

View reviewed changes

justinkambic approved these changes May 2, 2023

View reviewed changes

dej611 mentioned this pull request May 2, 2023

[EuiNumberField] Invalid step tooltip does not always show up for invalid values elastic/eui#6747

Closed

TattdCodeMonkey approved these changes May 2, 2023

View reviewed changes

nreese mentioned this pull request May 3, 2023

[maps] add attribute step="any" to EuiFieldNumber inputs that accept decimals #156540

Closed

nreese approved these changes May 3, 2023

View reviewed changes

stratoula reviewed May 3, 2023

View reviewed changes

Merge branch 'main' into feature/eui-v77.2.0

3e80248

stratoula approved these changes May 3, 2023

View reviewed changes

PhilippeOberti approved these changes May 4, 2023

View reviewed changes

mistic merged commit fee63e3 into elastic:main May 5, 2023

kibanamachine added the backport:skip This PR does not require backporting label May 5, 2023

jughosta mentioned this pull request May 8, 2023

[UnifiedSearch] Fix query input styles #157010

Merged

JasonStoltz mentioned this pull request May 9, 2023

Upgrade EUI to v79.0.1 #156925

Merged

cee-chen mentioned this pull request May 9, 2023

[EuiFieldNumber] Default to step="any" and check native validity on blur elastic/eui#6760

Merged

7 tasks

Conversation

1Copenut commented Apr 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

elasticmachine commented May 2, 2023

Uh oh!

elasticmachine commented May 2, 2023

Uh oh!

jughosta left a comment

Choose a reason for hiding this comment

Uh oh!

nreese commented May 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen May 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justinkambic left a comment

Choose a reason for hiding this comment

Uh oh!

TattdCodeMonkey left a comment

Choose a reason for hiding this comment

Uh oh!

nreese left a comment

Choose a reason for hiding this comment

Uh oh!

stratoula May 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stratoula left a comment

Choose a reason for hiding this comment

Uh oh!

kibana-ci commented May 3, 2023

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

Uh oh!

PhilippeOberti left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

15 participants

1Copenut commented Apr 18, 2023 •

edited

Loading

nreese commented May 2, 2023 •

edited

Loading

cee-chen May 2, 2023 •

edited

Loading

stratoula May 3, 2023 •

edited

Loading