Upgrade EUI to v70.2.4 #144845
Merged
Upgrade EUI to v70.2.4 #144845
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cee-chen
added
release_note:skip
cee-chen
force-pushed
the
eui-70.2.x
branch
13 times, most recently
from
25f8af8
to
f93518e
Compare
- reverts temporary fixes; should now be addressed in EUI itself
- corresponds to visColors, so convert to that util instead [refactor] while here, convert file to using native EUI `useEuiTheme` instead of referencing the Sass vars
…lasses address TODO by using component directly - EuiCodeBlock now supports JSX/nodes, albeit without syntax highlighting (not an issue since that wasn't being used here)
- replace with basic EUI size variables
- Emotion adds another wrapper, so we now have to use `.last()` in Enzyme finding - className modifiers have been removed, so we have to replace them with their Emotion equivalents - this isn't great but to be honest we don't recommend asserting on EUI classNames anyway - certain selectors updated to specificy their raw/DOM output vs enzyme wrappers
…h theme color mode
cee-chen
pushed a commit
that referenced
this pull request
Nov 17, 2022
## Summary `eui@67.1.8` ⏩ `eui@67.1.9` This backport fixes bugs affecting Maps that were found in the latest EUI upgrade (#144845 (comment)). It is meant to go directly into 8.6 ## [`67.1.9`](https://github.com/elastic/eui/tree/v67.1.9) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
|
Pinging remaining CODEOWNERS: @elastic/security-solution-platform @elastic/protections-experience @elastic/security-onboarding-and-lifecycle-mgt @ashokaditya @dasansol92 Last call for review/approval/QA - I'll be asking KibanaOps to admin merge this by the end of the week. This PR will not be landing in 8.6, so any issues found will have the full 8.7 minor to resolve. |
2 tasks
|
@elasticmachine merge upstream |
stratoula
approved these changes
Nov 18, 2022
There was a problem hiding this comment.
Thanx @constancecchen for your amazing work here 🙇 Visualizations team LGTM
ashokaditya
reviewed
Nov 18, 2022
...blic/management/components/endpoint_response_actions_list/use_response_actions_log_table.tsx
Show resolved
Hide resolved
|
Filter icon is different now and looks smaller in comparison with others. Is it expected? Discover sidebar > field popover: Discover grid > Doc viewer: |
jughosta
approved these changes
Nov 18, 2022
@jughosta Yes, this was an intentional EUI designer change as confirmed by @miukimiu above. elastic/eui#6282 cc @MichaelMarcialis - I do agree that the filter icon now does look a little odd next to the +/- icons, so you may want to consider re-adding a |
|
@jughosta I'll re-include the old |
|
@elasticmachine merge upstream |
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
Page load bundle
Unknown metric groupsESLint disabled in files
ESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: |
cee-chen
pushed a commit
that referenced
this pull request
Nov 19, 2022
) ## Summary @jughosta flagged several responsive issues in #144845 (review). Two of these were existing issues in Kibana main and need to be backported to 8.6, hence the separate PR. I recommend turning off whitespace changes when viewing the diff, as much of the wrapped/unwrapped code remained the same except for indentation. ### Create Field flyout: #### Before: <img width="760" alt="" src="https://user-images.githubusercontent.com/549407/202580476-610e3f54-eabb-4859-a49d-19d0608be787.png"> #### After: <img width="779" alt="" src="https://user-images.githubusercontent.com/549407/202580282-886435e7-00cc-4569-943d-fff471b3af7b.png"> ### Fields flyout (mobile only): #### Before: <img width="754" alt="" src="https://user-images.githubusercontent.com/549407/202580465-917ef121-d0eb-4188-bcf7-2b08edb5dd49.png"> #### After: <img width="761" alt="" src="https://user-images.githubusercontent.com/549407/202580275-820b9420-a8da-458e-bbb4-5f1cfb57ba99.png"> ### Checklist - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Nov 19, 2022
…tic#145650) ## Summary @jughosta flagged several responsive issues in elastic#144845 (review). Two of these were existing issues in Kibana main and need to be backported to 8.6, hence the separate PR. I recommend turning off whitespace changes when viewing the diff, as much of the wrapped/unwrapped code remained the same except for indentation. ### Create Field flyout: #### Before: <img width="760" alt="" src="https://user-images.githubusercontent.com/549407/202580476-610e3f54-eabb-4859-a49d-19d0608be787.png"> #### After: <img width="779" alt="" src="https://user-images.githubusercontent.com/549407/202580282-886435e7-00cc-4569-943d-fff471b3af7b.png"> ### Fields flyout (mobile only): #### Before: <img width="754" alt="" src="https://user-images.githubusercontent.com/549407/202580465-917ef121-d0eb-4188-bcf7-2b08edb5dd49.png"> #### After: <img width="761" alt="" src="https://user-images.githubusercontent.com/549407/202580275-820b9420-a8da-458e-bbb4-5f1cfb57ba99.png"> ### Checklist - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co> (cherry picked from commit 10c6649)
kibanamachine
added a commit
that referenced
this pull request
Nov 19, 2022
…#145650) (#145789) # Backport This will backport the following commits from `main` to `8.6`: - [[Discover] Fix Fields flyout and Create Field flyouts on mobile (#145650)](#145650) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Constance","email":"constancecchen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2022-11-19T06:44:28Z","message":"[Discover] Fix Fields flyout and Create Field flyouts on mobile (#145650)\n\n## Summary\r\n\r\n@jughosta flagged several responsive issues in\r\nhttps://github.com//pull/144845#pullrequestreview-1183919709.\r\nTwo of these were existing issues in Kibana main and need to be\r\nbackported to 8.6, hence the separate PR.\r\n\r\nI recommend turning off whitespace changes when viewing the diff, as\r\nmuch of the wrapped/unwrapped code remained the same except for\r\nindentation.\r\n\r\n### Create Field flyout:\r\n\r\n#### Before:\r\n<img width=\"760\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580476-610e3f54-eabb-4859-a49d-19d0608be787.png\">\r\n\r\n#### After:\r\n<img width=\"779\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580282-886435e7-00cc-4569-943d-fff471b3af7b.png\">\r\n\r\n### Fields flyout (mobile only):\r\n\r\n#### Before:\r\n<img width=\"754\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580465-917ef121-d0eb-4188-bcf7-2b08edb5dd49.png\">\r\n\r\n#### After:\r\n<img width=\"761\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580275-820b9420-a8da-458e-bbb4-5f1cfb57ba99.png\">\r\n\r\n### Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>","sha":"10c6649f4b28184fc07d41f081fac7e56c447a50","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v8.6.0","v8.7.0"],"number":145650,"url":"#145650 Fix Fields flyout and Create Field flyouts on mobile (#145650)\n\n## Summary\r\n\r\n@jughosta flagged several responsive issues in\r\nhttps://github.com//pull/144845#pullrequestreview-1183919709.\r\nTwo of these were existing issues in Kibana main and need to be\r\nbackported to 8.6, hence the separate PR.\r\n\r\nI recommend turning off whitespace changes when viewing the diff, as\r\nmuch of the wrapped/unwrapped code remained the same except for\r\nindentation.\r\n\r\n### Create Field flyout:\r\n\r\n#### Before:\r\n<img width=\"760\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580476-610e3f54-eabb-4859-a49d-19d0608be787.png\">\r\n\r\n#### After:\r\n<img width=\"779\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580282-886435e7-00cc-4569-943d-fff471b3af7b.png\">\r\n\r\n### Fields flyout (mobile only):\r\n\r\n#### Before:\r\n<img width=\"754\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580465-917ef121-d0eb-4188-bcf7-2b08edb5dd49.png\">\r\n\r\n#### After:\r\n<img width=\"761\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580275-820b9420-a8da-458e-bbb4-5f1cfb57ba99.png\">\r\n\r\n### Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>","sha":"10c6649f4b28184fc07d41f081fac7e56c447a50"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"#145650 Fix Fields flyout and Create Field flyouts on mobile (#145650)\n\n## Summary\r\n\r\n@jughosta flagged several responsive issues in\r\nhttps://github.com//pull/144845#pullrequestreview-1183919709.\r\nTwo of these were existing issues in Kibana main and need to be\r\nbackported to 8.6, hence the separate PR.\r\n\r\nI recommend turning off whitespace changes when viewing the diff, as\r\nmuch of the wrapped/unwrapped code remained the same except for\r\nindentation.\r\n\r\n### Create Field flyout:\r\n\r\n#### Before:\r\n<img width=\"760\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580476-610e3f54-eabb-4859-a49d-19d0608be787.png\">\r\n\r\n#### After:\r\n<img width=\"779\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580282-886435e7-00cc-4569-943d-fff471b3af7b.png\">\r\n\r\n### Fields flyout (mobile only):\r\n\r\n#### Before:\r\n<img width=\"754\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580465-917ef121-d0eb-4188-bcf7-2b08edb5dd49.png\">\r\n\r\n#### After:\r\n<img width=\"761\" alt=\"\"\r\nsrc=\"https://user-images.githubusercontent.com/549407/202580275-820b9420-a8da-458e-bbb4-5f1cfb57ba99.png\">\r\n\r\n### Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>","sha":"10c6649f4b28184fc07d41f081fac7e56c447a50"}}]}] BACKPORT--> Co-authored-by: Constance <constancecchen@users.noreply.github.com>
11 tasks
3 tasks
vitaliidm
pushed a commit
that referenced
this pull request
Nov 22, 2022
## Summary closes #145508 This workaround was added in 7832378. A non-temporary fix was pushed up in 8.7 (#144845), but rather than create a new EUI backport just for this issue, I'm opting to fix the 8.6-only workaround. ### Before <img src="https://user-images.githubusercontent.com/61860752/202394082-c82006af-1492-4537-a354-8e2f60b4b45e.png" alt=""> ### After <img width="909" alt="" src="https://user-images.githubusercontent.com/549407/203149130-a5cc0a69-d736-4e89-9d26-6e5e870238b4.png"> ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
![https://user-images.githubusercontent.com/549407/202580476-610e3f54-eabb-4859-a49d-19d0608be787.png\">\r\n\r\n####](https://user-images.githubusercontent.com/549407/202580476-610e3f54-eabb-4859-a49d-19d0608be787.png\">\r\n\r\n####){kind=link}
![https://user-images.githubusercontent.com/549407/202580282-886435e7-00cc-4569-943d-fff471b3af7b.png\">\r\n\r\n###](https://user-images.githubusercontent.com/549407/202580282-886435e7-00cc-4569-943d-fff471b3af7b.png\">\r\n\r\n###){kind=link}
![https://user-images.githubusercontent.com/549407/202580465-917ef121-d0eb-4188-bcf7-2b08edb5dd49.png\">\r\n\r\n####](https://user-images.githubusercontent.com/549407/202580465-917ef121-d0eb-4188-bcf7-2b08edb5dd49.png\">\r\n\r\n####){kind=link}
![https://user-images.githubusercontent.com/549407/202580275-820b9420-a8da-458e-bbb4-5f1cfb57ba99.png\">\r\n\r\n###](https://user-images.githubusercontent.com/549407/202580275-820b9420-a8da-458e-bbb4-5f1cfb57ba99.png\">\r\n\r\n###){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
eui@67.1.8⏩eui@70.2.2EuiFlexGroupandEuiFlexGrid, primarily around switching margins and negative margins togap. Please do a quick QA pass of your app to scan for any issues. We're happy to help resolve minor fixes, or potentially follow up after PR merges. You can find us over in #eui!70.2.4Bug fixes
EuiFlexGroups, where the parentEuiFlexGroupis responsive but a childEuiFlexGroupis not (#6381)70.2.3Bug fixes
EuiSuperDatePickercaused byEuiFlexCSS gap change (#6380)70.2.2EuiButtonnow acceptsminWidth={false}(#6373)Bug fixes
EuiButtonno longer outputs unnecessary inline styles forminWidth={0}orminWidth={false}(#6373)EuiFacetButtonno longer reports type issues when passing props accepted byEuiButton(#6373).eui-yScrollWithShadowsand.eui-xScrollWithShadows(#6374)70.2.1Bug fixes
EuiPageSectionnot correctly mergingcontentProps.css(#6365)EuiTabnot defaulting to sizem(#6366)70.2.0EuiDataGrid's toolbar. This can be visually hidden viatoolbarVisibility.showKeyboardShortcuts, but will always remain accessible to keyboard and screen reader users. (#6036)EuiScreenReaderOnly'sshowOnFocusprop now also shows on focus within its children (#6036)onFocusprop callback toEuiSuperDatePicker(#6320)Bug fixes
EuiSelectableto ensure the full options list is re-displayed when the search bar is controlled and cleared usingsearchProps.value(#6317)xl-sizedEuiTabs(#6336)EuiCardnot correctly mergingcsson its childicons (#6341)EuiCheckableCardnot settingcsson the correct DOM node (#6341)EuiModals containingEuiBasicTables tall enough to scroll (#6343)to_initialsthat truncates custom initials (#6346)EuiCardwhere layout breaks whenhorizontalandselectableare both passed (#6348)70.1.0hintprop to the<EuiSearchBar />. This prop lets the consumer render a hint below the search bar that will be displayed on focus. (#6319)hasDragDropprop toEuiPopover. Use this prop if your popover containsEuiDragDropContext. (#6329)Bug fixes
EuiButton's cursor style when the button is disabled (#6323)EuiPageTemplatenot recognizing childEuiPageSidebars/EuiPageTemplate.Sidebars withcssprops (#6324)EuiBetaBadgeto always respect itsanchorPropsvalues, including when there is no tooltip content (#6326)EuiModalto not cause scroll-jumping issues on modal open (#6327)EuiDataGrid's columns & sorting toolbar popovers (#6329)EuiButtonnot correctly passingtextPropsfor children inside fragments or i18n components (#6332)EuiButtonnot correctly respectingminWidth={0}(#6332)CSS-in-JS conversions
EuiTabsto Emotion (#6311)70.0.0enabledoption to the<EuiInMemoryTable />executeQueryOptionsprop. This option prevents the Query from being executed when controlled by the consumer. (#6284)Bug fixes
EuiOverlayMaskto set a[data-relative-to-header=above|below]attribute to replace the--aboveHeaderand--belowHeaderclassNames removed in its Emotion conversion (#6289)EuiHeaderCSS using removedEuiOverlayMaskclass modifiers (#6293)EuiToolTipnot respecting reduced motion preferences (#6295)EuiTourwhere passing anypanelPropswould cause the beacon to disappear (#6298)Breaking changes
@emotion/cssis now a required peer dependency, alongside@emotion/react(#6288)@emotion/cacheis no longer required peer dependency, although your project must still use it if setting custom cache/injection locations (#6288)CSS-in-JS conversions
EuiCodeandEuiCodeBlockto Emotion; RemovedeuiCodeSyntaxTokensSass mixin and$euiCodeBlockPaddingModifiers; (#6263)EuiResizableContainerandEuiResizablePanelto Emotion (#6287)69.0.0fullWidthprop on EuiForm, which will be the default for all rows/controls within (#6229)onResizeStartandonResizeEndcallbacks toEuiResizableContainer(#6236)EuiComboBoxwith theisCaseSensitiveprop (#6268)EuiFlexItemnow supportsgrow={0}(#6270)alignItemsprop toEuiFlexGrid(#6281)filter,filterExclude,filterIgnore,filterInclude,indexTemporary,infinity,sortAscending, andsortDescendingglyphs toEuiIcon(#6282)Bug fixes
EuiTextPropsto show thecolortype optioninheritas default (#6267)EuiFlexGroupnow correctly respectsgutterSizewhen responsive (#6270)EuiBreadcrumbs'sbreadcrumbsarray not respectingtruncateoverrides (#6280)Breaking changes
EuiFlexGridno longer supportscolumns={0}. UseEuiFlexGroupinstead for normal flex display (#6270)EuiFlexGridnow uses moderndisplay: gridCSS (#6270)EuiFlexGroup,EuiFlexGrid, andEuiFlexItemnow use moderngapCSS instead of margins and negative margins (#6270)EuiFlexGroupno longer applies responsive styles tocolumnorcolumnReversedirections (#6270)CSS-in-JS conversions
EuiFlexGroup,EuiFlexGrid, andEuiFlexItemto Emotion (#6270)68.0.0betaglyph toEuiIcon(#6250)launchandspacesglyphs toEuiIcon(#6260)fallbackDestinationprop toEuiSkipLink, which accepts a string of query selectors to fall back to if thedestinationIddoes not have a valid target. Defaults tomain(#6261)EuiSkipLinkis now always anatag to ensure that it is always placed within screen reader link menus. (#6261)Bug fixes
EuiSuperDatePickernot correctly merging passedclassNames (#6253)EuiColorStopsnot correctly merging in passeddata-test-subjs,styles, or...rest(#6255)EuiResizablePanelincorrectly passingstyleto the wrapper instead of the panel. UsewrapperProps.styleto pass styles to the wrapper. (#6255)onClicks passed toEuiSkipLinkoverridingoverrideLinkBehavior(#6261)Breaking changes
inheritandghostcolor fromEuiListGroupItem(#6207)textinstead ofinherit(#6207)CSS-in-JS conversions
EuiListGroupandEuiListGroupItemto Emotion; Removed$euiListGroupGutterTypes,$euiListGroupItemColorTypesand$euiListGroupItemSizeTypes; (#6207)EuiBadgeGroupto Emotion (#6258)EuiBetaBadgeto Emotion (#6258)EuiNotificationBadgeto Emotion (#6258)