-
Notifications
You must be signed in to change notification settings - Fork 834
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
EUI Panels have a white background and EUI Callouts have no background color in Kibana 8.x "Dark Mode". #6243
Comments
Hi @btychon, The The class name you mentioned in a correct implementation would be applied for the callout title:
So it seems that is something wrong with your implementation. If you test the EuiCallout in dark mode they're working. And you can see a background color being applied: .css-d5yzab-euiPanel-none-m-primary-euiCallOut {
-webkit-box-flex: 0;
flex-grow: 0;
padding: 16px;
background-color: rgb(11, 32, 48);
} |
When I add vanilla callouts inside and outside of the EuiPageContent they render in Light Mode. I'm not sure why I was getting a transparent background yesterday in the callout because I can't reproduce it any more in our plugin or the boilerplate... strange one. This is how callouts used to look in Dark Mode. |
It's difficult to tell what's the issue. It seems that for some reason your plugin is not inheriting properly the In ELK 8.4.1 the EUI version is 60.30.0 and I tried to replicate your code in a CodeSandbox and the callouts inside and outside of the EuiPageContent are getting the right colors: Notice that in the CodeSandbox index.js the So I'm closing this issue because it seems that there is something wrong with the implementation and I can't replicate it. In case you can replicate your issue with a CodeSandbox, we can reopen the issue. |
Thanks for that sandbox link! That rules out a lot. |
Components such the EUI Card are derivatives of an "EUI Panel" and panels do not properly adapt when Kibana is switched to Dark Mode. We're developing a Kibana Plugin and the UI became unusable when we upgraded from 7.14.3 to 8.4.1.
New CSS class names are observed on the Panel DIV's such as css-1mfocz8-euiPanel-grow-m-m-plain-hasShadow-isClickable. It appears to be a consequence of migrating EUI away from SASS to CSS-in-JS.
EUI Callouts in ELK 7.14.3 have a class euiCallOut--primary which puts a dark blue background color on the DIV in Dark Mode. In 8.4.1 the static class name was replaced with a dynamic one, css-1mwxeb8-euiTitle-xxs-euiCallOutHeader-primary , and it contains no background color (making it transparent).
There are similar problems with form controls. I won't go into every issue but wanted to bring it to someone's attention EUI's behavior changed when changing themes.
The text was updated successfully, but these errors were encountered: