You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Unfortunately, #161914 regressed #162365 in that many plugins and their Emotion styles (including EUI emotion styles) are now missing a cache and are being appended to to the end of the document <head> as opposed to within <meta name="emotion">.
What appears to be happening is many plugins are using a parent <KibanaThemeProvider> but not a parent <KibanaRootContextProvider> (not sure if this work is TBD or in progress). This means that a parent <EuiProvider>, (which determines the cache insertion of child Emotion styled components) is missing, which is causing several CSS specificity bugs, e.g. around datagrid.
As a somewhat-bandaid-y fix, I've bogarted EUI's nested provider context to check if the theme provider has a parent EuiProvider, and if it doesn't, to use KibanaEuiProvider instead of KibanaThemeProvider. This should set up the caches and context if needed, or otherwise simply use the original KibanaThemeProvider component.
FYI
If you see an error like this, in console dev tools, that means an Emotion cache somewhere is improperly set up. All of EUI's and Kibana's default caches should have .compat = true set, which silences these errors.
QA
Previous/broken behavior
In your browser devtools inspector, open the document <head>
Under <meta name="emotion">, you'll only see a couple hundred style nodes:
If you scroll to the bottom of <head>, you should see a lot of <style data-emotion="css"> nodes:
Fixed behavior in this PR
In your browser devtools inspector, open the document <head>
Under <meta name="emotion">, you should now see well over thousands of styles
You should no longer see many <style data-emotion="css"> with EUI styles at the end of the head (there's a lot of <script> tags instead). There's still a few, but they appear to not be EUI styles (e.g. it's a plugin's random Emotion styles that they're using without a cache set up).
I think we can combine these changes with some of mine from #163137. I think I prefer to detect and handle it internally as you do here... it certainly makes it easier than making the i18n contract optional.
clintandrewhall
changed the title
Check for KibanaThemeProviders missing a parent KibanaEuiProvider
[regression] Handle deprecated KibanaThemeProvider uses to include KibanaRenderContextProvider
Aug 4, 2023
Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.
Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
cee-chen
added
release_note:skip
clintandrewhall
changed the title
Summary
Unfortunately, #161914 regressed #162365 in that many plugins and their Emotion styles (including EUI emotion styles) are now missing a cache and are being appended to to the end of the document
<head>as opposed to within<meta name="emotion">.What appears to be happening is many plugins are using a parent
<KibanaThemeProvider>but not a parent<KibanaRootContextProvider>(not sure if this work is TBD or in progress). This means that a parent<EuiProvider>, (which determines the cache insertion of child Emotion styled components) is missing, which is causing several CSS specificity bugs, e.g. around datagrid.As a somewhat-bandaid-y fix, I've bogarted EUI's nested provider context to check if the theme provider has a parent
EuiProvider, and if it doesn't, to useKibanaEuiProviderinstead ofKibanaThemeProvider. This should set up the caches and context if needed, or otherwise simply use the originalKibanaThemeProvidercomponent.FYI
If you see an error like this, in console dev tools, that means an Emotion cache somewhere is improperly set up. All of EUI's and Kibana's default caches should have
.compat = trueset, which silences these errors.QA
Previous/broken behavior
<head><meta name="emotion">, you'll only see a couple hundred style nodes:<head>, you should see a lot of<style data-emotion="css">nodes:Fixed behavior in this PR
<head><meta name="emotion">, you should now see well over thousands of styles<style data-emotion="css">with EUI styles at the end of the head (there's a lot of<script>tags instead). There's still a few, but they appear to not be EUI styles (e.g. it's a plugin's random Emotion styles that they're using without a cache set up).