[8.x] make emotion typing global (#200958) (#203162)

# Backport This will backport the following commits from `main` to `8.x`: - [make emotion typing global (#200958)](https://github.com/elastic/kibana/pull/200958)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) ","sha":"c5cc1532d74e8d733f57329959253e698105b447","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-management"],"title":"make emotion typing global","number":200958,"url":"https://github.com/elastic/kibana/pull/200958","mergeCommit":{"message":"make emotion typing global (#200958)\n\n## Summary\r\n\r\nInformed by\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-11247425,\r\ncloses https://github.com/elastic/kibana-team/issues/1299\r\n\r\nThis PR consolidates typings to provide adequate typing for the `css`\r\nprop EUI components accept. Placing the required typing file in the\r\ntyping directory means that all other plugins that already reference\r\nthis directory in their `tsconfig.json` would get this improvement by\r\ndefault.\r\n\r\n","sha":"c5cc1532d74e8d733f57329959253e698105b447"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200958","number":200958,"mergeCommit":{"message":"make emotion typing global (#200958)\n\n## Summary\r\n\r\nInformed by\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-11247425,\r\ncloses https://github.com/elastic/kibana-team/issues/1299\r\n\r\nThis PR consolidates typings to provide adequate typing for the `css`\r\nprop EUI components accept. Placing the required typing file in the\r\ntyping directory means that all other plugins that already reference\r\nthis directory in their `tsconfig.json` would get this improvement by\r\ndefault.\r\n\r\n","sha":"c5cc1532d74e8d733f57329959253e698105b447"}}]}] BACKPORT--> Co-authored-by: Eyo O. Eyo <7893459+eokoneyo@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-12-06 07:10:16 +11:00 · 2024-12-06 07:10:16 +11:00 · c4c00af4e6
commit c4c00af4e6
parent e9cb539f79
11 changed files with 40 additions and 60 deletions
--- a/typings/emotion.d.ts
+++ b/typings/emotion.d.ts
@ -0,0 +1,16 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}
--- a/x-pack/packages/ml/data_grid/emotion.d.ts
+++ b/x-pack/packages/ml/data_grid/emotion.d.ts
@ -1,14 +0,0 @@
-/*
- * 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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import '@emotion/react';
-import type { UseEuiTheme } from '@elastic/eui';
-
-declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Theme extends UseEuiTheme {}
-}
--- a/x-pack/packages/ml/data_grid/tsconfig.json
+++ b/x-pack/packages/ml/data_grid/tsconfig.json
@ -14,7 +14,7 @@
  "include": [
    "**/*.ts",
    "**/*.tsx",
-    "./emotion.d.ts", // Emotion EUI theme typing
+    "../../../../typings/emotion.d.ts"
  ],
  "exclude": [
    "target/**/*"
--- a/x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.tsx
+++ b/x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.tsx
@ -15,7 +15,7 @@ import { coreMock } from '@kbn/core/public/mocks';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import type { ILicense } from '@kbn/licensing-plugin/public';
 import type { StartServices } from '../../../types';
-import type { EuiTheme } from '@kbn/kibana-react-plugin/common';
+import type { UseEuiTheme } from '@elastic/eui';
 import { securityMock } from '@kbn/security-plugin/public/mocks';
 import { spacesPluginMock } from '@kbn/spaces-plugin/public/mocks';
 import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks';
@ -118,5 +118,5 @@ export const createKibanaContextProviderMock = () => {
    React.createElement(KibanaContextProvider, { services }, children);
 };

-export const getMockTheme = (partialTheme: RecursivePartial<EuiTheme>): EuiTheme =>
-  partialTheme as EuiTheme;
+export const getMockTheme = (partialTheme: RecursivePartial<UseEuiTheme>): UseEuiTheme =>
+  partialTheme as UseEuiTheme;
--- a/x-pack/plugins/cases/public/components/empty_value/empty_value.test.tsx
+++ b/x-pack/plugins/cases/public/components/empty_value/empty_value.test.tsx
@ -21,7 +21,7 @@ import {
 import { getMockTheme } from '../../common/lib/kibana/kibana_react.mock';

 describe('EmptyValue', () => {
-  const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });
+  const mockTheme = getMockTheme({ euiTheme: { colors: { mediumShade: '#ece' } } });

  test('it renders against snapshot', () => {
    const wrapper = shallow(<p>{getEmptyString()}</p>);
--- a/x-pack/plugins/cases/public/components/empty_value/index.tsx
+++ b/x-pack/plugins/cases/public/components/empty_value/index.tsx
@ -7,14 +7,11 @@

 import { get, isString } from 'lodash/fp';
 import React from 'react';
-import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import type { UseEuiTheme } from '@elastic/eui';

 import * as i18n from './translations';

-const emptyWrapperCss = css`
-  color: ${euiThemeVars.euiColorMediumShade};
-`;
+const emptyWrapperCss = ({ euiTheme }: UseEuiTheme) => ({ color: euiTheme.colors.mediumShade });

 export const getEmptyValue = () => '—';
 export const getEmptyString = () => `(${i18n.EMPTY_STRING})`;
--- a/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx
@ -93,6 +93,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
              <EuiSpacer size="s" />
              <Threshold
                title={`Threshold breached`}
+                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
                comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                id={'threshold-ratio-chart'}
@ -160,6 +161,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
              <EuiSpacer size="s" />
              <Threshold
                title={`Threshold breached`}
+                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
                comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                id="logCountThreshold"
--- a/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.test.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.test.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import { ThemeProvider } from '@emotion/react';
+import { EuiThemeProvider as ThemeProvider } from '@elastic/eui';
 import { MAINTENANCE_WINDOW_FEATURE_ID } from '@kbn/alerting-plugin/common/maintenance_window';
 import { fetchActiveMaintenanceWindows } from '@kbn/alerts-ui-shared/src/maintenance_window_callout/api';
 import { RUNNING_MAINTENANCE_WINDOW_1 } from '@kbn/alerts-ui-shared/src/maintenance_window_callout/mock';
@ -14,7 +14,6 @@ import { TimeBuckets } from '@kbn/data-plugin/common';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { observabilityAIAssistantPluginMock } from '@kbn/observability-ai-assistant-plugin/public/mock';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
-import { euiDarkVars } from '@kbn/ui-theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
@ -121,9 +120,7 @@ const queryClient = new QueryClient({
 });
 function AllTheProviders({ children }: { children: any }) {
  return (
-    <ThemeProvider
-      theme={() => ({ eui: { ...euiDarkVars, euiColorLightShade: '#ece' }, darkMode: true })}
-    >
+    <ThemeProvider>
      <IntlProvider locale="en">
        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
      </IntlProvider>
--- a/x-pack/plugins/osquery/emotion.d.ts
+++ b/x-pack/plugins/osquery/emotion.d.ts
@ -1,14 +0,0 @@
-/*
- * 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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import '@emotion/react';
-import type { UseEuiTheme } from '@elastic/eui';
-
-declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Theme extends UseEuiTheme {}
-}
--- a/x-pack/plugins/osquery/tsconfig.json
+++ b/x-pack/plugins/osquery/tsconfig.json
@ -13,9 +13,7 @@
    "server/**/*",
    "../../../typings/**/*",
    // ECS and Osquery schema files
-    "public/common/schemas/*/**.json",
-    // Emotion theme typing
-    "./emotion.d.ts"
+    "public/common/schemas/*/**.json"
  ],
  "kbn_references": [
    "@kbn/core",
--- a/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.test.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.test.tsx
@ -14,11 +14,9 @@ import {
  EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
  EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
 } from './test_ids';
-import { ThemeProvider } from '@emotion/react';
+import { EuiThemeProvider as ThemeProvider } from '@elastic/eui';
 import { ExpandablePanel } from './expandable_panel';

-const mockTheme = { eui: { euiColorMediumShade: '#ece' } };
-
 const TEST_ID = 'test-id';
 const defaultProps = {
  header: {
@ -33,7 +31,7 @@ describe('<ExpandablePanel />', () => {
  describe('panel is not expandable by default', () => {
    it('should render non-expandable panel by default', () => {
      const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...defaultProps}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -54,7 +52,7 @@ describe('<ExpandablePanel />', () => {
        },
      };
      const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...props}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -70,7 +68,7 @@ describe('<ExpandablePanel />', () => {

    it('should only render left section of panel header when headerContent is not passed', () => {
      const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...defaultProps}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -88,7 +86,7 @@ describe('<ExpandablePanel />', () => {
        header: { ...defaultProps.header, headerContent: <>{'test header content'}</> },
      };
      const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...props}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -105,7 +103,7 @@ describe('<ExpandablePanel />', () => {

    it('should not render content when content is null', () => {
      const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...defaultProps} />
        </ThemeProvider>
      );
@ -123,7 +121,7 @@ describe('<ExpandablePanel />', () => {

    it('should render panel with toggle and collapsed by default', () => {
      const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...expandableDefaultProps}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -135,7 +133,7 @@ describe('<ExpandablePanel />', () => {

    it('click toggle button should expand the panel', () => {
      const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...expandableDefaultProps}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -152,7 +150,7 @@ describe('<ExpandablePanel />', () => {

    it('should not render toggle or content when content is null', () => {
      const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...expandableDefaultProps} />
        </ThemeProvider>
      );
@ -169,7 +167,7 @@ describe('<ExpandablePanel />', () => {

    it('should render header and content', () => {
      const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...expandedDefaultProps}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -184,7 +182,7 @@ describe('<ExpandablePanel />', () => {

    it('click toggle button should collapse the panel', () => {
      const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...expandedDefaultProps}>{children}</ExpandablePanel>
        </ThemeProvider>
      );
@ -200,7 +198,7 @@ describe('<ExpandablePanel />', () => {

    it('should not render content when content is null', () => {
      const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
          <ExpandablePanel {...expandedDefaultProps} />
        </ThemeProvider>
      );