[EuiDataGrid] Add extra left prepend position to the additionalControls API

[cee-chen]

Summary

Per Caroline's comment here, the Discover team requires the being able to put additional controls to the left of our columns/sort selectors:

This PR splits up the left position key an object allowing left.append and left.prepend. Single nodes passed in instead of an object of positions will default to left.append.

New documentation example:

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

This is a breaking API change, but is being merged into a feature branch.

- [ ] 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_5394/

[kibanamachine]

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

[cchaos]

Quick clarification from the docs:

Use the toolbarVisibility.additionalControls prop to pass more buttons to the toolbar. It will respect the toolbarVisibility={false} setting and hide when appropriate.

Would that even be possible? Since additionalControls is nested within toolbarVisibility you cant have toolbarVisibility = {false & additionalControls: {}}.

---

The component work LGTM, my comments mostly revolve around the docs:

I'd change the sentence:

Passing a single node to additionalControls will default to being appended to the left side of the toolbar.

to:

Passing a single node to additionalControls will default to being placed in the left.append position of the toolbar.

Edit: I didn't read the 'appended' portion of the sentence. I've adjusted my suggestion.

---

It also might be helpful to add into the window.alert which configuration was used to place that control.

[cee-chen]

Use the toolbarVisibility.additionalControls prop to pass more buttons to the toolbar. It will respect the toolbarVisibility={false} setting and hide when appropriate.

Would that even be possible? Since additionalControls is nested within toolbarVisibility you cant have toolbarVisibility = {false & additionalControls: {}}.

Yeah, it does seem like a no brainer since there's no way to define additionalControls if toolbarVisibility is set to false. I can remove that line if you think it's not particularly helpful!

[cee-chen]

Feedback should be addressed in latest commit!

[kibanamachine]

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

[cchaos]

👍 Design and design code LGTM. Checked in Safari and Firefox too.