[EuiDataGrid] Add several new footer/header customization APIs + bonus cleanup #6609
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
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6609/ |
cee-chen
force-pushed
the
datagrid/header-footer-cells
branch
2 times, most recently
from
f05754b to
1ffe218
Compare
- for better organization/architecture
+ fix footer control columns rendering with `isExpandable` true as a default - should not be true + adds docs, fix broken amount total + reorder types slightly
cee-chen
force-pushed
the
datagrid/header-footer-cells
branch
from
1ffe218 to
0e1ec69
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6609/ |
- this commit isn't specifically needed by this PR, but *will* be needed once we implement a custom body renderer
cee-chen
force-pushed
the
datagrid/header-footer-cells
branch
from
0e1ec69 to
ea6b1d3
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6609/ |
JasonStoltz
approved these changes
Feb 23, 2023
There was a problem hiding this comment.
Hey @cee-chen, this PR LGTM. I don't see anything that gives me pause. The additional additional prop props seem simple enough, the footerCellRender follows the same pattern as headerCellRender, and the refactor seems to be under tests.
| }; | ||
|
|
||
| /** | ||
| * DRY out setting up the grid footer and its refs & observers |
There was a problem hiding this comment.
Just wondering about this comment. Is this a TODO, or is this the reasoning behind why you created this hook? ... i.e., it DRYs out the setup of the grid footer.
There was a problem hiding this comment.
It'll be used in the next PR when a custom grid renderer is added. Both the custom renderer and the default virtualization renderer will need the same data grid header and footer, so this DRYs it out. I could have added that commit in the next PR, but I figured I might as well do it while here/touching footer & header things
|
Thanks Jason! Hope your first foray into the fun world of data grid wasn't too bad :) |
jbudz
added a commit
to elastic/kibana
that referenced
this pull request
Mar 14, 2023
👋 Hi all - the biggest breaking change of this PR is around two icon type changes/renames. 1.⚠️ **The `alert` icon is now named `warning`** - <img width="103" alt="" src="https://user-images.githubusercontent.com/549407/223561599-8913e88c-676f-47cd-aaed-81b64783bd81.png" align="middle"> - This change should have been automatically converted on your behalf by the EUI team, **but if for some reason** we missed making this conversion in this PR and your icon(s) are now broken, please ping us or let us know in this PR (or fix yourself after this PR merges). - In some cases, teams were using this icon for error messages, alongside the `danger` color. In those cases, we opinionatedly changed those icon usages to the new `error` icon instead of using the old alert/warning icon. 2. 🛑 **The `crossInACircleFilled` icon has been removed, and a new `error` icon added** - <img width="84" alt="" src="https://user-images.githubusercontent.com/549407/223561892-4406bdf6-1a55-49ac-85ad-3a11eb7c090d.png" align="middle"> - The conversion for this breaking change was not straightforward. This was the path we used to determine what to change `crossInACircleFilled` usages to: - If the icon was associated with errors or error messages, we changed it to the new `error` icon. - If a "delete" action was associated with this icon, we changed it to the `trash` icon instead. - If a "clear" action was associated with this icon, we changed it to just the `cross` icon, or in some cases `minusInCircleFilled` (if used alongside `plusInCircleFilled`). - Again, if we made a mistake during this conversion or missed your plugin, please feel free to ping us. ## Summary `eui@75.1.2` ⏩ `eui@76.0.2` ## [`76.0.2`](https://github.com/elastic/eui/tree/v76.0.2) **Bug fixes** - Added a legacy `alert` alias for the `warning` `EuiIcon` type ([#6640](elastic/eui#6640)) ## [`76.0.1`](https://github.com/elastic/eui/tree/v76.0.1) **Bug fixes** - Fixed broken icons on all `isInvalid` form controls ([#6629](elastic/eui#6629)) ## [`76.0.0`](https://github.com/elastic/eui/tree/v76.0.0) - Added `pivot` glyph to `EuiIcon` ([#6605](elastic/eui#6605)) - Added the `displayHeaderCellProps` API to `EuiDataGrid`'s columns, which allows passing custom props directly to column header cells ([#6609](elastic/eui#6609)) - Added the new `headerCellProps`/`footerCellProps` APIs to `EuiDataGrid`'s control columns, which allows passing custom props directly to control column header or footer cells ([#6609](elastic/eui#6609)) - Added a new `footerCellRender` API to `EuiDataGrid`'s control columns, which allows completely customizing control column rendering (previously rendered an empty cell) ([#6609](elastic/eui#6609)) - Updated the styling of nested ordered lists in `EuiText` to align with GitHub's list style, which is a popular format used in Markdown or MDX formatting ([#6615](elastic/eui#6615)) - Added a margin-bottom property exclusively to the direct child `ul` and `ol` elements of the `EuiText` component ([#6615](elastic/eui#6615)) - Fix issue with badges appearing within an `EuiBadgeGroup`, where the CSS rule to override the `margin-inline-start` was not being applied correctly due to the order of appearance in the CSS rules ([#6618](elastic/eui#6618)) **Bug fixes** - Fixed `EuiDataGrid` footer control columns rendering with cell expansion popovers when they should not have been ([#6609](elastic/eui#6609)) - Fixed an `EuiSkipLink` bug where main content loading in progressively/dynamically after the skip link rendered was not being correctly focused ([#6613](elastic/eui#6613)) **Breaking changes** - Renamed `EuiIcon`'s `alert` to `warning` ([#6608](elastic/eui#6608)) - Removed `EuiIcon`'s `crossInACircleFilled` in favor of `error` ([#6608](elastic/eui#6608)) --------- Co-authored-by: Davey Holler <daveyholler@hey.com> Co-authored-by: Constance Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co>
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
This PR is a setup PR with functionality needed for #6523, and also incidentally closes #5106.
In line with our overarching goal of allowing consumers to control/customize our EuiDataGrid body more, we also need to make our header/footer rows more customizable as well to match several requested use-cases.
I strongly recommend following along by commit - I tried to include as much context in my commit messages as possible.
QA
footerCellRenderEuiCheckbox rendersGeneral checklist
@defaultif default values are missing)and playground togglescellPropsAPIs, but added new documentation for thefooterCellRenderAPIand cypress tests- [ ] Checked in both light and dark modes- [ ] Checked in mobile- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Updated the Figma library counterpart