EuiBottomBar needs a container prop similar to EuiPopover

[cchaos]

.. to restrict it's bounds to or to sit inside of.

We can't yet use the EuiBottomBar in Kibana because it's always portaled and sits on top of the nav drawer and any flyouts.

[cjcenizal]

Per discussion with @joshdover, to use EuiBottomBar in Kibana currently requires tracking the side nav collapsed state and applying custom styles to the bottom bar instance to resize it. This solution is brittle because sizes will be hardcoded, and ad hoc because it will need to be reimplemented in each app that uses this component.

I think there should be a core-level solution in Kibana so people don't need to reimplement this brittle ad hoc solution. Maybe this could be a global service like toasts, or it could be a utility component that consumers can instantiate, e.g. <KibanaControlBar core={core} /> (Josh's idea)?

[snide]

This reminded me of something similar we had to do with Flyouts awhile ago. The answer was mostly to just use css overwrites, which as @cjcenizal correctly mentions is fairly brittle. All that said, they generally have stood up fairly well over time, and it's probably OK for the short term in y'all are blocked. I know we all want something better, but it surprisingly has been pretty resilient since its introduction sometime in the late 6.x range. Likely there's something you can do with sibling selectors to make something similar depending upon the selectors applied.

https://github.com/elastic/kibana/blob/master/src/core/public/chrome/ui/header/_index.scss#L11-L21

[cchaos]

Closing this issue as we'll be deprecating EuiBottomBar for EuiControlBar and with the replacement of EuiNavdrawer with EuiCollapsibleNav, this request is outdated.