[EuiDataGrid] Vertically center toolbar additionalControls items
#8085
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
|
I think my only hesitation is this might affect other data grids in Kibana that have custom toolbar items that prefer top alignment - I'm not sure what those cases might be, but I'm also don't have every Kibana datagrid memorized 😅 I took a quick peek at Discover and Lens and those look like they should be fine, so I'm good with moving forward with this, but we should add a changelog for this to surface it to consumers just in case. I'll add one here shortly |
cee-chen
approved these changes
Oct 18, 2024
cee-chen
changed the title
additionalControls items
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
|
@cee-chen thanks for adding the changelog and reviewing this PR so swiftly :) |
|
@cee-chen Is there an epic or sth similar that I could follow to get notified about the next EUI release? |
|
No epic, but generally EUI changes will reach Kibana in 1-2 weeks. You can peek at the EUI tag in Kibana. We're going to do another release for the currently in-draft PR so it's likely this change will reach Kibana by end of next Friday. |
janmonschke
added a commit
to elastic/kibana
that referenced
this pull request
Oct 21, 2024
## Summary Some items in the alerts table's toolbar were misaligned. This PR adds a quick fix for these misaligned items but the actual fix will hopefully be done in EUI (elastic/eui#8085) Before: <img width="1265" alt="Screenshot 2024-10-18 at 09 47 53" src="https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf"> After: <img width="1274" alt="Screenshot 2024-10-18 at 09 47 14" src="https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a"> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 21, 2024
…96804) ## Summary Some items in the alerts table's toolbar were misaligned. This PR adds a quick fix for these misaligned items but the actual fix will hopefully be done in EUI (elastic/eui#8085) Before: <img width="1265" alt="Screenshot 2024-10-18 at 09 47 53" src="https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf"> After: <img width="1274" alt="Screenshot 2024-10-18 at 09 47 14" src="https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a"> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit 082a897)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 21, 2024
…96804) ## Summary Some items in the alerts table's toolbar were misaligned. This PR adds a quick fix for these misaligned items but the actual fix will hopefully be done in EUI (elastic/eui#8085) Before: <img width="1265" alt="Screenshot 2024-10-18 at 09 47 53" src="https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf"> After: <img width="1274" alt="Screenshot 2024-10-18 at 09 47 14" src="https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a"> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit 082a897)
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Oct 31, 2024
`v97.2.0`⏩`v97.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.3.0`](https://github.com/elastic/eui/releases/v97.3.0) - `EuiDataGrid` now supports a new `toolbarVisibility.showDisplaySelector.customRender` function that allows completely customizing the rendering of the display selector popover ([#8080](elastic/eui#8080)) - `EuiDataGrid`'s row height/lines per row setting has been streamlined in both UI and UX ([#8080](elastic/eui#8080)) - `EuiDataGrid` now accepts consumer-passed display setting updates even after users have changed their display preferences via UI ([#8080](elastic/eui#8080)) - Updated `EuiDataGrid` to vertically center all `toolbarVisibility.additionalControls` nodes ([#8085](elastic/eui#8085)) - Updated `EuiDataGrid` with a beta `rowHeightsOptions.autoBelowLineCount` feature flag ([#8096](elastic/eui#8096)) - Updated `EuiContextMenuPanel` to allow disabling initial focus via `initialFocusedItemIndex={-1}` ([#8101](elastic/eui#8101)) **Bug fixes** - Fixed `EuiComment`'s typing to correctly reflect all accepted props ([#8089](elastic/eui#8089)) - Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s missing input borders ([#8100](elastic/eui#8100))
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 31, 2024
`v97.2.0`⏩`v97.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.3.0`](https://github.com/elastic/eui/releases/v97.3.0) - `EuiDataGrid` now supports a new `toolbarVisibility.showDisplaySelector.customRender` function that allows completely customizing the rendering of the display selector popover ([elastic#8080](elastic/eui#8080)) - `EuiDataGrid`'s row height/lines per row setting has been streamlined in both UI and UX ([elastic#8080](elastic/eui#8080)) - `EuiDataGrid` now accepts consumer-passed display setting updates even after users have changed their display preferences via UI ([elastic#8080](elastic/eui#8080)) - Updated `EuiDataGrid` to vertically center all `toolbarVisibility.additionalControls` nodes ([elastic#8085](elastic/eui#8085)) - Updated `EuiDataGrid` with a beta `rowHeightsOptions.autoBelowLineCount` feature flag ([elastic#8096](elastic/eui#8096)) - Updated `EuiContextMenuPanel` to allow disabling initial focus via `initialFocusedItemIndex={-1}` ([elastic#8101](elastic/eui#8101)) **Bug fixes** - Fixed `EuiComment`'s typing to correctly reflect all accepted props ([elastic#8089](elastic/eui#8089)) - Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s missing input borders ([elastic#8100](elastic/eui#8100)) (cherry picked from commit 4e7d43a)
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
I recently noticed that the alerts table toolbar in security has items that were not vertically centered. I created fixes for that in Kibana but I think the actual fix would be to add
align-items: center;to the actual wrapper classes, hence this PR. [Kibana PR]Alerts table before:
Alerts table after:
TODO: