[EuiDataGrid] Add onChange callbacks for display selector changes

[cee-chen]

Summary

Per feedback from Caroline and Vlad, we should expose internal gridStyle and rowHeightsOptions state in an onChange callback:

In the future, we should provide a grid example that manually adjusts its content based on the selected display size. Does that display selector have a callback function that consumers can use?
(From Caroline)

I had some thought about height switcher, what we can do if devs will need current state of rowHeightsOptions to store it in something like saved object.
(From Vlad)

After discussion with @chandlerprall, the API we settled on was adding these callbacks in gridStyle.onChange and rowHeightsOptions.onChange.

Screencaps

snapshot.mp4

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox

• Props have proper autodocs and playground toggles
• Added documentation

- [ ] Checked Code Sandbox works for any docs examples

• Added or updated jest and cypress tests

- [ ] Checked for breaking changes and labeled appropriately
- [ ] Checked for accessibility including keyboard-only and screenreader modes

• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5424/

[cee-chen]

OK, I updated this PR to use a new onUpdateEffect helper (fires on update only, not mount). I ended up force pushing because the code was so different, sorry about that - I recommend re-following along by commit. Quick TL;DR of changes:

• Callbacks are now invoked in an effect and not manually in each state update, which is much more DRY and feels much more React-y
• Removed passing the onChange function back into the callbacks (inception BWAAM)
• I removed the misc HTML cleanup commit since I opened up a separate PR for that ([Docs only] Remove HTML sources #5429)
• I removed the extra callbacks arg I was passing into useDataGridDisplaySelector - I have no idea why I thought that was necessary when I was already passing in gridStyles and rowHeightsOptions 🤦‍♀️
• Documentation example remained functionally the same with some minor cleanup - I stopped saving the returned objs in state since that didn't work well when combined with [EuiDataGrid] Row height switcher should override rowHeights + add reset button #5428's reset button, and added a console.log for easier debugging

Overall this feels much cleaner than before! I also tested this rebased against #5248 and the onChange callbacks are correctly invoked when the reset button is pressed without any extra code 🎉 The merges will have very minor conflicts as well, so either PR can land first without significant issue

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5424/

[miukimiu]

Thanks, @constancecchen. It looks great!

I tested the example code and it works well. The reset button from #5428 now makes even more sense. 👍🏽

Just one small detail. Is it possible to improve the example to also preserve the display settings when the page changes?

Screen.Recording.2021-12-02.at.01.20.PM.mov

[cee-chen]

Oh super interesting, thanks Elizabet, I hadn't tried navigating away. Yes, it's possible, I need to change where I instantiate the localStorage.getItem call into the component itself. I'll do that here shortly.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5424/

[chandlerprall]

Code changes LGTM, tests are great! Tested locally & in the preview docs.

[cee-chen]

Thanks y'all!