remove z-index on ActionBar

[kendallgassner]

A z-index was added to the action bar component in the following pr (#6759)

It looks like they added the z-index to make it work for the panel component but after removing the z-index and testing on storybook it looks like the z-index is not needed.

In my own code base I am using the doc's preview component to add my story examples in my documentation. When I am using the preview component to render a modal the actions bar appears above my modal. (due to the z-index)

^ you can see it appears above my background as well as on my modal.

Because the z-index is not necessary and will be a problem when working with popups I am proposing to remove it.

[shilman]

@ndelangen @domyen can one of you take a look

[ndelangen]

I can't guarantee this won't be added back in the future if it turns out it's required for storybook to work properly..

We can remove it now, since it's not needed, thanks for checking & the PR! 👏

Just a bit of advice (do with it as you wish):
Modals should probably be using some sort of "React Portal" to ensure they escape the z-index of their trigger-parent..

[kendallgassner]

@ndelangen I dont think react-portal does anything to escape z-indexes? I believe it just attaches the portal div to the end of the body.
(react-portal)

[ndelangen]

@kendallgassner the fact you're rendering in the body means you're escaping all rendering stacks of the parent elements.

[domyen]

I found a bug in the Actions addon where I can't click on the ActionBar without the z-index. This is probably why we added the z-index in the first place.

Video here

@ndelangen can we revert this?

[ndelangen]

PR open @domyen

[RichardVoyles09]

This is awesome