diff --git a/package.json b/package.json index f884b95f75c31..6dd026150cb11 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35", "@elastic/ems-client": "8.0.0", - "@elastic/eui": "41.2.3", + "@elastic/eui": "43.1.1", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/elastic-eslint-config-kibana/.eslintrc.js b/packages/elastic-eslint-config-kibana/.eslintrc.js index dc95601fadd1a..fe6ea54bbde05 100644 --- a/packages/elastic-eslint-config-kibana/.eslintrc.js +++ b/packages/elastic-eslint-config-kibana/.eslintrc.js @@ -91,8 +91,6 @@ module.exports = { ...[ '@elastic/eui/dist/eui_theme_light.json', '@elastic/eui/dist/eui_theme_dark.json', - '@elastic/eui/dist/eui_theme_amsterdam_light.json', - '@elastic/eui/dist/eui_theme_amsterdam_dark.json', ].map(from => ({ from, to: false, diff --git a/packages/kbn-ui-shared-deps-npm/webpack.config.js b/packages/kbn-ui-shared-deps-npm/webpack.config.js index 197ec5e63ad7c..5b030a91e396e 100644 --- a/packages/kbn-ui-shared-deps-npm/webpack.config.js +++ b/packages/kbn-ui-shared-deps-npm/webpack.config.js @@ -70,8 +70,8 @@ module.exports = (_, argv) => { '@elastic/eui/dist/eui_charts_theme', '@elastic/eui/lib/services', '@elastic/eui/lib/services/format', - '@elastic/eui/dist/eui_theme_amsterdam_light.json', - '@elastic/eui/dist/eui_theme_amsterdam_dark.json', + '@elastic/eui/dist/eui_theme_light.json', + '@elastic/eui/dist/eui_theme_dark.json', '@elastic/numeral', '@emotion/react', 'classnames', @@ -96,8 +96,8 @@ module.exports = (_, argv) => { 'styled-components', 'tslib', ], - 'kbn-ui-shared-deps-npm.v8.dark': ['@elastic/eui/dist/eui_theme_amsterdam_dark.css'], - 'kbn-ui-shared-deps-npm.v8.light': ['@elastic/eui/dist/eui_theme_amsterdam_light.css'], + 'kbn-ui-shared-deps-npm.v8.dark': ['@elastic/eui/dist/eui_theme_dark.css'], + 'kbn-ui-shared-deps-npm.v8.light': ['@elastic/eui/dist/eui_theme_light.css'], }, context: __dirname, devtool: 'cheap-source-map', diff --git a/packages/kbn-ui-shared-deps-src/src/theme.ts b/packages/kbn-ui-shared-deps-src/src/theme.ts index 33b8a594bfa5d..8fde5c63a292a 100644 --- a/packages/kbn-ui-shared-deps-src/src/theme.ts +++ b/packages/kbn-ui-shared-deps-src/src/theme.ts @@ -7,9 +7,9 @@ */ /* eslint-disable-next-line @kbn/eslint/module_migration */ -import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json'; +import { default as v8Light } from '@elastic/eui/dist/eui_theme_light.json'; /* eslint-disable-next-line @kbn/eslint/module_migration */ -import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json'; +import { default as v8Dark } from '@elastic/eui/dist/eui_theme_dark.json'; const globals: any = typeof window === 'undefined' ? {} : window; diff --git a/src/core/public/core_app/styles/_globals_v8dark.scss b/src/core/public/core_app/styles/_globals_v8dark.scss index ce0eeea02eb3b..df9f1a7493473 100644 --- a/src/core/public/core_app/styles/_globals_v8dark.scss +++ b/src/core/public/core_app/styles/_globals_v8dark.scss @@ -2,8 +2,8 @@ // // prepended to all .scss imports (from JS, when v8dark theme selected) -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_dark'; -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals'; +@import '@elastic/eui/src/themes/amsterdam/colors_dark'; +@import '@elastic/eui/src/themes/amsterdam/globals'; @import './mixins'; diff --git a/src/core/public/core_app/styles/_globals_v8light.scss b/src/core/public/core_app/styles/_globals_v8light.scss index 1ec76902f6589..07312b9cf08bf 100644 --- a/src/core/public/core_app/styles/_globals_v8light.scss +++ b/src/core/public/core_app/styles/_globals_v8light.scss @@ -2,8 +2,8 @@ // // prepended to all .scss imports (from JS, when v8light theme selected) -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light'; -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals'; +@import '@elastic/eui/src/themes/amsterdam/colors_light'; +@import '@elastic/eui/src/themes/amsterdam/globals'; @import './mixins'; diff --git a/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap b/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap index 1c394112a404c..d4a3bd3a7ea74 100644 --- a/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap +++ b/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap @@ -7,6 +7,9 @@ exports[`#start() returns \`Context\` component 1`] = ` Object { "mapping": Object { "euiAccordion.isLoading": "Loading", + "euiAutoRefresh.autoRefreshLabel": "Auto refresh", + "euiAutoRefresh.buttonLabelOff": "Auto refresh is off", + "euiAutoRefresh.buttonLabelOn": [Function], "euiBasicTable.noItemsMessage": "No items found", "euiBasicTable.selectAllRows": "Select all rows", "euiBasicTable.selectThisRow": "Select this row", @@ -98,6 +101,17 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiDataGridToolbar.fullScreenButtonActive": "Exit full screen", "euiDatePopoverButton.invalidTitle": [Function], "euiDatePopoverButton.outdatedTitle": [Function], + "euiDisplaySelector.buttonText": "Display options", + "euiDisplaySelector.densityLabel": "Density", + "euiDisplaySelector.labelAuto": "Auto fit", + "euiDisplaySelector.labelCompact": "Compact", + "euiDisplaySelector.labelCustom": "Custom", + "euiDisplaySelector.labelExpanded": "Expanded", + "euiDisplaySelector.labelNormal": "Normal", + "euiDisplaySelector.labelSingle": "Single", + "euiDisplaySelector.lineCountLabel": "Lines per row", + "euiDisplaySelector.resetButtonText": "Reset to default", + "euiDisplaySelector.rowHeightLabel": "Row height", "euiErrorBoundary.error": "Error", "euiFieldPassword.maskPassword": "Mask password", "euiFieldPassword.showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.", @@ -145,15 +159,20 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiNotificationEventReadIcon.readAria": [Function], "euiNotificationEventReadIcon.unread": "Unread", "euiNotificationEventReadIcon.unreadAria": [Function], - "euiPagination.disabledNextPage": "Next page", - "euiPagination.disabledPreviousPage": "Previous page", + "euiPagination.collection": "collection", "euiPagination.firstRangeAriaLabel": [Function], + "euiPagination.fromEndLabel": "from end", + "euiPagination.last": "Last", "euiPagination.lastRangeAriaLabel": [Function], - "euiPagination.nextPage": [Function], + "euiPagination.of": "of", + "euiPagination.page": "Page", "euiPagination.pageOfTotalCompressed": [Function], - "euiPagination.previousPage": [Function], "euiPaginationButton.longPageString": [Function], "euiPaginationButton.shortPageString": [Function], + "euiPaginationButtonArrow.firstPage": "First page", + "euiPaginationButtonArrow.lastPage": "Last page", + "euiPaginationButtonArrow.nextPage": "Next page", + "euiPaginationButtonArrow.previousPage": "Previous page", "euiPinnableListGroup.pinExtraActionLabel": "Pin item", "euiPinnableListGroup.pinnedExtraActionLabel": "Unpin item", "euiPopover.screenReaderAnnouncement": "You are in a dialog. To close this dialog, hit escape.", @@ -168,10 +187,9 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiQuickSelect.unitLabel": "Time unit", "euiQuickSelect.valueLabel": "Time value", "euiRecentlyUsed.legend": "Recently used date ranges", - "euiRefreshInterval.fullDescription": [Function], + "euiRefreshInterval.fullDescriptionOff": [Function], + "euiRefreshInterval.fullDescriptionOn": [Function], "euiRefreshInterval.legend": "Refresh every", - "euiRefreshInterval.start": "Start", - "euiRefreshInterval.stop": "Stop", "euiRelativeTab.dateInputError": "Must be a valid range", "euiRelativeTab.fullDescription": [Function], "euiRelativeTab.numberInputError": "Must be >= 0", @@ -213,12 +231,6 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiStepStrings.simpleWarning": [Function], "euiStepStrings.step": [Function], "euiStepStrings.warning": [Function], - "euiStyleSelector.buttonLegend": "Select the display density for the data grid", - "euiStyleSelector.buttonText": "Density", - "euiStyleSelector.labelCompact": "Compact density", - "euiStyleSelector.labelExpanded": "Expanded density", - "euiStyleSelector.labelNormal": "Normal density", - "euiSuperDatePicker.showDatesButtonLabel": "Show dates", "euiSuperSelect.screenReaderAnnouncement": "You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.", "euiSuperSelectControl.selectAnOption": [Function], "euiSuperUpdateButton.cannotUpdateTooltip": "Cannot update", diff --git a/src/core/public/i18n/i18n_eui_mapping.tsx b/src/core/public/i18n/i18n_eui_mapping.tsx index e3357d138e794..4603a2074c4d9 100644 --- a/src/core/public/i18n/i18n_eui_mapping.tsx +++ b/src/core/public/i18n/i18n_eui_mapping.tsx @@ -20,6 +20,17 @@ export const getEuiContextMapping = (): EuiTokensObject => { 'euiAccordion.isLoading': i18n.translate('core.euiAccordion.isLoading', { defaultMessage: 'Loading', }), + 'euiAutoRefresh.autoRefreshLabel': i18n.translate('core.euiAutoRefresh.autoRefreshLabel', { + defaultMessage: 'Auto refresh', + }), + 'euiAutoRefresh.buttonLabelOff': i18n.translate('core.euiAutoRefresh.buttonLabelOff', { + defaultMessage: 'Auto refresh is off', + }), + 'euiAutoRefresh.buttonLabelOn': ({ prettyInterval }: EuiValues) => + i18n.translate('core.euiAutoRefresh.buttonLabelOn', { + defaultMessage: 'Auto refresh is on and set to {prettyInterval}', + values: { prettyInterval }, + }), 'euiBasicTable.selectAllRows': i18n.translate('core.euiBasicTable.selectAllRows', { defaultMessage: 'Select all rows', description: 'ARIA and displayed label on a checkbox to select all table rows', @@ -495,6 +506,42 @@ export const getEuiContextMapping = (): EuiTokensObject => { defaultMessage: 'Update needed: {title}', values: { title }, }), + 'euiDisplaySelector.buttonText': i18n.translate('core.euiDisplaySelector.buttonText', { + defaultMessage: 'Display options', + }), + 'euiDisplaySelector.resetButtonText': i18n.translate( + 'core.euiDisplaySelector.resetButtonText', + { + defaultMessage: 'Reset to default', + } + ), + 'euiDisplaySelector.densityLabel': i18n.translate('core.euiDisplaySelector.densityLabel', { + defaultMessage: 'Density', + }), + 'euiDisplaySelector.labelCompact': i18n.translate('core.euiDisplaySelector.labelCompact', { + defaultMessage: 'Compact', + }), + 'euiDisplaySelector.labelNormal': i18n.translate('core.euiDisplaySelector.labelNormal', { + defaultMessage: 'Normal', + }), + 'euiDisplaySelector.labelExpanded': i18n.translate('core.euiDisplaySelector.labelExpanded', { + defaultMessage: 'Expanded', + }), + 'euiDisplaySelector.labelSingle': i18n.translate('core.euiDisplaySelector.labelSingle', { + defaultMessage: 'Single', + }), + 'euiDisplaySelector.labelAuto': i18n.translate('core.euiDisplaySelector.labelAuto', { + defaultMessage: 'Auto fit', + }), + 'euiDisplaySelector.labelCustom': i18n.translate('core.euiDisplaySelector.labelCustom', { + defaultMessage: 'Custom', + }), + 'euiDisplaySelector.rowHeightLabel': i18n.translate('core.euiDisplaySelector.rowHeightLabel', { + defaultMessage: 'Row height', + }), + 'euiDisplaySelector.lineCountLabel': i18n.translate('core.euiDisplaySelector.lineCountLabel', { + defaultMessage: 'Lines per row', + }), 'euiFieldPassword.showPassword': i18n.translate('core.euiFieldPassword.showPassword', { defaultMessage: 'Show password as plain text. Note: this will visually expose your password on the screen.', @@ -708,11 +755,6 @@ export const getEuiContextMapping = (): EuiTokensObject => { defaultMessage: 'hide', } ), - 'euiPagination.nextPage': ({ page }: EuiValues) => - i18n.translate('core.euiPagination.nextPage', { - defaultMessage: 'Next page, {page}', - values: { page }, - }), 'euiPagination.pageOfTotalCompressed': ({ page, total }: EuiValues) => ( { values={{ page, total }} /> ), - 'euiPagination.previousPage': ({ page }: EuiValues) => - i18n.translate('core.euiPagination.previousPage', { - defaultMessage: 'Previous page, {page}', - values: { page }, - }), - 'euiPagination.disabledPreviousPage': i18n.translate( - 'core.euiPagination.disabledPreviousPage', - { - defaultMessage: 'Previous page', - } - ), - 'euiPagination.disabledNextPage': i18n.translate('core.euiPagination.disabledNextPage', { - defaultMessage: 'Next page', - }), 'euiPagination.firstRangeAriaLabel': ({ lastPage }: EuiValues) => i18n.translate('core.euiPagination.firstRangeAriaLabel', { defaultMessage: 'Skipping pages 2 to {lastPage}', @@ -744,6 +772,21 @@ export const getEuiContextMapping = (): EuiTokensObject => { defaultMessage: 'Skipping pages {firstPage} to {lastPage}', values: { firstPage, lastPage }, }), + 'euiPagination.last': i18n.translate('core.euiPagination.last', { + defaultMessage: 'Last', + }), + 'euiPagination.page': i18n.translate('core.euiPagination.page', { + defaultMessage: 'Page', + }), + 'euiPagination.of': i18n.translate('core.euiPagination.of', { + defaultMessage: 'of', + }), + 'euiPagination.collection': i18n.translate('core.euiPagination.collection', { + defaultMessage: 'collection', + }), + 'euiPagination.fromEndLabel': i18n.translate('core.euiPagination.fromEndLabel', { + defaultMessage: 'from end', + }), 'euiPaginationButton.longPageString': ({ page, totalPages }: EuiValues) => i18n.translate('core.euiPaginationButton.longPageString', { defaultMessage: 'Page {page} of {totalPages}', @@ -756,6 +799,24 @@ export const getEuiContextMapping = (): EuiTokensObject => { values: { page }, description: 'Text to describe the current page of a paginated section', }), + 'euiPaginationButtonArrow.nextPage': i18n.translate('core.euiPaginationButtonArrow.nextPage', { + defaultMessage: 'Next page', + }), + 'euiPaginationButtonArrow.previousPage': i18n.translate( + 'core.euiPaginationButtonArrow.previousPage', + { + defaultMessage: 'Previous page', + } + ), + 'euiPaginationButtonArrow.firstPage': i18n.translate( + 'core.euiPaginationButtonArrow.firstPage', + { + defaultMessage: 'First page', + } + ), + 'euiPaginationButtonArrow.lastPage': i18n.translate('core.euiPaginationButtonArrow.lastPage', { + defaultMessage: 'Last page', + }), 'euiPinnableListGroup.pinExtraActionLabel': i18n.translate( 'core.euiPinnableListGroup.pinExtraActionLabel', { @@ -811,20 +872,19 @@ export const getEuiContextMapping = (): EuiTokensObject => { 'euiRecentlyUsed.legend': i18n.translate('core.euiRecentlyUsed.legend', { defaultMessage: 'Recently used date ranges', }), - 'euiRefreshInterval.fullDescription': ({ optionValue, optionText }: EuiValues) => - i18n.translate('core.euiRefreshInterval.fullDescription', { - defaultMessage: 'Refresh interval currently set to {optionValue} {optionText}.', - values: { optionValue, optionText }, - }), 'euiRefreshInterval.legend': i18n.translate('core.euiRefreshInterval.legend', { defaultMessage: 'Refresh every', }), - 'euiRefreshInterval.start': i18n.translate('core.euiRefreshInterval.start', { - defaultMessage: 'Start', - }), - 'euiRefreshInterval.stop': i18n.translate('core.euiRefreshInterval.stop', { - defaultMessage: 'Stop', - }), + 'euiRefreshInterval.fullDescriptionOff': ({ optionValue, optionText }: EuiValues) => + i18n.translate('core.euiRefreshInterval.fullDescriptionOff', { + defaultMessage: 'Refresh is off, interval set to {optionValue} {optionText}.', + values: { optionValue, optionText }, + }), + 'euiRefreshInterval.fullDescriptionOn': ({ optionValue, optionText }: EuiValues) => + i18n.translate('core.euiRefreshInterval.fullDescriptionOn', { + defaultMessage: 'Refresh is on, interval set to {optionValue} {optionText}.', + values: { optionValue, optionText }, + }), 'euiRelativeTab.fullDescription': ({ unit }: EuiValues) => i18n.translate('core.euiRelativeTab.fullDescription', { defaultMessage: 'The unit is changeable. Currently set to {unit}.', @@ -1028,28 +1088,6 @@ export const getEuiContextMapping = (): EuiTokensObject => { defaultMessage: 'Step {number} is loading', values: { number }, }), - 'euiStyleSelector.buttonText': i18n.translate('core.euiStyleSelector.buttonText', { - defaultMessage: 'Density', - }), - 'euiStyleSelector.buttonLegend': i18n.translate('core.euiStyleSelector.buttonLegend', { - defaultMessage: 'Select the display density for the data grid', - }), - 'euiStyleSelector.labelExpanded': i18n.translate('core.euiStyleSelector.labelExpanded', { - defaultMessage: 'Expanded density', - }), - 'euiStyleSelector.labelNormal': i18n.translate('core.euiStyleSelector.labelNormal', { - defaultMessage: 'Normal density', - }), - 'euiStyleSelector.labelCompact': i18n.translate('core.euiStyleSelector.labelCompact', { - defaultMessage: 'Compact density', - }), - 'euiSuperDatePicker.showDatesButtonLabel': i18n.translate( - 'core.euiSuperDatePicker.showDatesButtonLabel', - { - defaultMessage: 'Show dates', - description: 'Displayed in a button that shows date picker', - } - ), 'euiSuperSelect.screenReaderAnnouncement': i18n.translate( 'core.euiSuperSelect.screenReaderAnnouncement', { diff --git a/src/core/public/theme/convert_core_theme.ts b/src/core/public/theme/convert_core_theme.ts index 78acef40764b6..e0251de1d31be 100644 --- a/src/core/public/theme/convert_core_theme.ts +++ b/src/core/public/theme/convert_core_theme.ts @@ -6,12 +6,13 @@ * Side Public License, v 1. */ -import type { EuiThemeSystem, EuiThemeColorMode } from '@elastic/eui'; +import { COLOR_MODES_STANDARD } from '@elastic/eui'; +import type { EuiThemeSystem, EuiThemeColorModeStandard } from '@elastic/eui'; import type { CoreTheme } from './types'; /** @internal */ export interface EuiTheme { - colorMode: EuiThemeColorMode; + colorMode: EuiThemeColorModeStandard; euiThemeSystem?: EuiThemeSystem; } @@ -19,6 +20,6 @@ export interface EuiTheme { export const convertCoreTheme = (coreTheme: CoreTheme): EuiTheme => { const { darkMode } = coreTheme; return { - colorMode: darkMode ? 'DARK' : 'LIGHT', + colorMode: darkMode ? COLOR_MODES_STANDARD.dark : COLOR_MODES_STANDARD.light, }; }; diff --git a/src/core/public/theme/core_theme_provider.test.tsx b/src/core/public/theme/core_theme_provider.test.tsx index baa354f10f428..a0f0faf13b9da 100644 --- a/src/core/public/theme/core_theme_provider.test.tsx +++ b/src/core/public/theme/core_theme_provider.test.tsx @@ -11,12 +11,13 @@ import { act } from 'react-dom/test-utils'; import type { ReactWrapper } from 'enzyme'; import { of, BehaviorSubject } from 'rxjs'; import { useEuiTheme } from '@elastic/eui'; +import type { UseEuiTheme } from '@elastic/eui'; import { mountWithIntl } from '@kbn/test/jest'; import { CoreThemeProvider } from './core_theme_provider'; import type { CoreTheme } from './types'; describe('CoreThemeProvider', () => { - let euiTheme: ReturnType | undefined; + let euiTheme: UseEuiTheme | undefined; beforeEach(() => { euiTheme = undefined; diff --git a/src/core/public/theme/core_theme_provider.tsx b/src/core/public/theme/core_theme_provider.tsx index 9f40cbd5393b8..ee6ecbea836b5 100644 --- a/src/core/public/theme/core_theme_provider.tsx +++ b/src/core/public/theme/core_theme_provider.tsx @@ -9,7 +9,9 @@ import React, { FC, useMemo } from 'react'; import { Observable } from 'rxjs'; import useObservable from 'react-use/lib/useObservable'; -import { EuiThemeProvider } from '@elastic/eui'; +import createCache from '@emotion/cache'; +import { EuiProvider } from '@elastic/eui'; +import { EUI_STYLES_GLOBAL } from '../../utils'; import { CoreTheme } from './types'; import { convertCoreTheme } from './convert_core_theme'; @@ -21,16 +23,25 @@ interface CoreThemeProviderProps { theme$: Observable; } +const emotionCache = createCache({ + key: 'eui-styles', + container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement, +}); + /** - * Wrapper around `EuiThemeProvider` converting (and exposing) core's theme to EUI theme. + * Wrapper around `EuiProvider` converting (and exposing) core's theme to EUI theme. * @internal Only meant to be used within core for internal usages of EUI/React */ export const CoreThemeProvider: FC = ({ theme$, children }) => { const coreTheme = useObservable(theme$, defaultTheme); const euiTheme = useMemo(() => convertCoreTheme(coreTheme), [coreTheme]); return ( - + {children} - + ); }; diff --git a/src/core/server/rendering/views/styles.tsx b/src/core/server/rendering/views/styles.tsx index fbeab4fb4388f..9830cac55e9eb 100644 --- a/src/core/server/rendering/views/styles.tsx +++ b/src/core/server/rendering/views/styles.tsx @@ -50,6 +50,10 @@ const InlineStyles: FC<{ darkMode: boolean }> = ({ darkMode }) => { display: block; } + html { + background-color: ${darkMode ? '#141519' : '#F8FAFD'} + } + .kbnWelcomeView { line-height: 1.5; height: 100%; diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx index 971a9e22e4fcc..47d9c98318c88 100644 --- a/src/core/server/rendering/views/template.tsx +++ b/src/core/server/rendering/views/template.tsx @@ -8,6 +8,7 @@ import React, { FunctionComponent, createElement } from 'react'; +import { EUI_STYLES_GLOBAL } from '../../../utils'; import { RenderingMetadata } from '../types'; import { Fonts } from './fonts'; import { Styles } from './styles'; @@ -42,6 +43,8 @@ export const Template: FunctionComponent = ({ + {/* Inject EUI reset and global styles before all other component styles */} + {/* Inject stylesheets into the before scripts so that KP plugins with bundled styles will override them */} diff --git a/src/core/utils/index.ts b/src/core/utils/index.ts index 73980983a12e1..82b636685a4d4 100644 --- a/src/core/utils/index.ts +++ b/src/core/utils/index.ts @@ -8,3 +8,4 @@ export { DEFAULT_APP_CATEGORIES } from './default_app_categories'; export { APP_WRAPPER_CLASS } from './app_wrapper_class'; +export { EUI_STYLES_GLOBAL } from './meta'; diff --git a/src/core/utils/meta.ts b/src/core/utils/meta.ts new file mode 100644 index 0000000000000..7d5e8b8ee63f9 --- /dev/null +++ b/src/core/utils/meta.ts @@ -0,0 +1,9 @@ +/* + * 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. + */ + +export const EUI_STYLES_GLOBAL = 'eui-styles-global'; diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 9674694c0d655..d1df68685a288 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -76,6 +76,6 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.0.0': ['Elastic License 2.0'], - '@elastic/eui@41.2.3': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@43.1.1': ['SSPL-1.0 OR Elastic License 2.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry }; diff --git a/src/plugins/data/public/query/timefilter/timefilter.test.ts b/src/plugins/data/public/query/timefilter/timefilter.test.ts index 92ee6b0c30428..e3fc3ac582d80 100644 --- a/src/plugins/data/public/query/timefilter/timefilter.test.ts +++ b/src/plugins/data/public/query/timefilter/timefilter.test.ts @@ -162,7 +162,8 @@ describe('setRefreshInterval', () => { expect(timefilter.getRefreshInterval()).toEqual({ pause: true, value: 0 }); }); - test('should set pause to true when interval is zero', () => { + test('should set pause to true when interval is changed to zero from non-zero', () => { + timefilter.setRefreshInterval({ value: 1000, pause: false }); timefilter.setRefreshInterval({ value: 0, pause: false }); expect(timefilter.getRefreshInterval()).toEqual({ pause: true, value: 0 }); }); diff --git a/src/plugins/data/public/query/timefilter/timefilter.ts b/src/plugins/data/public/query/timefilter/timefilter.ts index e13e8b17a7f43..d289a90149fdd 100644 --- a/src/plugins/data/public/query/timefilter/timefilter.ts +++ b/src/plugins/data/public/query/timefilter/timefilter.ts @@ -151,10 +151,16 @@ export class Timefilter { public setRefreshInterval = (refreshInterval: Partial) => { const prevRefreshInterval = this.getRefreshInterval(); const newRefreshInterval = { ...prevRefreshInterval, ...refreshInterval }; + let shouldUnpauseRefreshLoop = + newRefreshInterval.pause === false && prevRefreshInterval != null; + if (prevRefreshInterval?.value > 0 && newRefreshInterval.value <= 0) { + shouldUnpauseRefreshLoop = false; + } // If the refresh interval is <= 0 handle that as a paused refresh + // unless the user has un-paused the refresh loop and the value is not going from > 0 to 0 if (newRefreshInterval.value <= 0) { newRefreshInterval.value = 0; - newRefreshInterval.pause = true; + newRefreshInterval.pause = shouldUnpauseRefreshLoop ? false : true; } this._refreshInterval = { value: newRefreshInterval.value, diff --git a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap index 3262ee70dff86..4db3f780fdebe 100644 --- a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap +++ b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap @@ -1416,54 +1416,57 @@ exports[`Inspector Data View component should render single table without select aria-label="Pagination for table: " className="euiPagination" > - + + Page 1 of 1 + + + - - - - - - + /> + + + +
- - - - - - - + /> + + + + @@ -3002,54 +2997,57 @@ exports[`Inspector Data View component should support multiple datatables 1`] = aria-label="Pagination for table: " className="euiPagination" > - + + Page 1 of 1 + + + - - - - - - + /> + + + +
- - - - - - - + /> + + + + diff --git a/src/plugins/discover/public/components/discover_grid/constants.ts b/src/plugins/discover/public/components/discover_grid/constants.ts index 1126c6cbbf279..80900c06d4932 100644 --- a/src/plugins/discover/public/components/discover_grid/constants.ts +++ b/src/plugins/discover/public/components/discover_grid/constants.ts @@ -23,7 +23,7 @@ export const toolbarVisibility = { allowHide: false, allowReorder: true, }, - showStyleSelector: false, + showDisplaySelector: false, }; export const defaultMonacoEditorWidth = 370; diff --git a/src/plugins/interactive_setup/public/theme/utils.ts b/src/plugins/interactive_setup/public/theme/utils.ts index 55730974afc16..052804073f226 100644 --- a/src/plugins/interactive_setup/public/theme/utils.ts +++ b/src/plugins/interactive_setup/public/theme/utils.ts @@ -6,14 +6,14 @@ * Side Public License, v 1. */ -import type { EuiThemeColorMode } from '@elastic/eui/src/services/theme/types'; +import { COLOR_MODES_STANDARD } from '@elastic/eui'; +import type { EuiThemeColorModeStandard } from '@elastic/eui'; import type { CoreTheme } from '../../../../core/public'; /** * Copied from the `kibana_react` plugin, remove once https://github.com/elastic/kibana/issues/119204 is implemented. */ -export const getColorMode = (theme: CoreTheme): EuiThemeColorMode => { - // COLOR_MODES_STANDARD is not exported from eui - return theme.darkMode ? 'DARK' : 'LIGHT'; +export const getColorMode = (theme: CoreTheme): EuiThemeColorModeStandard => { + return theme.darkMode ? COLOR_MODES_STANDARD.dark : COLOR_MODES_STANDARD.light; }; diff --git a/src/plugins/kibana_react/public/theme/kibana_theme_provider.test.tsx b/src/plugins/kibana_react/public/theme/kibana_theme_provider.test.tsx index f2d1484e4bb56..ef7f79cdaa64e 100644 --- a/src/plugins/kibana_react/public/theme/kibana_theme_provider.test.tsx +++ b/src/plugins/kibana_react/public/theme/kibana_theme_provider.test.tsx @@ -11,12 +11,13 @@ import { act } from 'react-dom/test-utils'; import type { ReactWrapper } from 'enzyme'; import { of, BehaviorSubject } from 'rxjs'; import { useEuiTheme } from '@elastic/eui'; +import type { UseEuiTheme } from '@elastic/eui'; import { mountWithIntl } from '@kbn/test/jest'; import type { CoreTheme } from 'src/core/public'; import { KibanaThemeProvider } from './kibana_theme_provider'; describe('KibanaThemeProvider', () => { - let euiTheme: ReturnType | undefined; + let euiTheme: UseEuiTheme | undefined; beforeEach(() => { euiTheme = undefined; diff --git a/src/plugins/kibana_react/public/theme/types.ts b/src/plugins/kibana_react/public/theme/types.ts index 4da25b7f4890a..607fff70915d1 100644 --- a/src/plugins/kibana_react/public/theme/types.ts +++ b/src/plugins/kibana_react/public/theme/types.ts @@ -6,6 +6,6 @@ * Side Public License, v 1. */ -import type { useEuiTheme } from '@elastic/eui'; +import type { UseEuiTheme } from '@elastic/eui'; -export type EuiTheme = ReturnType; +export type EuiTheme = UseEuiTheme; diff --git a/src/plugins/kibana_react/public/theme/utils.ts b/src/plugins/kibana_react/public/theme/utils.ts index b3d2f8bc6bb30..161f3a5e36b76 100644 --- a/src/plugins/kibana_react/public/theme/utils.ts +++ b/src/plugins/kibana_react/public/theme/utils.ts @@ -6,13 +6,13 @@ * Side Public License, v 1. */ -import type { EuiThemeColorMode } from '@elastic/eui/src/services/theme/types'; +import { COLOR_MODES_STANDARD } from '@elastic/eui'; +import type { EuiThemeColorModeStandard } from '@elastic/eui'; import type { CoreTheme } from '../../../../core/public'; // IMPORTANT: This code has been copied to the `interactive_setup` plugin, any changes here should be applied there too. // That copy and this comment can be removed once https://github.com/elastic/kibana/issues/119204 is implemented. -export const getColorMode = (theme: CoreTheme): EuiThemeColorMode => { - // COLOR_MODES_STANDARD is not exported from eui - return theme.darkMode ? 'DARK' : 'LIGHT'; +export const getColorMode = (theme: CoreTheme): EuiThemeColorModeStandard => { + return theme.darkMode ? COLOR_MODES_STANDARD.dark : COLOR_MODES_STANDARD.light; }; diff --git a/src/plugins/kibana_react/public/util/to_mount_point.test.tsx b/src/plugins/kibana_react/public/util/to_mount_point.test.tsx index 7f5bd0789cb12..74566763d9215 100644 --- a/src/plugins/kibana_react/public/util/to_mount_point.test.tsx +++ b/src/plugins/kibana_react/public/util/to_mount_point.test.tsx @@ -10,11 +10,12 @@ import React, { FC, useEffect } from 'react'; import { act } from 'react-dom/test-utils'; import { of, BehaviorSubject } from 'rxjs'; import { useEuiTheme } from '@elastic/eui'; +import type { UseEuiTheme } from '@elastic/eui'; import type { CoreTheme } from 'src/core/public'; import { toMountPoint } from './to_mount_point'; describe('toMountPoint', () => { - let euiTheme: ReturnType | undefined; + let euiTheme: UseEuiTheme | undefined; beforeEach(() => { euiTheme = undefined; diff --git a/src/plugins/vis_types/table/public/components/__snapshots__/table_vis_basic.test.tsx.snap b/src/plugins/vis_types/table/public/components/__snapshots__/table_vis_basic.test.tsx.snap index 85cf9422630d6..767bd2a87d1f5 100644 --- a/src/plugins/vis_types/table/public/components/__snapshots__/table_vis_basic.test.tsx.snap +++ b/src/plugins/vis_types/table/public/components/__snapshots__/table_vis_basic.test.tsx.snap @@ -105,9 +105,9 @@ exports[`TableVisBasic should render the toolbar 1`] = ` rows={Array []} />, "showColumnSelector": false, + "showDisplaySelector": false, "showFullScreenSelector": false, "showSortSelector": false, - "showStyleSelector": false, } } /> diff --git a/src/plugins/vis_types/table/public/components/table_vis_basic.tsx b/src/plugins/vis_types/table/public/components/table_vis_basic.tsx index 2476c17c58a4d..adfeb9f5f614c 100644 --- a/src/plugins/vis_types/table/public/components/table_vis_basic.tsx +++ b/src/plugins/vis_types/table/public/components/table_vis_basic.tsx @@ -136,7 +136,7 @@ export const TableVisBasic = memo( showColumnSelector: false, showFullScreenSelector: false, showSortSelector: false, - showStyleSelector: false, + showDisplaySelector: false, additionalControls: ( @@ -67,10 +67,36 @@ exports[`Storyshots renderers/TimeFilter default 1`] = ` onClick={[Function]} > Last 1 year + + + +
+
+
@@ -129,7 +155,7 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = ` className="euiButtonEmpty__text euiQuickSelectPopover__buttonText" > @@ -188,6 +214,37 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
+
+
+ +
+
@@ -242,7 +299,7 @@ exports[`Storyshots renderers/TimeFilter with commonlyUsedRanges 1`] = ` className="euiButtonEmpty__text euiQuickSelectPopover__buttonText" > @@ -262,10 +319,36 @@ exports[`Storyshots renderers/TimeFilter with commonlyUsedRanges 1`] = ` onClick={[Function]} > Last 30 days + + + +
+
+
@@ -324,7 +407,7 @@ exports[`Storyshots renderers/TimeFilter with dateFormat 1`] = ` className="euiButtonEmpty__text euiQuickSelectPopover__buttonText" > @@ -344,10 +427,36 @@ exports[`Storyshots renderers/TimeFilter with dateFormat 1`] = ` onClick={[Function]} > Last 24 hours + +
+ +
+
+
@@ -406,7 +515,7 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = ` className="euiButtonEmpty__text euiQuickSelectPopover__buttonText" > @@ -465,6 +574,37 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
+
+
+ +
+
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot index 1277505d2d208..12ca14a0a6286 100644 --- a/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot +++ b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot @@ -899,9 +899,17 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = ` aria-label="Pagination for table: " className="euiPagination" > + + Page 1 of 1 +