Upgrade EUI to v91.3.1 #173569
Merged
Upgrade EUI to v91.3.1 #173569
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
Merged
2 tasks
cee-chen
force-pushed
the
eui-v91.3.0
branch
2 times, most recently
from
0faea55
to
16ff1ba
Compare
- `textProps` can now be false, so we need the specific falsy check instead of using optional chaining
- the component now allows setting non-nullish falsy values (e.g. false, 0, etc) as option values, so specifying `string` is needed here
- hash changed due to removed child `img` styles
cee-chen
force-pushed
the
eui-v91.3.0
branch
from
16ff1ba
to
ef30127
Compare
- now that we're no longer opinionatedly adding margins to `<img>` tags within EuiText - see elastic/eui#7356 (comment)
- icon is still there, but the text is not if `target="_blank"` is not set
- EuiBasicTable no longer disables the `...` icon if all actions are disabled, only if the row is selected - this is effectively the same UX as the individual actions in the popover are still disabled, but users now know specifically what actions they don't have access to
… is selected - a previous test that was selecting rows was polluting subsequent tests - to be clear, the previous UX was already that the actions would be disabled on selection - the EUI fix was to remove the disabled actions from the DOM, which the test was asserting on
… for new redesign + replace theme token usage with new preferred Emotion-inferred theme, which involves adding an `emotion.d.ts` file (https://emotion.sh/docs/typescript#define-a-theme)
- not totally sure why this changed slightly, but my best guess is the header redesign
- should no longer be necessary with new design
cee-chen
force-pushed
the
eui-v91.3.0
branch
from
ef30127
to
9ed96cf
Compare
Thanks, @cee-chen. As discussed in today's EUI weekly meeting, I think the best path forward is to:
|
gergoabraham
approved these changes
Jan 3, 2024
|
@PhilippeOberti - so unfortunately the z-index approach we wanted to take doesn't work due to tooltips being portalled to the document body 😞 I settled for changing the position to
(ac3bef9) That's the best I can do in this PR for now - if your team still wants a better longer-term solution, please let us/@MichaelMarcialis know so we can brainstorm something! |
- restore left alignment of header cells - fix vertical center alignment of cell contents - add more left spacing to custom toolbar data - give timestamp tooltips the same workaround for new cell actions design that Security timeline received
opauloh
reviewed
Jan 4, 2024
Comment on lines
+55
to
58
| /* EUI QUESTION: Why is this being done via CSS instead of setting isExpandable: false in the columns API? */ | ||
| & .euiDataGridRowCell__actions > .euiDataGridRowCell__expandCell { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
Thanks for pointing this out! I actually wasn't aware about this option, I'll update it to use isExpanded in a follow up PR
There was a problem hiding this comment.
Thanks!! 🙇 I was able to take a peek at this when I was fixing the UI locally. display: none isn't visually breaking in this case, but it could be a very minor accessibility issue for keyboards users with no screen readers (since keyboard users can't access cell actions except via the expansion popover).
If it's not a blocker, we'd love for this CSS to simply be removed, but we'll leave it up to you all/another PR!
opauloh
approved these changes
Jan 4, 2024
💚 Build Succeeded
Metrics [docs]Async chunks
Page load bundle
Unknown metric groupsESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: |
PhilippeOberti
approved these changes
Jan 4, 2024
There was a problem hiding this comment.
thanks @cee-chen for fixing the weird tooltip issue. The solution you have now seems actually pretty good!
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
Jan 11, 2024
`v91.0.0-backport.0`⏩`v91.3.1`⚠️ The largest set of changes in this PR that touch source code (as opposed to test code) are related to several **EuiDataGrid** redesigns, particularly around the toolbar, column cell headers, and cell actions. We **strongly** recommend QAing your EuiDataGrid usages, **especially** if you have custom CSS styling on data grid cells. | Changes | Screencap | |--------|--------| | Cell actions and popover | <img src="https://github.com/elastic/kibana/assets/549407/6462d983-307f-4a3c-84b1-36d9b276c9a0" width="240" alt=""> | | Column headers | <img src="https://github.com/elastic/kibana/assets/549407/3fd64a15-829a-48f3-9dba-9dae3c73e6b2" alt="" width="360"> | | Toolbar | <img src="https://github.com/elastic/kibana/assets/549407/f876f6d7-635d-497a-b1e7-9daf4e6fd3e3" alt="" width="240"> | --- ## [`v91.3.1`](https://github.com/elastic/eui/releases/v91.3.1) **Bug fixes** - Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton` test subject attribute from to the clickable button, for easier E2E testing ([elastic#7427](elastic/eui#7427)) - Fixed `EuiBasicTable`/`EuiInMemoryTable` actions to correctly show as disabled when rows are being selected ([elastic#7428](elastic/eui#7428)) ## [`v91.3.0`](https://github.com/elastic/eui/releases/v91.3.0) - Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs. ([elastic#7399](elastic/eui#7399)) - Updated `EuiDataGridSchemaDetector`'s comparator arguments to include entry indexes ([elastic#7406](elastic/eui#7406)) ## [`v91.2.0`](https://github.com/elastic/eui/releases/v91.2.0) - Added `endpoint` glyph to `EuiIcon` ([elastic#7383](elastic/eui#7383)) **Bug fixes** - Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where scrollbar widths were not being accounted for ([elastic#7392](elastic/eui#7392)) ## [`v91.1.0`](https://github.com/elastic/eui/releases/tag/v91.1.0) - Updated `EuiDataGrid` cell actions to display above cells instead of within them, to avoid content clipping issues ([elastic#7343](elastic/eui#7343)) - Updated `EuiDataGrid` cell expansion popovers to sit on top of cells instead of below/next to them ([elastic#7343](elastic/eui#7343)) - Updated `EuiListGroupItem` to render an external icon and screen reader affordance for links with `target` set to to `_blank` ([elastic#7352](elastic/eui#7352)) - Updated `EuiListGroupItem` with a new `external` prop, which allows enabling or disabling the new external link icon ([elastic#7352](elastic/eui#7352)) - Updated `EuiText` to no longer set any opinionated styles on child `<img>` tags - use `EuiImage` for image display within text instead ([elastic#7360](elastic/eui#7360)) - Improved `EuiBasicTable`/`EuiInMemoryTable`s mobile UI for custom actions ([elastic#7361](elastic/eui#7361)) - Added a new `EuiDataGridToolbarControl` subcomponent, which is useful for rendering your own custom `EuiDataGrid` toolbar buttons while matching the look of the default controls ([elastic#7369](elastic/eui#7369)) - Updated `EuiDataGrid`'s toolbar controls to show active/current counts in badges, and updated the Columns button icon ([elastic#7369](elastic/eui#7369)) - Updated `EuiButtonEmpty` to allow passing `false` to `textProps`, which allows rendering custom button content without an extra text wrapper ([elastic#7369](elastic/eui#7369)) - Updated `EuiDataGrid` column header cells to show the sort arrow after the heading text, instead of before ([elastic#7371](elastic/eui#7371)) - Updated `EuiDataGrid`'s column header actions icon from a chevron to `boxesVertical` ([elastic#7371](elastic/eui#7371)) - Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s. Alongside `name`, the `description`, `href`, and `data-test-subj` properties now also accept an optional callback that the current `item` will be passed to ([elastic#7373](elastic/eui#7373)) - Updated `EuiContextMenuItem` with a new `toolTipProps` prop ([elastic#7373](elastic/eui#7373)) - `EuiSelectable` now allows configurable text truncation via `listProps.truncationProps` ([elastic#7388](elastic/eui#7388)) - `EuiTextTruncate` now supports a new `calculationDelayMs` prop for working around font loading or layout shifting scenarios ([elastic#7388](elastic/eui#7388)) **Bug fixes** - Fixed incorrect `EuiPopover` positioning calculations when `hasArrow` was set to false ([elastic#7343](elastic/eui#7343)) - Fixed `EuiSuperSelect` to render options with falsy values (false, 0, and ''), but not nullish values (undefined or null) ([elastic#7362](elastic/eui#7362)) - Fixed `EuiSuperSelect`'s typing to allow non-string values (e.g., booleans or numbers) ([elastic#7362](elastic/eui#7362)) - Fixed `EuiDataGrid`'s numeric and currency column heading cells to be correctly right-aligned ([elastic#7371](elastic/eui#7371)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not showing tooltip descriptions when rendered in the all actions popover menu ([elastic#7373](elastic/eui#7373)) - Fixed missing underlines on `EuiContextMenu` link hover ([elastic#7373](elastic/eui#7373)) - Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent` ([elastic#7375](elastic/eui#7375)) - Fixed `EuiFormRow`s with `hasEmptyLabelSpace` being very slightly off in vertical alignment ([elastic#7380](elastic/eui#7380)) **Deprecations** - Deprecated `EuiContextMenuItem`'s `toolTipTitle` prop. Use `toolTipProps.title` instead ([elastic#7373](elastic/eui#7373)) - Deprecated `EuiContextMenuItem`'s `toolTipPosition` prop. Use `toolTipProps.position` instead ([elastic#7373](elastic/eui#7373)) **Accessibility** - Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested interactive custom actions ([elastic#7361](elastic/eui#7361)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not correctly reading out action descriptions to screen readers ([elastic#7373](elastic/eui#7373)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` primary actions not visibly appearing on keyboard focus ([elastic#7373](elastic/eui#7373)) --------- Co-authored-by: Julia Rechkunova <[email protected]>
This was referenced Feb 21, 2024
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Feb 21, 2024
## Summary issue: elastic#177410 Adding `overflow: hidden` style was causing the cell actions to disappear after the upgrade to [EUI upgrade to v91.3.1](elastic#173569) The `overflow: hidden` style is no longer needed, it has been removed. So cell actions are displayed (cherry picked from commit ab864b4)
kibanamachine
referenced
this pull request
Feb 21, 2024
#177501) # Backport This will backport the following commits from `main` to `8.13`: - [[Security Solution] Fix cell actions in Explore pages (#177478)](#177478) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Sergi Massaneda","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-02-21T17:52:45Z","message":"[Security Solution] Fix cell actions in Explore pages (#177478)\n\n## Summary\r\n\r\nissue: https://github.com/elastic/kibana/issues/177410\r\n\r\nAdding `overflow: hidden` style was causing the cell actions to\r\ndisappear after the upgrade to [EUI upgrade to\r\nv91.3.1](https://github.com/elastic/kibana/pull/173569)\r\n\r\nThe `overflow: hidden` style is no longer needed, it has been removed.\r\nSo cell actions are displayed","sha":"ab864b4ccc699cc1a986bf099460ad877a42333d","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Threat Hunting","Team:Threat Hunting:Explore","v8.13.0","v8.14.0"],"title":"[Security Solution] Fix cell actions in Explore pages","number":177478,"url":"https://github.com/elastic/kibana/pull/177478","mergeCommit":{"message":"[Security Solution] Fix cell actions in Explore pages (#177478)\n\n## Summary\r\n\r\nissue: https://github.com/elastic/kibana/issues/177410\r\n\r\nAdding `overflow: hidden` style was causing the cell actions to\r\ndisappear after the upgrade to [EUI upgrade to\r\nv91.3.1](https://github.com/elastic/kibana/pull/173569)\r\n\r\nThe `overflow: hidden` style is no longer needed, it has been removed.\r\nSo cell actions are displayed","sha":"ab864b4ccc699cc1a986bf099460ad877a42333d"}},"sourceBranch":"main","suggestedTargetBranches":["8.13"],"targetPullRequestStates":[{"branch":"8.13","label":"v8.13.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/177478","number":177478,"mergeCommit":{"message":"[Security Solution] Fix cell actions in Explore pages (#177478)\n\n## Summary\r\n\r\nissue: https://github.com/elastic/kibana/issues/177410\r\n\r\nAdding `overflow: hidden` style was causing the cell actions to\r\ndisappear after the upgrade to [EUI upgrade to\r\nv91.3.1](https://github.com/elastic/kibana/pull/173569)\r\n\r\nThe `overflow: hidden` style is no longer needed, it has been removed.\r\nSo cell actions are displayed","sha":"ab864b4ccc699cc1a986bf099460ad877a42333d"}}]}] BACKPORT--> Co-authored-by: Sergi Massaneda <[email protected]>
fkanout
pushed a commit
to fkanout/kibana
that referenced
this pull request
Mar 4, 2024
## Summary issue: elastic#177410 Adding `overflow: hidden` style was causing the cell actions to disappear after the upgrade to [EUI upgrade to v91.3.1](elastic#173569) The `overflow: hidden` style is no longer needed, it has been removed. So cell actions are displayed
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.
v91.0.0-backport.0⏩v91.3.1v91.3.1Bug fixes
EuiDataGrid's header cells'dataGridHeaderCellActionButtontest subject attribute from to the clickable button, for easier E2E testing (#7427)EuiBasicTable/EuiInMemoryTableactions to correctly show as disabled when rows are being selected (#7428)v91.3.0esqlVis,pipeBreaks, andpipeNoBreaksicon glyphs. (#7399)EuiDataGridSchemaDetector's comparator arguments to include entry indexes (#7406)v91.2.0endpointglyph toEuiIcon(#7383)Bug fixes
EuiSelectables with customtruncationProps, where scrollbar widths were not being accounted for (#7392)v91.1.0EuiDataGridcell actions to display above cells instead of within them, to avoid content clipping issues (#7343)EuiDataGridcell expansion popovers to sit on top of cells instead of below/next to them (#7343)EuiListGroupItemto render an external icon and screen reader affordance for links withtargetset to to_blank(#7352)EuiListGroupItemwith a newexternalprop, which allows enabling or disabling the new external link icon (#7352)EuiTextto no longer set any opinionated styles on child<img>tags - useEuiImagefor image display within text instead (#7360)EuiBasicTable/EuiInMemoryTables mobile UI for custom actions (#7361)EuiDataGridToolbarControlsubcomponent, which is useful for rendering your own customEuiDataGridtoolbar buttons while matching the look of the default controls (#7369)EuiDataGrid's toolbar controls to show active/current counts in badges, and updated the Columns button icon (#7369)EuiButtonEmptyto allow passingfalsetotextProps, which allows rendering custom button content without an extra text wrapper (#7369)EuiDataGridcolumn header cells to show the sort arrow after the heading text, instead of before (#7371)EuiDataGrid's column header actions icon from a chevron toboxesVertical(#7371)EuiBasicTableandEuiInMemoryTables. Alongsidename, thedescription,href, anddata-test-subjproperties now also accept an optional callback that the currentitemwill be passed to (#7373)EuiContextMenuItemwith a newtoolTipPropsprop (#7373)EuiSelectablenow allows configurable text truncation vialistProps.truncationProps(#7388)EuiTextTruncatenow supports a newcalculationDelayMsprop for working around font loading or layout shifting scenarios (#7388)Bug fixes
EuiPopoverpositioning calculations whenhasArrowwas set to false (#7343)EuiSuperSelectto render options with falsy values (false, 0, and ''), but not nullish values (undefined or null) (#7362)EuiSuperSelect's typing to allow non-string values (e.g., booleans or numbers) (#7362)EuiDataGrid's numeric and currency column heading cells to be correctly right-aligned (#7371)EuiBasicTableandEuiInMemoryTableactions not showing tooltip descriptions when rendered in the all actions popover menu (#7373)EuiContextMenulink hover (#7373)EuiBreadcrumbs withpopoverContent(#7375)EuiFormRows withhasEmptyLabelSpacebeing very slightly off in vertical alignment (#7380)Deprecations
EuiContextMenuItem'stoolTipTitleprop. UsetoolTipProps.titleinstead (#7373)EuiContextMenuItem'stoolTipPositionprop. UsetoolTipProps.positioninstead (#7373)Accessibility
EuiBasicTable/EuiInMemoryTablerendering nested interactive custom actions (#7361)EuiBasicTableandEuiInMemoryTableactions not correctly reading out action descriptions to screen readers (#7373)EuiBasicTableandEuiInMemoryTableprimary actions not visibly appearing on keyboard focus (#7373)