diff --git a/elastic_eui_95_10_1_vr_button_options_02.tgz b/elastic_eui_95_10_1_vr_button_options_02.tgz new file mode 100644 index 0000000000000..8180ab5ce0e0b Binary files /dev/null and b/elastic_eui_95_10_1_vr_button_options_02.tgz differ diff --git a/elastic_eui_95_10_1_vr_button_options_03.tgz b/elastic_eui_95_10_1_vr_button_options_03.tgz new file mode 100644 index 0000000000000..7b9773288bb06 Binary files /dev/null and b/elastic_eui_95_10_1_vr_button_options_03.tgz differ diff --git a/elastic_eui_95_10_1_vr_button_options_06.tgz b/elastic_eui_95_10_1_vr_button_options_06.tgz new file mode 100644 index 0000000000000..82dd0ac988e28 Binary files /dev/null and b/elastic_eui_95_10_1_vr_button_options_06.tgz differ diff --git a/elastic_eui_95_10_1_vr_button_options_07.tgz b/elastic_eui_95_10_1_vr_button_options_07.tgz new file mode 100644 index 0000000000000..2455ddffa52ea Binary files /dev/null and b/elastic_eui_95_10_1_vr_button_options_07.tgz differ diff --git a/package.json b/package.json index d8a83da6a8755..3b8bd94ba32a7 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "@elastic/ecs": "^8.11.1", "@elastic/elasticsearch": "^8.15.0", "@elastic/ems-client": "8.5.3", - "@elastic/eui": "95.10.1", + "@elastic/eui": "./elastic_eui_95_10_1_vr_button_options_07.tgz", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/react/kibana_context/root/eui_provider.tsx b/packages/react/kibana_context/root/eui_provider.tsx index 74b2f6d8605ab..25a92951e28fc 100644 --- a/packages/react/kibana_context/root/eui_provider.tsx +++ b/packages/react/kibana_context/root/eui_provider.tsx @@ -11,11 +11,37 @@ import React, { FC, PropsWithChildren, useMemo } from 'react'; import useObservable from 'react-use/lib/useObservable'; import createCache from '@emotion/cache'; -import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui'; +import { + EuiProvider, + EuiProviderProps, + euiStylisPrefixer, + EuiThemeNewButtonOption1, + EuiThemeNewButtonOption2_1, + EuiThemeNewButtonOption2_2, + EuiThemeNewButtonOption3, + EuiThemeNewButtonOption4, + EuiThemeShape, +} from '@elastic/eui'; + import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common'; import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common'; import { ThemeServiceStart } from '@kbn/react-kibana-context-common'; +const BUTTON_KEY_TO_THEME_MAP: Record< + string, + { + model: EuiThemeShape; + root: EuiThemeShape; + key: string; + } +> = { + '1': EuiThemeNewButtonOption1, + '2.1': EuiThemeNewButtonOption2_1, + '2.2': EuiThemeNewButtonOption2_2, + '3': EuiThemeNewButtonOption3, + '4': EuiThemeNewButtonOption4, +}; + /** * Props for the KibanaEuiProvider. */ @@ -67,6 +93,11 @@ export const KibanaEuiProvider: FC> = const theme = useObservable(theme$, defaultTheme); const themeColorMode = useMemo(() => getColorMode(theme), [theme]); + const selectedButtonOption = localStorage.getItem('kbn-theme-button-option'); + const selectedCustomTheme = selectedButtonOption + ? BUTTON_KEY_TO_THEME_MAP[selectedButtonOption] + : undefined; + // In some cases-- like in Storybook or testing-- we want to explicitly override the // colorMode provided by the `theme`. const colorMode = colorModeProp || themeColorMode; @@ -75,8 +106,19 @@ export const KibanaEuiProvider: FC> = // elsewhere. Should be a passive addition to anyone using the older theme provider(s). const globalStyles = globalStylesProp === false ? false : undefined; + const customThemeProps = selectedCustomTheme && { theme: selectedCustomTheme }; + return ( - + {children} ); diff --git a/packages/react/kibana_context/root/root_provider.tsx b/packages/react/kibana_context/root/root_provider.tsx index f2c109fc62835..2541f530387c0 100644 --- a/packages/react/kibana_context/root/root_provider.tsx +++ b/packages/react/kibana_context/root/root_provider.tsx @@ -48,6 +48,16 @@ export const KibanaRootContextProvider: FC { const hasEuiProvider = useIsNestedEuiProvider(); + const overrides = JSON.parse(localStorage.getItem('kbn-theme-overrides') || '{}'); + + const enhancedProps = { + ...props, + modify: { + ...props.modify, + ...overrides, + }, + }; + if (hasEuiProvider) { emitEuiProviderWarning( 'KibanaRootContextProvider has likely been nested in this React tree, either by direct reference or by KibanaRenderContextProvider. The result of this nesting is a nesting of EuiProvider, which has negative effects. Check your React tree for nested Kibana context providers.' @@ -55,7 +65,7 @@ export const KibanaRootContextProvider: FC{children}; } else { return ( - + {children} ); diff --git a/yarn.lock b/yarn.lock index d57afd7e910c7..8dbd16d53edcc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1741,10 +1741,9 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@95.10.1": +"@elastic/eui@./elastic_eui_95_10_1_vr_button_options_07.tgz": version "95.10.1" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.10.1.tgz#f3fb356ad49ba45e42981e39748693ba392567fe" - integrity sha512-1kqyx/NfiQE/bKMf1E3uJEpYZnQnPBrI5zO0l2FB+fs7Naf7wT7zq1VFRzNLn/r1x6mnou8wJ+VlouHCI+prLw== + resolved "./elastic_eui_95_10_1_vr_button_options_07.tgz#06041a26e4e99a6da682faccfd8678d07e8b4627" dependencies: "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202"