[8.x] [Embeddable] EUI Visual Refresh Integration (#204452) (#208565)

# Backport This will backport the following commits from `main` to `8.x`: - [[Embeddable] EUI Visual Refresh Integration (#204452)](https://github.com/elastic/kibana/pull/204452)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-23 01:13:23 -04:00 · 2025-01-29 11:47:30 -08:00 · 2025-01-29 11:47:30 -08:00 · 6fdd9fc9d7
commit 6fdd9fc9d7
parent 89fe701d70
5 changed files with 20 additions and 13 deletions
--- a/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx
@ -7,7 +7,7 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import { EuiMarkdownEditor, EuiMarkdownFormat } from '@elastic/eui';
+import { EuiMarkdownEditor, EuiMarkdownFormat, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
@ -16,7 +16,6 @@ import {
  useInheritedViewMode,
  useStateFromPublishingSubject,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { EUI_MARKDOWN_ID } from './constants';
@ -80,6 +79,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
        // get state for rendering
        const content = useStateFromPublishingSubject(content$);
        const viewMode = useInheritedViewMode(api) ?? 'view';
+        const { euiTheme } = useEuiTheme();

        return viewMode === 'edit' ? (
          <EuiMarkdownEditor
@ -96,7 +96,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
        ) : (
          <EuiMarkdownFormat
            css={css`
-              padding: ${euiThemeVars.euiSizeM};
+              padding: ${euiTheme.size.m};
            `}
          >
            {content ?? ''}
--- a/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx
@ -7,7 +7,7 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { Reference } from '@kbn/content-management-utils';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
@ -17,7 +17,6 @@ import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { initializeTitleManager, useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyDataViewPicker, withSuspense } from '@kbn/presentation-util-plugin/public';
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
  UnifiedFieldListSidebarContainer,
  type UnifiedFieldListSidebarContainerProps,
@ -150,6 +149,7 @@ export const getFieldListFactory = (
            dataViews$,
            selectedFieldNames$
          );
+          const { euiTheme } = useEuiTheme();

          const selectedDataView = renderDataViews?.[0];

@ -165,7 +165,7 @@ export const getFieldListFactory = (
              <EuiFlexItem
                grow={false}
                css={css`
-                  padding: ${euiThemeVars.euiSizeS};
+                  padding: ${euiTheme.size.s};
                `}
              >
                <DataViewPicker
--- a/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx
@ -7,7 +7,15 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import { EuiBadge, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@ -20,7 +28,6 @@ import {
  SerializedPanelState,
  useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 import { PresentationContainer } from '@kbn/presentation-containers';
 import { serializeBookAttributes, stateManagerFromAttributes } from './book_state';
@ -156,6 +163,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
      return {
        api,
        Component: () => {
+          const { euiTheme } = useEuiTheme();
          const [authorName, numberOfPages, bookTitle, synopsis] = useBatchedPublishingSubjects(
            bookAttributesManager.authorName,
            bookAttributesManager.numberOfPages,
@ -187,7 +195,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
              )}
              <div
                css={css`
-                  padding: ${euiThemeVars.euiSizeM};
+                  padding: ${euiTheme.size.m};
                `}
              >
                <EuiFlexGroup
--- a/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx
@ -7,7 +7,7 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import { EuiBadge, EuiStat } from '@elastic/eui';
+import { EuiBadge, EuiStat, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@ -17,7 +17,6 @@ import {
  initializeTimeRange,
  useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { useEffect } from 'react';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
 import { SEARCH_EMBEDDABLE_ID } from './constants';
@ -124,6 +123,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
        api,
        Component: () => {
          const [count, error] = useBatchedPublishingSubjects(count$, blockingError$);
+          const { euiTheme } = useEuiTheme();

          useEffect(() => {
            return () => {
@ -138,7 +138,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
            <div
              css={css`
                width: 100%;
-                padding: ${euiThemeVars.euiSizeM};
+                padding: ${euiTheme.size.m};
              `}
            >
              <EuiStat
--- a/examples/embeddable_examples/tsconfig.json
+++ b/examples/embeddable_examples/tsconfig.json
@ -18,7 +18,6 @@
    "@kbn/dashboard-plugin",
    "@kbn/embeddable-plugin",
    "@kbn/presentation-publishing",
-    "@kbn/ui-theme",
    "@kbn/i18n",
    "@kbn/es-query",
    "@kbn/data-views-plugin",