diff --git a/typings/emotion.d.ts b/typings/emotion.d.ts new file mode 100644 index 0000000000000..cdcacdcc90f38 --- /dev/null +++ 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 {} +} diff --git a/x-pack/packages/ml/data_grid/emotion.d.ts b/x-pack/packages/ml/data_grid/emotion.d.ts deleted file mode 100644 index 213178080e536..0000000000000 --- a/x-pack/packages/ml/data_grid/emotion.d.ts +++ /dev/null @@ -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 {} -} diff --git a/x-pack/packages/ml/data_grid/tsconfig.json b/x-pack/packages/ml/data_grid/tsconfig.json index 590cb613b7bf0..16e44151edb55 100644 --- 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/**/*" diff --git 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 index 48ef98c8dffa8..e644c9604d495 100644 --- 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 => - partialTheme as EuiTheme; +export const getMockTheme = (partialTheme: RecursivePartial): UseEuiTheme => + partialTheme as UseEuiTheme; diff --git 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 index d49dd2c17bfb5..049a8e0d56635 100644 --- 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(

{getEmptyString()}

); diff --git a/x-pack/plugins/cases/public/components/empty_value/index.tsx b/x-pack/plugins/cases/public/components/empty_value/index.tsx index c89cd8fae91e6..8773174558de3 100644 --- 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})`; diff --git 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 index 36e2e91af9db0..2e8b417972e91 100644 --- 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) => ({ eui: { ...euiDarkVars, euiColorLightShade: '#ece' }, darkMode: true })} - > + {children} diff --git a/x-pack/plugins/osquery/emotion.d.ts b/x-pack/plugins/osquery/emotion.d.ts deleted file mode 100644 index 213178080e536..0000000000000 --- a/x-pack/plugins/osquery/emotion.d.ts +++ /dev/null @@ -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 {} -} diff --git a/x-pack/plugins/osquery/tsconfig.json b/x-pack/plugins/osquery/tsconfig.json index 2c3426ad033cd..141683d7e500f 100644 --- 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", diff --git 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 index 87592b608613f..2be968669057c 100644 --- 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('', () => { describe('panel is not expandable by default', () => { it('should render non-expandable panel by default', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -54,7 +52,7 @@ describe('', () => { }, }; const { getByTestId, queryByTestId } = render( - + {children} ); @@ -70,7 +68,7 @@ describe('', () => { it('should only render left section of panel header when headerContent is not passed', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -88,7 +86,7 @@ describe('', () => { header: { ...defaultProps.header, headerContent: <>{'test header content'} }, }; const { getByTestId } = render( - + {children} ); @@ -105,7 +103,7 @@ describe('', () => { it('should not render content when content is null', () => { const { queryByTestId } = render( - + ); @@ -123,7 +121,7 @@ describe('', () => { it('should render panel with toggle and collapsed by default', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -135,7 +133,7 @@ describe('', () => { it('click toggle button should expand the panel', () => { const { getByTestId } = render( - + {children} ); @@ -152,7 +150,7 @@ describe('', () => { it('should not render toggle or content when content is null', () => { const { queryByTestId } = render( - + ); @@ -169,7 +167,7 @@ describe('', () => { it('should render header and content', () => { const { getByTestId } = render( - + {children} ); @@ -184,7 +182,7 @@ describe('', () => { it('click toggle button should collapse the panel', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -200,7 +198,7 @@ describe('', () => { it('should not render content when content is null', () => { const { queryByTestId } = render( - + );