Top-level provider
diff --git a/src/services/theme/provider.stories.tsx b/src/services/theme/provider.stories.tsx
new file mode 100644
index 00000000000..b1a8d301571
--- /dev/null
+++ b/src/services/theme/provider.stories.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, useContext, useEffect } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiNestedThemeContext } from './context';
+import { EuiThemeProvider, EuiThemeProviderProps } from './provider';
+
+const meta: Meta
> = {
+ title: 'EuiThemeProvider',
+ component: EuiThemeProvider,
+};
+
+export default meta;
+type Story = StoryObj>;
+
+export const WrapperCloneElement: Story = {
+ render: () => (
+ <>
+
+
+ This example should only have 1 main wrapper rendered.
+
+
+
+ ),
+};
+
+export const CSSVariablesNearest: Story = {
+ render: () => (
+ <>
+
+ This component sets the nearest theme provider (the global theme) with a
+ red CSS variable color. Inspect the `:root` styles to see the variable
+ set.
+
+
+
+ This component sets the nearest local theme provider with a blue CSS
+ variable color. Inspect the parent theme wrapper to see the variable
+ set.
+
+
+
+ ),
+};
+
+export const CSSVariablesGlobal: Story = {
+ render: () => (
+ <>
+
+ This component sets the nearest theme provider (the global theme) with a
+ red CSS variable color. However, it should be overridden by the next
+ component.
+
+
+
+ This component sets the global theme with a blue CSS variable color.
+ It should override the previous component. Inspect the `:root` styles
+ to see this behavior
+
+
+
+ ),
+};
+
+/**
+ * Component for QA/testing purposes that mocks an EUI component
+ * that sets global or theme-level CSS variables
+ */
+const MockComponent: FunctionComponent<{
+ global?: boolean;
+ color: string;
+ children: any;
+}> = ({ global, color, children }) => {
+ const { setGlobalCSSVariables, setNearestThemeCSSVariables } = useContext(
+ EuiNestedThemeContext
+ );
+
+ useEffect(() => {
+ if (global) {
+ setGlobalCSSVariables({ '--testColor': color });
+ } else {
+ setNearestThemeCSSVariables({ '--testColor': color });
+ }
+ }, [global, color, setGlobalCSSVariables, setNearestThemeCSSVariables]);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/services/theme/provider.test.tsx b/src/services/theme/provider.test.tsx
index 519cd645f87..3b0368723c5 100644
--- a/src/services/theme/provider.test.tsx
+++ b/src/services/theme/provider.test.tsx
@@ -6,11 +6,12 @@
* Side Public License, v 1.
*/
-import React from 'react';
+import React, { FunctionComponent, useContext, useEffect } from 'react';
import { render } from '@testing-library/react'; // Note - don't use the EUI custom RTL `render`, as it auto-wraps an `EuiProvider`
import { css } from '@emotion/react';
import { EuiProvider } from '../../components/provider';
+import { EuiNestedThemeContext } from './context';
import { EuiThemeProvider } from './provider';
describe('EuiThemeProvider', () => {
@@ -136,4 +137,82 @@ describe('EuiThemeProvider', () => {
expect(container.querySelector('.hello.world')).toBeTruthy();
});
});
+
+ describe('CSS variables', () => {
+ const MockEuiComponent: FunctionComponent<{ global?: boolean }> = ({
+ global,
+ }) => {
+ const {
+ globalCSSVariables,
+ setGlobalCSSVariables,
+ setNearestThemeCSSVariables,
+ } = useContext(EuiNestedThemeContext);
+
+ useEffect(() => {
+ if (global) {
+ setGlobalCSSVariables({ '--hello': 'global-world' });
+ } else {
+ setNearestThemeCSSVariables({ '--hello': 'world' });
+ }
+ }, [global, setGlobalCSSVariables, setNearestThemeCSSVariables]);
+
+ // Our current version of jsdom doesn't yet support :root (currently on v11,
+ // need to be on at least v20), so we'll mock something to assert on in the interim
+ return <>{JSON.stringify(globalCSSVariables)};
+ };
+
+ const getThemeProvider = (container: HTMLElement) =>
+ container.querySelector('.euiThemeProvider')!;
+ const getThemeClassName = (container: HTMLElement) =>
+ getThemeProvider(container).className;
+
+ it('allows child components to set non-global theme CSS variables', () => {
+ const { container } = render(
+
+
+
+
+
+ );
+ expect(getThemeClassName(container)).toContain('euiCSSVariables');
+ expect(container.firstChild).toHaveStyleRule('--hello', 'world');
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it('sets global CSS variables when the nearest theme provider is the top-level one', () => {
+ const { container } = render(
+
+
+
+ );
+ expect(container.textContent).toContain('{"--hello":"world"}');
+ });
+
+ it('allows child components to set global CSS variables from any nested theme provider', () => {
+ const { container } = render(
+
+
+
+
+
+ );
+ expect(getThemeClassName(container)).not.toContain('euiCSSVariables');
+ expect(container.textContent).toContain('{"--hello":"global-world"}');
+ });
+
+ it('can set both global and nearest theme variables without conflicting', () => {
+ const { container } = render(
+
+
+
+
+
+
+
+ );
+ expect(getThemeClassName(container)).toContain('euiCSSVariables');
+ expect(getThemeProvider(container)).toHaveStyleRule('--hello', 'world');
+ expect(container.textContent).toContain('{"--hello":"global-world"}');
+ });
+ });
});