Skip to content

[EuiDataGrid] Vertically center toolbar additionalControls items#8085

Merged
cee-chen merged 2 commits intoelastic:mainfrom
janmonschke:dataGrid-misaligned-toolbar
Oct 18, 2024
Merged

[EuiDataGrid] Vertically center toolbar additionalControls items#8085
cee-chen merged 2 commits intoelastic:mainfrom
janmonschke:dataGrid-misaligned-toolbar

Conversation

@janmonschke
Copy link
Contributor

@janmonschke janmonschke commented Oct 18, 2024 •
edited
Loading

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:

Screenshot 2024-10-18 at 09 47 53

Alerts table after:

Screenshot 2024-10-18 at 09 47 14

TODO:

@janmonschke janmonschke requested a review from a team as a code owner October 18, 2024 08:12
@janmonschke janmonschke mentioned this pull request Oct 18, 2024
Merged
@janmonschke janmonschke added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Oct 18, 2024
@cee-chen
Copy link
Contributor

cee-chen commented Oct 18, 2024 •
edited
Loading

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 cee-chen removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Oct 18, 2024
cee-chen
cee-chen approved these changes Oct 18, 2024
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🫶 Thank you for this contribution to EUI Jan! It's super appreciated!

@cee-chen cee-chen enabled auto-merge (squash) October 18, 2024 16:00
@cee-chen cee-chen disabled auto-merge October 18, 2024 16:00
@cee-chen cee-chen changed the title [DataGrid] Vertically center toolbar items [EuiDataGrid] Vertically center toolbar additionalControls items Oct 18, 2024
@cee-chen cee-chen enabled auto-merge (squash) October 18, 2024 16:01
@kibanamachine
Copy link

kibanamachine commented Oct 18, 2024

Preview staging links for this PR:

@cee-chen cee-chen merged commit 86a1f4b into elastic:main Oct 18, 2024
@elasticmachine
Copy link
Collaborator

elasticmachine commented Oct 18, 2024

💚 Build Succeeded

History

@janmonschke
Copy link
Contributor Author

janmonschke commented Oct 18, 2024

@cee-chen thanks for adding the changelog and reviewing this PR so swiftly :)

@janmonschke
Copy link
Contributor Author

janmonschke commented Oct 18, 2024

@cee-chen Is there an epic or sth similar that I could follow to get notified about the next EUI release?

@cee-chen
Copy link
Contributor

cee-chen commented Oct 18, 2024

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
@janmonschke @elasticmachine
[SecuritySolutuion] Fix misaligned toolbar in alerts table (#196804)
082a897 
## 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
@janmonschke @elasticmachine
[SecuritySolutuion] Fix misaligned toolbar in alerts table (elastic#1…
800e21b 
…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
@janmonschke @elasticmachine
[SecuritySolutuion] Fix misaligned toolbar in alerts table (elastic#1…
29cdbe6 
…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 cee-chen mentioned this pull request Oct 28, 2024
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request Oct 31, 2024
@cee-chen
Upgrade EUI to v97.3.0 (#198087)
4e7d43a 
`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
@cee-chen
Upgrade EUI to v97.3.0 (elastic#198087)
91a9360 
`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

Reviewers

1 more reviewer

@cee-chen cee-chen cee-chen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

data grid

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@janmonschke @cee-chen @kibanamachine @elasticmachine