Bug with context menu in bottom bar on light mode

[brittanyjoiner15]

Found a workaround for this so don't need it fixed just for us, but wanted to point out in case it was a problem for others.

When a user is in light mode, the items on EuiContextMenu in the EuiBottomBar appear hidden.

Example from our app:

I was able to reproduce in this CodeSandBox

[elizabetdev]

Hi @brittanyjoiner15,

It seems that this issue is related to the conversion of the EuiBottomBar to Emotion (#5823). The component is now wrapped in a EuiThemeProvider with the colorMode set to "dark".

The EuiPanel from the popover that was also converted to Emotion gets the color from the EuiThemeProvider.

So you can wrap the EuiPopover with a EuiThemeProvider with the colorMode set to "light" (See this CodeSandbox).

In the future, all the components should inherit the EuiThemeProvider colorMode but right now the EuiPopover and the EuiContextMenu are not converted to Emotion. That's why only the panel gets the right colorMode.

[brittanyjoiner15]

@miukimiu thanks for the response! that makes sense - i figured it was something to do with Bottom Bar really wanting to be dark mode and the elements inside of it getting confused 😂 Thanks for clearing that up!

[elizabetdev]

Closing this issue. It will be solved once we finish all the Emotion conversions (#5685). 😄