Upgrade EUI to v94.1.0 (major EuiTable refactors)
#180514
Conversation
cee-chen
changed the title
EuiTable refactors)
cee-chen
force-pushed
the
eui/v94.1.0
branch
3 times, most recently
from
37746b5 to
7ac2663
Compare
cee-chen
added
v8.15.0
release_note:skip
cee-chen
force-pushed
the
eui/v94.1.0
branch
5 times, most recently
from
35f8a43 to
32da71e
Compare
- same `false` behavior, but more extensible if needed
- now detected automatically in `columns`, there's no need to pass this prop manually
- as far as I can tell this util isn't used anywhere else, so I'm deleting it entirely
- this is now automatically detected by the presence of the `itemIdToExpandedRowMap` prop and no longer needs to be passed manually
- was confused about this as the condition for `itemIdToExpandedRowMap` wasn't the same as `isExpandable`, so I updated the row map to support both
- this is now automatically detected by the presence of the `selectable` prop and no longer needs to be passed manually
- basic validation against `selection` conditionals, if they existed - either way, this only affects responsive table views + remove unit test that no longer applies
- `isSelectable` now indicates whether the checkbox is disabled or enabled; `hasSelection` (new prop) determines visual checkbox affordance
- remove unnecessary props that already default to false - various syntax nits - small CSS fixes
- they no longer have styles attached to them and thus no longer do anything - replace with direct component usage instead (or in some cases remove if they're not doing anything)
- replace with custom CSS instead for now, with a comment
...bservability_solution/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx
Show resolved
Hide resolved
- now that EuiBasicTable's default actions supports passing the item to `href` as well as the click event to `onClick`
src/plugins/unified_doc_viewer/public/components/doc_viewer_table/legacy/table.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Thanks, @cee-chen! Looks good from my perspective. Approving.
@elastic/kibana-management: In testing, I noticed that the "Type" column is now truncated by default on the saved object page in stack management. This is due to the new addition of the sortable icon that appends each sortable column header. Ya'll may want to increase the width of this column slightly so that the text isn't always truncated.
- `:first-child` CSS no longer works well since `EuiBasicTable` no longer adds a `<div>` wrapper around the `<table>` + additionally fix Errors table to align the pagination bar to the bottom, like the Transactions and Dependencies tables
…new sortable icon + use first custom `responsiveBreakpoint` to handle table with lots of columns!! 🎉
|
@MichaelMarcialis I went ahead and fixed that in this PR - let me know if this looks good to you, and also if you find any other similar issues! 
@jennypavlova Thank you so much for the help in getting Obs data into my local, I should have fixed all the issues in the screenshots in #180514 (review). I additionally fixed a small visual bug already in prod where the Also the Hosts overview table is now the first table to use the new |
|
👋 @elastic/security-entity-analytics One last ping for QA and review requests by EOD Thursday - we'll be asking for an admin merge if not. As always, even if you catch any visual bugs post-merge, the EUI team is more than happy to help quickly fix any issues after the fact. |
There was a problem hiding this comment.
LGTM 🚀 @cee-chen Thank you very much for all the fixes! I tested it and all the tables look good ✨
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Module Count
Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
Widening actions column width. **Before**  **After**  Also fixes similar issue with the annotations table in the anomaly explorer. Issue introduced in #180514
v93.6.0⏩v94.1.0Important
👋 Hello everyone - this is a special release containing
EuiTable's conversion to Emotion, several long-overdue cleanups and breaking changes, and one or two fun new features. First, let's address the big questions:Q: I'm listed as a codeowner, how much should I manually QA/review?
Answer: It depends on what exactly in your code changed, but in general I would strongly suggest at least pulling this branch down and doing a quick visual smoke test of all tables (note: not datagrids) in your apps/plugins. You should not expect to see any major visual regressions.
If your table contained any kind of custom styling or behavior (e.g. custom CSS, etc.) I strongly recommend taking more time to QA thoroughly to ensure your table still looks and behaves as expected. Teams with very manual or specific updates will be flagged below in comment threads.
Q: When do I need to review by?
This PR will be merged after 8.14FF. Because this upgrade touches so many files and teams, we're aiming for asking for an admin merge by EOD 4/18 regardless of full approval status.
As always, you're welcome to ping us after merge if you find any issues later (see our FAQ), as you will have until 8.15FF to catch any bugs.
Q: What breaking changes were made, and why?
Here's a quick shortlist of all the changes made that affected the majority of the commits in this PR:
Removed several top-level table props
responsiveprop has been removed in favor of the newresponsiveBreakpointprop (samefalsebehavior as before)hasActions,isSelectable, andisExpandabletextOnlyRemoved hidden mobile vs. desktop DOM
Previously, EUI would set classes that applied
display: noneCSS for content that was hidden for mobile vs. desktop. This is no longer the case, and content that only displays for mobile or only displays for desktop will no longer render to the DOM at all if the table is not in that responsive state.This is both more performant when rendering large quantities of cells/content, and simpler to write test assertions for when comparing what the user actually sees vs. what the DOM ‘sees’. (c3eeb08441e4b6efe6505e7cddaa87b540ddb259, 78cefcd954a7b46eaccd05e431b5e24dc86071a3)
Removed direct usages of table
classNamesEuiTable
classNamesno longer have any styles attached to them, so some instances where Kibana usages were applying theclassNamefor styles have been replaced with direct component usage or removed entirely (86ce80b).Custom table cell styles
Any custom CSS for table cells was previously being applied to the inner
div.euiTableCellContentwrapper. As of this latest release, theclassNameandcssprops will now be applied directly to the outertd.euiTableRowCellelement. If you were targeting custom styles table cells, please re-QA your styles to ensure everything still looks as expected.Full changelog (click to collapse)
v94.1.0-backport.0This is a backport release only intended for use by Kibana.
Bug fixes
EuiTableRowCells with therowheader scope (#7681)Accessibility
EuiBasicTableandEuiInMemoryTable's selection checkboxes to have unique aria-labels per row (#7672)v94.1.0EuiTableHeaderCellto show a subduedsortableicon for columns that are not currently sorted but can be (#7656)EuiBasicTableandEuiInMemoryTable'scolumns[].actions[]'s to pass back click events toonClickcallbacks as the second callback (#7667)v94.0.0EuiTable,EuiBasicTable, andEuiInMemoryTablewith a newresponsiveBreakpointprop, which allows customizing the point at which the table collapses into a mobile-friendly view with cards (#7625)EuiProvider'scomponentDefaultsprop to allow configuringEuiTable.responsiveBreakpoint(#7625)Bug fixes
EuiBasicTable&EuiInMemoryTableisPrimaryactions are now correctly shown on mobile views (#7640)mobileOptions: (#7642)mobileOptions.alignis now respected instead of all cells being forced to left alignmenttextTruncateandtextOnlyare now respected even if arenderfunction is not passedBreaking changes
EuiTableHeaderButtoncomponent (#7621)responsiveprop fromEuiTable,EuiBasicTable, andEuiInMemoryTable. Use the newresponsiveBreakpointprop instead (#7625)EuiBasicTableorEuiInMemoryTablefor responsive table behavior to work correctly, and can be removed: (#7632)isSelectableisExpandablehasActionsshowOnHoverprop fromEuiTableRowCell/EuiBasicTable/EuiInMemoryTable'scolumnsAPI. Use the new actionscolumns[].actions[].showOnHoverAPI instead. (#7640)textOnlyprop fromEuiBasicTableandEuiInMemoryTable. Usecolumns[].textOnlyinstead. (#7642)DOM changes
EuiTablemobile headers no longer render in the DOM when not visible (previously rendered withdisplay: none). This may affect DOM testing assertions. (#7625)EuiTableRowCellnow applies passedclassNames to the parent<td>element, instead of to the inner cell content<div>. (#7631)EuiTableRows rendered by basic and memory tables now only render a.euiTableRow-isSelectableclassName if the selection checkbox is not disabled (#7632)EuiTableRowCells withtextOnlyset tofalsewill no longer attempt to apply the.euiTableCellContent__textclassName to child elements. (#7641)EuiTableRowCellno longer renders mobile headers to the DOM unless the current table is displaying its responsive view. (#7642)EuiTableHeaderCellandEuiTableRowCellwill no longer render in the DOM at all on mobile if their columns'mobileOptions.showis set tofalse. (#7642)EuiTableHeaderCellandEuiTableRowCellwill no longer render in the DOM at all on desktop if their columns'mobileOptions.onlyis set totrue. (#7642)CSS-in-JS conversions
EuiTable,EuiTableRow,EuiTableRowCell, and all other table subcomponents to Emotion (#7654)EuiTableSass variables: (#7654)$euiTableCellContentPadding$euiTableCellContentPaddingCompressed$euiTableCellCheckboxWidth$euiTableHoverColor$euiTableSelectedColor$euiTableHoverSelectedColor$euiTableActionsBorderColor$euiTableHoverClickableColor$euiTableFocusClickableColorEuiTableSass mixins: (#7654)euiTableActionsBackgroundMobileeuiTableCellCheckboxeuiTableCell