github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Emotion] Order EUI's CSS utilities after Sass styles (#162365)

Browse source 
## Summary

Follow up to https://github.com/elastic/kibana/pull/161592

Some remaining EUI components that are still in Sass unfortunately need
to respect EUI's global CSS utilities (e.g. `.eui-yScroll`,
`.eui-textTruncate` - [full list
here](https://elastic.github.io/eui/#/utilities/css-utility-classes)).
Creating a separate utilities cache and insertion point should solve the
CSS order/specificity issues.

### Checklist

- [x] Confirm Emotion output order is expected in head (EUI globals, All
Emotion styles, Sass styles, then utilities last)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Cee Chen 2023-07-25 10:37:29 -07:00 • committed by GitHub
parent 06fabab55b
commit ca9b4d0f35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 66 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/core/base/core-base-common/index.ts
View file

@ -8,4 +8,4 @@
export type { PluginOpaqueId, PluginName, DiscoveredPlugin } from './src/plugins';
export { PluginType } from './src/plugins';
export { EUI_STYLES_GLOBAL } from './src/eui';
export { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from './src/eui';

1
packages/core/base/core-base-common/src/eui.ts
View file

@ -7,3 +7,4 @@
*/
export const EUI_STYLES_GLOBAL = 'eui-global';
export const EUI_STYLES_UTILS = 'eui-utilities';

4
packages/core/rendering/core-rendering-server-internal/src/views/template.tsx
View file

@ -8,7 +8,7 @@
import React, { FunctionComponent, createElement } from 'react';
import { EUI_STYLES_GLOBAL } from '@kbn/core-base-common';
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
import { RenderingMetadata } from '../types';
import { Fonts } from './fonts';
import { Styles } from './styles';
@ -59,6 +59,8 @@ export const Template: FunctionComponent<Props> = ({
{/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}
<meta name="add-styles-here" />
<meta name="add-scripts-here" />
{/* Inject EUI CSS utilties after all other styles for CSS specificity */}
<meta name={EUI_STYLES_UTILS} />
</head>
<body>
{createElement('kbn-csp', {

14
packages/core/theme/core-theme-browser-internal/src/core_theme_provider.tsx
View file

@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
import useObservable from 'react-use/lib/useObservable';
import createCache from '@emotion/cache';
import { EuiProvider } from '@elastic/eui';
import { EUI_STYLES_GLOBAL } from '@kbn/core-base-common';
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
import type { CoreTheme } from '@kbn/core-theme-browser';
import { convertCoreTheme } from './convert_core_theme';
@ -25,12 +25,18 @@ interface CoreThemeProviderProps {
}
const globalCache = createCache({
key: 'eui',
key: EUI_STYLES_GLOBAL,
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
});
globalCache.compat = true;
const utilitiesCache = createCache({
key: EUI_STYLES_UTILS,
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
});
utilitiesCache.compat = true;
const emotionCache = createCache({
key: 'css',
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
});
emotionCache.compat = true;
@ -52,7 +58,7 @@ export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({
utilityClasses={includeGlobalStyles}
colorMode={euiTheme.colorMode}
theme={euiTheme.euiThemeSystem}
cache={{ default: emotionCache, global: globalCache }}
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
>
{children}
</EuiProvider>

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

@ -7,6 +7,7 @@
*/
import React from 'react';
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
import { EuiProvider } from '@elastic/eui';
import createCache from '@emotion/cache';
import type { DecoratorFn } from '@storybook/react';
@ -20,17 +21,26 @@ import 'core_styles';
const EuiProviderDecorator: DecoratorFn = (storyFn, { globals }) => {
const colorMode = globals.euiTheme === 'v8.dark' ? 'dark' : 'light';
const globalCache = createCache({
key: 'eui',
container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
key: EUI_STYLES_GLOBAL,
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
});
globalCache.compat = true;
const utilitiesCache = createCache({
key: EUI_STYLES_UTILS,
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
});
utilitiesCache.compat = true;
const emotionCache = createCache({
key: 'css',
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
});
emotionCache.compat = true;
return (
<EuiProvider colorMode={colorMode} cache={{ default: emotionCache, global: globalCache }}>
<EuiProvider
colorMode={colorMode}
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
>
{storyFn()}
</EuiProvider>
);

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

@ -16,6 +16,7 @@
"@kbn/ui-shared-deps-src",
"@kbn/repo-info",
"@kbn/dev-cli-runner",
"@kbn/core-base-common",
],
"exclude": [
"target/**/*",

15
src/plugins/interactive_setup/public/theme/kibana_theme_provider.tsx
View file

@ -14,6 +14,7 @@ import React, { useMemo } from 'react';
import useObservable from 'react-use/lib/useObservable';
import type { Observable } from 'rxjs';
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
import type { CoreTheme } from '@kbn/core/public';
import { getColorMode } from './utils';
@ -28,12 +29,18 @@ const defaultTheme: CoreTheme = {
};
const globalCache = createCache({
key: 'eui',
container: document.querySelector(`meta[name="eui-styles"]`) as HTMLElement,
key: EUI_STYLES_GLOBAL,
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
});
globalCache.compat = true;
const utilitiesCache = createCache({
key: EUI_STYLES_UTILS,
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
});
utilitiesCache.compat = true;
const emotionCache = createCache({
key: 'css',
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
});
emotionCache.compat = true;
@ -46,7 +53,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
return (
<EuiProvider
colorMode={colorMode}
cache={{ default: emotionCache, global: globalCache }}
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
globalStyles={false}
utilityClasses={false}
modify={modify}

1
src/plugins/interactive_setup/tsconfig.json
View file

@ -19,6 +19,7 @@
"@kbn/utils",
"@kbn/core-logging-server-mocks",
"@kbn/core-preboot-server",
"@kbn/core-base-common",
],
"exclude": [
"target/**/*",

15
src/plugins/kibana_react/public/theme/kibana_theme_provider.tsx
View file

@ -11,6 +11,7 @@ import useObservable from 'react-use/lib/useObservable';
import { Observable } from 'rxjs';
import { EuiProvider, EuiProviderProps } from '@elastic/eui';
import createCache from '@emotion/cache';
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
import type { CoreTheme } from '@kbn/core/public';
import { getColorMode } from './utils';
@ -24,12 +25,18 @@ const defaultTheme: CoreTheme = {
};
const globalCache = createCache({
key: 'eui',
container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
key: EUI_STYLES_GLOBAL,
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
});
globalCache.compat = true;
const utilitiesCache = createCache({
key: EUI_STYLES_UTILS,
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
});
utilitiesCache.compat = true;
const emotionCache = createCache({
key: 'css',
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
});
emotionCache.compat = true;
@ -43,7 +50,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
return (
<EuiProvider
colorMode={colorMode}
cache={{ default: emotionCache, global: globalCache }}
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
globalStyles={false}
utilityClasses={false}
modify={modify}

1
src/plugins/kibana_react/tsconfig.json
View file

@ -13,6 +13,7 @@
"@kbn/i18n",
"@kbn/i18n-react",
"@kbn/core-theme-browser",
"@kbn/core-base-common",
],
"exclude": [
"target/**/*",

15
src/plugins/kibana_utils/public/theme/kibana_theme_provider.tsx
View file

@ -13,6 +13,7 @@ import React, { useMemo } from 'react';
import useObservable from 'react-use/lib/useObservable';
import type { Observable } from 'rxjs';
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
import type { CoreTheme } from '@kbn/core/public';
import { getColorMode } from './utils';
@ -26,12 +27,18 @@ const defaultTheme: CoreTheme = {
};
const globalCache = createCache({
key: 'eui',
container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
key: EUI_STYLES_GLOBAL,
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
});
globalCache.compat = true;
const utilitiesCache = createCache({
key: EUI_STYLES_UTILS,
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
});
utilitiesCache.compat = true;
const emotionCache = createCache({
key: 'css',
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
});
emotionCache.compat = true;
@ -44,7 +51,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
return (
<EuiProvider
colorMode={colorMode}
cache={{ default: emotionCache, global: globalCache }}
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
globalStyles={false}
utilityClasses={false}
modify={modify}

1
src/plugins/kibana_utils/tsconfig.json
View file

@ -21,6 +21,7 @@
"@kbn/rison",
"@kbn/crypto-browser",
"@kbn/core-notifications-browser-mocks",
"@kbn/core-base-common",
],
"exclude": [
"target/**/*",