diff --git a/packages/eui/changelogs/upcoming/7820.md b/packages/eui/changelogs/upcoming/7820.md
new file mode 100644
index 00000000000..9198600ece9
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7820.md
@@ -0,0 +1 @@
+- Updated `setEuiDevProviderWarning` to additionally accept a custom callback function, which warning messages will be passed to
diff --git a/packages/eui/src-docs/src/views/provider/provider_example.js b/packages/eui/src-docs/src/views/provider/provider_example.js
index cd7e33ba3ee..0808935cb91 100644
--- a/packages/eui/src-docs/src/views/provider/provider_example.js
+++ b/packages/eui/src-docs/src/views/provider/provider_example.js
@@ -15,7 +15,7 @@ import { GuideSectionPropsTable } from '../../components/guide_section/guide_sec
import Setup from './provider_setup';
import GlobalStyles from './provider_styles';
-import Warnings from './provider_warning';
+import Warnings, { CallbackExample } from './provider_warning';
import {
EuiComponentDefaultsProps,
euiProviderComponentDefaultsSnippet,
@@ -237,8 +237,7 @@ export const ProviderExample = {
- setEuiDevProviderWarning
- accepts three levels:
+ setEuiDevProviderWarning accepts three levels:
-
@@ -254,6 +253,13 @@ export const ProviderExample = {
exception
+
+
+ It also accepts a callback function instead of a default warning
+ level. The warning message string will be passed to your callback,
+ where any custom action can be performed on it. Example usage:
+
+
),
},
diff --git a/packages/eui/src-docs/src/views/provider/provider_warning.tsx b/packages/eui/src-docs/src/views/provider/provider_warning.tsx
index 3d5b1fc5dc3..debd683eb55 100644
--- a/packages/eui/src-docs/src/views/provider/provider_warning.tsx
+++ b/packages/eui/src-docs/src/views/provider/provider_warning.tsx
@@ -35,3 +35,16 @@ const AppWithDuplicateProvider = () => (
>
);
};
+
+export const CallbackExample = () => (
+
+ {`import { setEuiDevProviderWarning } from '@elastic/eui';
+
+const customWarningHandler = (message: string) => {
+ sendWarningToTelemetryService(message);
+ console.debug(message);
+};
+
+setEuiDevProviderWarning(customWarningHandler);`}
+
+);
diff --git a/packages/eui/src/services/theme/warning.test.ts b/packages/eui/src/services/theme/warning.test.ts
index 46a7bb13bc3..e83e57acb64 100644
--- a/packages/eui/src/services/theme/warning.test.ts
+++ b/packages/eui/src/services/theme/warning.test.ts
@@ -80,5 +80,18 @@ describe('EUI provider dev warnings', () => {
expect(consoleLogSpy).not.toHaveBeenCalled();
expect(consoleWarnSpy).not.toHaveBeenCalled();
});
+
+ it('passes messages to callback functions', () => {
+ const devCallback = jest.fn();
+ setEuiDevProviderWarning(devCallback);
+
+ emitEuiProviderWarning(providerMessage);
+
+ expect(devCallback).toHaveBeenCalledWith('hello world');
+ expect(devCallback).toHaveBeenCalledTimes(1);
+
+ expect(consoleLogSpy).not.toHaveBeenCalled();
+ expect(consoleWarnSpy).not.toHaveBeenCalled();
+ });
});
});
diff --git a/packages/eui/src/services/theme/warning.ts b/packages/eui/src/services/theme/warning.ts
index f4d2ac7f9b5..bcff37ed4ac 100644
--- a/packages/eui/src/services/theme/warning.ts
+++ b/packages/eui/src/services/theme/warning.ts
@@ -7,16 +7,22 @@
*/
type LEVELS = 'log' | 'warn' | 'error';
+type ProviderCallback = (message: string | Error) => void;
-let providerWarning: LEVELS | undefined = undefined;
+let providerWarning: LEVELS | ProviderCallback | undefined = undefined;
-export const setEuiDevProviderWarning = (level: LEVELS | undefined) =>
- (providerWarning = level);
+export const setEuiDevProviderWarning = (warningType: typeof providerWarning) =>
+ (providerWarning = warningType);
export const getEuiDevProviderWarning = () => providerWarning;
// Not a public top-level EUI export, currently for internal use
export const emitEuiProviderWarning = (providerMessage: string) => {
+ // Handle callback types
+ if (typeof providerWarning === 'function') {
+ return providerWarning(providerMessage);
+ }
+ // Handle level types
switch (providerWarning) {
case 'log':
console.log(providerMessage);