[Discover] Align SCSS - Emotion migration part 2 with new guidelines (#224586)

## Summary This pull requests aligns previous SCSS refactor part 2 ([[Discover] SCSS to Emotions migration part 2/4](https://github.com/elastic/kibana/pull/214729/files#top)) with new [Emotion standards](https://docs.google.com/document/d/1CPflY8yCc3lZDg2BQkaMTgIkZlqiAEyMcAAvZbsjcTc/edit?pli=1&tab=t.0#heading=h.4zj1jq66y5an), so the code is easier to read, maintain and unified across Discover.
2025-06-27 18:51:07 -04:00 · 2025-06-25 16:00:47 +02:00 · 2025-06-25 16:00:47 +02:00 · 96e6dd5fa2
commit 96e6dd5fa2
parent 1184cc2832
4 changed files with 114 additions and 107 deletions
--- a/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.tsx
+++ b/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.tsx
@ -20,6 +20,8 @@ import {
  EuiSpacer,
  type UseEuiTheme,
 } from '@elastic/eui';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
+
 import { ActionBarWarning } from './action_bar_warning';
 import { SurrDocType } from '../../services/context';
 import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../services/constants';
@ -70,6 +72,8 @@ export function ActionBar({
  onChangeCount,
  type,
 }: ActionBarProps) {
+  const styles = useMemoCss(componentStyles);
+
  const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
  const isSuccessor = type === SurrDocType.SUCCESSORS;
  const [newDocCount, setNewDocCount] = useState(docCount);
@ -122,7 +126,7 @@ export function ActionBar({
                    })
              }
              compressed
-              css={cxtSizePickerCss}
+              css={styles.cxtSizePicker}
              data-test-subj={`${type}CountPicker`}
              disabled={isDisabled}
              min={MIN_CONTEXT_SIZE}
@ -163,13 +167,15 @@ export function ActionBar({
  );
 }

-const cxtSizePickerCss = ({ euiTheme }: UseEuiTheme) => css`
-  text-align: center;
-  width: calc(${euiTheme.size.base} * 5);
+const componentStyles = {
+  cxtSizePicker: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      textAlign: 'center',
+      width: `calc(${euiTheme.size.base} * 5)`,

-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    appearance: none; // Hide increment and decrement buttons for type="number" input.
-    margin: 0;
-  }
-`;
+      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+        appearance: 'none', // Hide increment and decrement buttons for type="number" input.
+        margin: 0,
+      },
+    }),
+};
--- a/src/platform/plugins/shared/discover/public/application/context/context_app.tsx
+++ b/src/platform/plugins/shared/discover/public/application/context/context_app.tsx
@ -14,11 +14,12 @@ import {
  EuiPage,
  EuiPageBody,
  EuiSpacer,
-  useEuiPaddingSize,
-  useEuiTheme,
+  euiPaddingSize,
+  type UseEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { cloneDeep } from 'lodash';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
 import { generateFilters } from '@kbn/data-plugin/public';
@ -50,7 +51,8 @@ export interface ContextAppProps {
 }

 export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) => {
-  const { euiTheme } = useEuiTheme();
+  const styles = useMemoCss(componentStyles);
+
  const services = useDiscoverServices();
  const {
    analytics,
@ -246,8 +248,6 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
    };
  };

-  const titlePadding = useEuiPaddingSize('m');
-
  return (
    <Fragment>
      {fetchedState.anchorStatus.value === LoadingStatus.FAILED ? (
@ -272,28 +272,12 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
              css={styles.docsContent}
              panelProps={{ role: 'main' }}
            >
-              <EuiText
-                data-test-subj="contextDocumentSurroundingHeader"
-                css={css`
-                  padding: ${titlePadding} ${titlePadding} 0;
-                  font-weight: ${euiTheme.font.weight.bold};
-                `}
-              >
+              <EuiText data-test-subj="contextDocumentSurroundingHeader" css={styles.title}>
                <FormattedMessage
                  id="discover.context.contextOfTitle"
                  defaultMessage="Documents surrounding {anchorId}"
                  values={{
-                    anchorId: (
-                      <span
-                        css={css`
-                          background-color: ${euiTheme.colors.backgroundBaseWarning};
-                          color: ${euiTheme.colors.textWarning};
-                          padding: 0 ${euiTheme.size.xs};
-                        `}
-                      >
-                        #{anchorId}
-                      </span>
-                    ),
+                    anchorId: <span css={styles.documentId}>#{anchorId}</span>,
                  }}
                />
              </EuiText>
@ -325,11 +309,26 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
  );
 };

-const styles = {
+const componentStyles = {
  docsContent: css({
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
  }),
  docsPage: kbnFullBodyHeightCss('54px'), // 54px is the action bar height
+  title: (themeContext: UseEuiTheme) => {
+    const { euiTheme } = themeContext;
+    const titlePadding = euiPaddingSize(themeContext, 's');
+
+    return css({
+      padding: `${titlePadding} ${titlePadding} 0`,
+      fontWeight: euiTheme.font.weight.bold,
+    });
+  },
+  documentId: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      backgroundColor: euiTheme.colors.backgroundBaseWarning,
+      color: euiTheme.colors.textWarning,
+      padding: `0 ${euiTheme.size.xs}`,
+    }),
 };
--- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx
@ -380,7 +380,7 @@ function DiscoverDocumentsComponent({
          size="xs"
          color="accent"
          position="absolute"
-          css={progressStyle}
+          css={styles.progress}
        />
      ) : null,
    [isDataLoading]
@ -411,7 +411,7 @@ function DiscoverDocumentsComponent({
  if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) {
    return (
      // class is used in tests
-      <div className="dscDocuments__loading" css={dscDocumentsLoadingCss}>
+      <div className="dscDocuments__loading" css={styles.dscDocumentsLoading}>
        <EuiText size="xs" color="subdued">
          <EuiLoadingSpinner />
          <EuiSpacer size="s" />
@ -423,7 +423,7 @@ function DiscoverDocumentsComponent({

  return (
    // class is used in tests
-    <EuiFlexItem className="dscTable" aria-labelledby="documentsAriaLabel" css={containerStyles}>
+    <EuiFlexItem className="dscTable" aria-labelledby="documentsAriaLabel" css={styles.container}>
      <EuiScreenReaderOnly>
        <h2 id="documentsAriaLabel">
          <FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />
@ -499,20 +499,20 @@ function DiscoverDocumentsComponent({

 export const DiscoverDocuments = memo(DiscoverDocumentsComponent);

-const containerStyles = css`
-  position: relative;
-  min-height: 0;
-`;
-
-const progressStyle = css`
-  z-index: 2;
-`;
-
-const dscDocumentsLoadingCss = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-  width: 100%;
-`;
+const styles = {
+  container: css({
+    position: 'relative',
+    minHeight: 0,
+  }),
+  progress: css({
+    zIndex: 2,
+  }),
+  dscDocumentsLoading: css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    textAlign: 'center',
+    height: '100%',
+    width: '100%',
+  }),
+};
--- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx
@ -15,8 +15,8 @@ import {
  EuiPanel,
  EuiProgress,
  EuiDelayRender,
-  useEuiTheme,
  useEuiBreakpoint,
+  type UseEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@ -32,6 +32,7 @@ import { popularizeField, useColumns } from '@kbn/unified-data-table';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { BehaviorSubject } from 'rxjs';
 import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { kbnFullBodyHeightCss } from '@kbn/css-utils/public/full_body_height_css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useSavedSearchInitial } from '../../state_management/discover_state_provider';
@ -91,8 +92,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
    ebtManager,
    fieldsMetadata,
  } = useDiscoverServices();
-  const { euiTheme } = useEuiTheme();
-  const pageBackgroundColor = euiTheme.colors.backgroundBasePlain;
+  const styles = useMemoCss(componentStyles);
+
  const globalQueryState = data.query.getState();
  const { main$ } = stateContainer.dataState.data$;
  const [query, savedQuery, columns, sort, grid] = useAppStateSelector((state) => [
@ -372,15 +373,14 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
      className="dscPage" // class is used in tests and other styles
      data-fetch-counter={fetchCounter.current}
      direction="column"
-      css={css`
-        overflow: hidden;
-        padding: 0;
-        background-color: ${pageBackgroundColor};
-
+      css={[
+        styles.DscPage,
+        css`
          ${useEuiBreakpoint(['m', 'l', 'xl'])} {
            ${kbnFullBodyHeightCss(TABS_ENABLED ? '32px' : undefined)}
          }
-      `}
+        `,
+      ]}
    >
      <h1
        id="savedSearchTitle"
@ -407,19 +407,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
        isLoading={isLoading}
        onCancelClick={onCancelClick}
      />
-      <EuiPageBody
-        aria-describedby="savedSearchTitle"
-        css={css`
-          overflow: hidden;
-        `}
-      >
-        <div
-          ref={setSidebarContainer}
-          css={css`
-            width: 100%;
-            height: 100%;
-          `}
-        >
+      <EuiPageBody aria-describedby="savedSearchTitle" css={styles.savedSearchTitle}>
+        <div ref={setSidebarContainer} css={styles.sidebarContainer}>
          {dataViewLoading && (
            <EuiDelayRender delay={300}>
              <EuiProgress size="xs" color="accent" position="absolute" />
@ -450,15 +439,11 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
              />
            }
            mainPanel={
-              <div css={dscPageContentWrapperCss}>
+              <div css={styles.dscPageContentWrapper}>
                {resultState === 'none' ? (
                  <>
                    {React.isValidElement(panelsToggle) ? (
-                      <div
-                        css={css`
-                          padding: ${euiTheme.size.s};
-                        `}
-                      >
+                      <div css={styles.mainPanel}>
                        {React.cloneElement(panelsToggle, {
                          renderedFor: 'prompt',
                          isChartAvailable: false,
@ -496,7 +481,7 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
                    hasShadow={false}
                    hasBorder={false}
                    color="transparent"
-                    css={[dscPageContentCss, contentCentered && dscPageContentCenteredCss]}
+                    css={[styles.dscPageContent, contentCentered && styles.dscPageContentCentered]}
                  >
                    {mainDisplay}
                  </EuiPanel>
@ -525,24 +510,41 @@ const getOperator = (fieldName: string, values: unknown, operation: '+' | '-') =
  return operation;
 };

-const dscPageContentWrapperCss = css`
-  overflow: hidden; // Ensures horizontal scroll of table
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-const dscPageContentCss = css`
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-`;
-
-const dscPageContentCenteredCss = css`
-  width: auto;
-  height: auto;
-  align-self: center;
-  margin-top: auto;
-  margin-bottom: auto;
-  flex-grow: 0;
-`;
+const componentStyles = {
+  dscPage: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      overflow: 'hidden',
+      padding: 0,
+      backgroundColor: euiTheme.colors.backgroundBasePlain,
+    }),
+  savedSearchTitle: css({
+    overflow: 'hidden',
+  }),
+  sidebarContainer: css({
+    width: '100%',
+    height: '100%',
+  }),
+  mainPanel: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      padding: euiTheme.size.s,
+    }),
+  dscPageContentWrapper: css({
+    overflow: 'hidden', // Ensures horizontal scroll of table
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+  }),
+  dscPageContent: css({
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+  }),
+  dscPageContentCentered: css({
+    width: 'auto',
+    height: 'auto',
+    alignSelf: 'center',
+    marginTop: 'auto',
+    marginBottom: 'auto',
+    flexGrow: 0,
+  }),
+};