[EuiDataGrid] Fix header actions button causing cell height changes

[mgadewoll]

Summary

This PR fixes an issue that was introducede with this previously merged PR that updated EuiDataGrid header cells to support interactive content. As part of that PR the size of the actions button was increased via padding to satisfy the min. target size accessibility requirements.

This causes the header cells to increase in height when the actions button is visible on hover/focus for small cell fontSize/lineHeight settings.

Changes

• adds negative margin for the action button that is equivalent the added padding to ensure the button still uses the same vertical space

Screenshots

issue

Screen.Recording.2024-09-04.at.12.39.24.mov

fixed

Screen.Recording.2024-09-04.at.12.38.30.mov

QA

• ensure the header cell does not increase in size when the action button is visible for a small fontSize/lineHeight variant
  • open the datagrid playground story
  • change the gridStyle prop:
    • change fontSize to "s"
    • add the key "lineHeight" and set its value to "1.6em" (1.6em is the value used on Kibana)

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[cee-chen]

🚀 Super speedy one-liner fix!

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 0fd7273

History

• 💚 Build #2685 succeeded cc4cd8f