github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[regression] Fix Storybooks after #161914 (#162757)

Browse source 
## Summary

As titled. This PR corrects a pair of mistakes I made before committing
#161914 that @dgieselaar identified shortly thereafter.

- I had tested Storybook extensively, but after I rebased, I changed the
render context, and I forgot to update the `decorator` in Storybook.
This meant Emotion styles worked, but the EUI styles were missing.
- In addition, when I rebased, I missed the addition of the utils cache
that had been added by EUI.
- Interestingly, #162365 missed adding the cache `meta` tag to the
template. Emotion simply added the styles to the `head`, but it's best
to reproduce what we see in Kibana. So I've corrected that, as well.
- While creating the PR, I went ahead and addressed
[feedback](https://github.com/elastic/kibana/pull/161914#discussion_r1277765276)
from @cee-chen on the original PR./

Sorry if anyone was confused by the sudden drop in styles in their
Storybooks. Should be resolved now. Thanks!

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Clint Andrew Hall 2023-07-31 16:51:28 +02:00 • committed by GitHub
parent 90a882399a
commit 832aec0a8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/kbn-storybook/src/lib/decorators.tsx
View file

@ -14,7 +14,7 @@ import 'core_styles';
import { BehaviorSubject } from 'rxjs';
import { CoreTheme } from '@kbn/core-theme-browser';
import { I18nStart } from '@kbn/core-i18n-browser';
import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root';
const theme$ = new BehaviorSubject<CoreTheme>({ darkMode: false });
@ -34,9 +34,9 @@ const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => {
}, [colorMode]);
return (
<KibanaRenderContextProvider {...{ theme: { theme$ }, i18n }}>
<KibanaRootContextProvider {...{ theme: { theme$ }, i18n }}>
{storyFn()}
</KibanaRenderContextProvider>
</KibanaRootContextProvider>
);
};

106
packages/kbn-storybook/templates/index.ejs
View file

@ -4,64 +4,74 @@
We use this one instead because we want to add the @kbn/ui-shared-deps-* tags here.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title || 'Storybook'%></title>
<% if (htmlWebpackPlugin.files.favicon) { %>
<head>
<meta charset="utf-8" />
<title>
<%= htmlWebpackPlugin.options.title || 'Storybook' %>
</title>
<% if (htmlWebpackPlugin.files.favicon) { %>
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon%>" />
<% } %>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="eui-global" />
<meta name="emotion" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Added for Kibana shared dependencies -->
<script>
window.__kbnPublicPath__ = { 'kbn-ui-shared-deps-npm': '', 'kbn-ui-shared-deps-src': '' };
</script>
<script src="kbn-ui-shared-deps-npm.dll.js"></script>
<script src="kbn-ui-shared-deps-src.js"></script>
<link href="kbn-ui-shared-deps-src.css" rel="stylesheet" />
<link id="eui-theme-css" href="kbn-ui-shared-deps-npm.v8.light.css" rel="stylesheet" />
<!-- -->
<meta name="eui-global" />
<meta name="eui-utilities" />
<meta name="emotion" />
<% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
htmlWebpackPlugin.files.css.forEach(file => { %>
<link href="<%= file %>" rel="stylesheet" />
<% }); %>
<style>
#root[hidden],
#docs-root[hidden] {
display: none !important;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
</head>
<body>
<% if (typeof bodyHtmlSnippet !== 'undefined') { %>
<%= bodyHtmlSnippet %>
<% } %>
<div id="root"></div>
<div id="docs-root"></div>
<% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
<!-- Added for Kibana shared dependencies -->
<script>
window.__kbnPublicPath__ = { 'kbn-ui-shared-deps-npm': '', 'kbn-ui-shared-deps-src': '' };
</script>
<script src="kbn-ui-shared-deps-npm.dll.js"></script>
<script src="kbn-ui-shared-deps-src.js"></script>
<link href="kbn-ui-shared-deps-src.css" rel="stylesheet" />
<link id="eui-theme-css" href="kbn-ui-shared-deps-npm.v8.light.css" rel="stylesheet" />
<!-- -->
<% if (typeof headHtmlSnippet !=='undefined' ) { %>
<%= headHtmlSnippet %>
<% } %>
<% htmlWebpackPlugin.files.css.forEach(file=> { %>
<link href="<%= file %>" rel="stylesheet" />
<% }); %>
<style>
#root[hidden],
#docs-root[hidden] {
display: none !important;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap"
rel="stylesheet">
</head>
<body>
<% if (typeof bodyHtmlSnippet !=='undefined' ) { %>
<%= bodyHtmlSnippet %>
<% } %>
<div id="root"></div>
<div id="docs-root"></div>
<% if (typeof globals !=='undefined' && Object.keys(globals).length) { %>
<script>
<% for (var varName in globals) { %>
<% if (globals[varName] != undefined) { %>
window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
<% } %>
<% } %>
</script>
<% } %>
</script>
<% } %>
<% htmlWebpackPlugin.files.js.forEach(file=> { %>
<script src="<%= file %>"></script>
<% }); %>
</body>
<% htmlWebpackPlugin.files.js.forEach(file => { %>
<script src="<%= file %>"></script>
<% }); %>
</body>
</html>

2
packages/kbn-storybook/tsconfig.json
View file

@ -19,7 +19,7 @@
"@kbn/core-theme-browser",
"@kbn/i18n-react",
"@kbn/core-i18n-browser",
"@kbn/react-kibana-context-render",
"@kbn/react-kibana-context-root",
],
"exclude": [
"target/**/*",

2
packages/react/kibana_context/styled/README.mdx
View file

@ -13,3 +13,5 @@ Before `emotion` was introduced, some components used `styled-components` to eas
It should _not_ be used in new code.
**NOTE:** plugins cannot use `styled-components` and `emotion` at the same time, their Babel plugins conflict. The EUI team has fielded many questions about this. The best solution is to migrate to `emotion` and not use `styled-components`.