[EuiDataGrid] Display selector / toolbar control enhancements

[cee-chen]

Summary

This PR adds 3 separate enhancements (listed with screenshots below). As always, I strongly recommend following along by commit, as I tried to split out several code refactors out to make following the actual new features easier.

---

Redesigned row height form controls (https://github.com/elastic/eui/pull/8080/commits/493e2e0fa4820f0e391fbc13b95b866726db2341)

Per @MichaelMarcialis's designs in https://github.com/elastic/eui/issues/7835#issuecomment-2197604786 (although these changes do not close the issue,

Single/Default	Custom lineCount	Auto fit

---

Completely custom control over rendering the display selector (https://github.com/elastic/eui/pull/8080/commits/92bc73e7d52377bf5c6819348a61acc8359b4304, https://github.com/elastic/eui/pull/8080/commits/81b5e25d3e2ac16e02969696f81bdba84018fa3d) (closes #7951)

Consumers can now pass a toolbarVisibility.showDisplaySelector.customRender render prop/function that passes back the default density/row height/reset button as optional nodes to render. This allows consumers to reorder and otherwise completely customize the display selector.

const customDisplaySelectorRender = ({ densityControl }) => (
  <div>Custom display selector {densityControl}</div>
);

<EuiDataGrid
  // ... required props
  toolbarVisibility={{
    showDisplaySelector: {
      customRender: customDisplaySelectorRender
    }
  }}
/>

---

gridStyle updates after users have changed grid styles via the display selector (https://github.com/elastic/eui/pull/8080/commits/9cf4a4da1ff44c293053cb4115ccaade6820ee5b) (closes #7962)

Previously, EuiDataGrid would always defer to the user's row height/density selection from the display selector controls, and if consumers tried to pass in new gridStyle updates after, or control them from an external button, those updates would be ignored.

You can reproduce this on production by changing the density in the toolbar display selector and then trying to change fontSize or cellPadding in the Storybook controls - nothing happens at that point.

This PR changes this behavior so that new gridStyle updates are reflected in the datagrid (see QA steps below).

QA

• New row height UI should be testable on any datagrid:
  • https://eui.elastic.co/pr_8080/#/tabular-content/data-grid
• Custom render testing:
  • https://eui.elastic.co/pr_8080/#/tabular-content/data-grid-toolbar#completely-custom-toolbar-rendering
• gridStyles updates should be testable on Storybook:
  • Go to https://eui.elastic.co/pr_8080/storybook/?path=/story/tabular-content-euidatagrid-gridstyle-prop--playground&args=fontSize:s
  • Go to the display selector in the toolbar and change, e.g. density to Expanded
  • [ ] In the Storybook controls, change fontSize to s and confirm that the datagrid correctly updates to this setting

General checklist

• Browser QA ~- [ ] Checked in both light and dark modes~ ~- [ ] Checked in mobile~
  • [x] Checked in Chrome, Safari, Edge, and Firefox
  • [x] Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA ~- [ ] Added documentation~
  • [x] 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
  • [x] Added or updated jest ~and cypress tests~
  • [x] Updated visual regression tests
• Release checklist
  • [x] 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)

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8080/
• Storybook: https://eui.elastic.co/pr_8080/storybook
• New docs: https://eui.elastic.co/pr_8080/new-docs

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 508d0f1e5e6bfed310d23c310238a99ef04bbaec

History

• :green_heart: Build #2904 succeeded 04b8c021ccff636b0b1053803f933dd64e75a387
• :broken_heart: Build #2903 failed 493e2e0fa4820f0e391fbc13b95b866726db2341