Initial mock: #5080 (comment)

@constancecchen Showcased the state of this configuration in our weekly where we talked about trying to combine this setting with the density setting as to not overload the toolbar with individual options. Here's a mock/prototype for how we could achieve this. I also updated the language and the "toggle" portion for this to be a bit more clear to the user what is going to happen.

https://www.figma.com/proto/RzfYLj2xmH9K7gQtbSKygn/Elastic-UI?page-id=15895%3A196207&node-id=21744%3A266749&viewport=323%2C48%2C0.79&scaling=min-zoom&starting-point-node-id=21744%3A266749

Static:

PR implementation, with caution from Dave that this will break some custom CSS/positioning by the Security and Obs teams: #5334 (comment)

Just a note to make sure you all communicate with the Security and Observability UI teams (@andrew-goldstein and @weltenwort would be a start). I have a feeling the new positioning will break some of their overwrites (specifically I know they abs position some items into that top right corner). This should give them better guidance for how to position those controls (by using the additional props) they need to add. Not a breaking change the way I see it delivered in EUI, but it will break in Kibana based upon some of their usage.

API proposal from @cchaos: #5334 (comment)

The ideal solution is just making the additionalControls more customizable by position. My suggestion is to convert this prop to either accept a ReactNode as it does now that defaults to the position of middleLeft or an object of ReactNodes with position-named keys like left, middleLeft, middleRight, right. (I'm still workshopping these names).

API proposal from @constancecchen: #5334 (comment)

I do think it's worth maybe exploring toolbar API and the way we let users configure it even more. For example, what if we allowed complete control over not just where their custom content goes but also what order they put the sort/column controls in? e.g.,

toolbarConfiguration = {
  leftToolbar: [
    someCustomContent,
    showSortSelector,
    someOtherCustomContent,
    showColumnSelector,
  ],
  rightToolbar: [
    showDisplayConfig,
    someCustomContent,
    showFullscreen,
  ],
}

... and that kills 2 birds with 1 stone in terms of both custom locations and enabling/disabling certain controls? (although, that makes it a little odd if you put the icon-only fullscreen button in the left side next to the buttons with text - this is me just thinking out loud, so likely needs more fleshing out)