@elastic/eui-docusaurus-theme 2.3.0 → 2.5.0-snapshot.1783939453438

package/lib/theme/PaginatorNavLink/index.js

@@ -39,5 +39,5 @@ export default function PaginatorNavLink(props) {
     const { permalink, title, subLabel, isNext } = props;
     const isPrev = !isNext;
     const styles = useEuiMemoizedStyles(getStyles);
-    return (_jsxs(Link, { className: clsx('pagination-nav__link', isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'), css: styles.link, to: permalink, children: [subLabel && _jsx("div", { className: "pagination-nav__sublabel", children: subLabel }), _jsxs("div", { className: "pagination-nav__label", children: [isPrev && _jsx(EuiIcon, { type: "arrowLeft" }), title, isNext && _jsx(EuiIcon, { type: "arrowRight" })] })] }));
+    return (_jsxs(Link, { className: clsx('pagination-nav__link', isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'), css: styles.link, to: permalink, children: [subLabel && _jsx("div", { className: "pagination-nav__sublabel", children: subLabel }), _jsxs("div", { className: "pagination-nav__label", children: [isPrev && _jsx(EuiIcon, { type: "chevronSingleLeft" }), title, isNext && _jsx(EuiIcon, { type: "chevronSingleRight" })] })] }));
 }

package/lib/theme/TOCCollapsible/CollapseButton/index.js

@@ -19,5 +19,5 @@ const getStyles = ({ euiTheme }) => {
 };
 export default function TOCCollapsibleCollapseButton({ collapsed, ...props }) {
     const styles = useEuiMemoizedStyles(getStyles);
-    return (_jsxs("button", { type: "button", ...props, className: clsx('clean-btn', props.className), css: styles.tocCollapsibleButton, children: [_jsx(Translate, { id: "theme.TOCCollapsible.toggleButtonLabel", description: "The label used by the button on the collapsible TOC component", children: "On this page" }), _jsx(EuiIcon, { type: collapsed ? 'arrowDown' : 'arrowUp' })] }));
+    return (_jsxs("button", { type: "button", ...props, className: clsx('clean-btn', props.className), css: styles.tocCollapsibleButton, children: [_jsx(Translate, { id: "theme.TOCCollapsible.toggleButtonLabel", description: "The label used by the button on the collapsible TOC component", children: "On this page" }), _jsx(EuiIcon, { type: collapsed ? 'chevronSingleDown' : 'chevronSingleUp' })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-docusaurus-theme",
-  "version": "2.3.0",
+  "version": "2.5.0-snapshot.1783939453438",
   "description": "EUI theme for Docusaurus",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -40,14 +40,14 @@
     "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/utils-validation": "^3.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^113.0.0",
-    "@elastic/eui-theme-borealis": "^6.0.0",
+    "@elastic/eui": "^117.0.0-snapshot.1783939453438",
+    "@elastic/eui-theme-borealis": "^8.0.0-snapshot.1783939453438",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@types/react-window": "^1.8.8",
     "clsx": "^2.1.1",
-    "codesandbox": "^2.2.3",
     "dedent": "^1.5.3",
+    "lz-string": "^1.5.0",
     "moment": "^2.30.1",
     "prism-react-renderer": "^2.3.1",
     "react-is": "^18.3.1",
@@ -57,5 +57,6 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
-  }
+  },
+  "stableVersion": "2.5.0"
 }

package/src/components/demo/actions_bar/actions_bar.tsx

@@ -23,6 +23,7 @@ export interface DemoActionsBarProps {
   activeSource: DemoSourceMeta | null;
   sources: DemoSourceMeta[];
   extraFiles?: ExtraFiles;
+  previewWrapperSource?: string;
   isSourceOpen: boolean;
   setSourceOpen(isOpen: boolean): void;
   onClickReloadExample(): void;
@@ -55,10 +56,13 @@ export const DemoActionsBar = ({
   activeSource,
   sources,
   extraFiles,
+  previewWrapperSource,
   onClickReloadExample,
   onClickCopyToClipboard,
 }: DemoActionsBarProps) => {
   const styles = useEuiMemoizedStyles(getDemoActionsBarStyles);
+  const copyToClipboardLabel = 'Copy to clipboard';
+  const reloadExampleLabel = 'Reload example';
 
   return (
     <EuiFlexGroup alignItems="center" css={styles.actionsBar} gutterSize="s">
@@ -73,27 +77,29 @@ export const DemoActionsBar = ({
       </EuiButton>
       {extraActions.map((ActionComponent) => (
         <ActionComponent
+          key={ActionComponent.displayName ?? ActionComponent.name}
           sources={sources}
           extraFiles={extraFiles}
+          previewWrapperSource={previewWrapperSource}
           activeSource={activeSource}
         />
       ))}
-      <EuiToolTip content="Copy to clipboard">
+      <EuiToolTip content={copyToClipboardLabel} disableScreenReaderOutput>
         <EuiButtonIcon
           size="s"
-          iconType="copyClipboard"
+          iconType="copy"
           color="text"
           onClick={onClickCopyToClipboard}
-          aria-label="Copy code to clipboard"
+          aria-label={copyToClipboardLabel}
         />
       </EuiToolTip>
-      <EuiToolTip content="Reload example">
+      <EuiToolTip content={reloadExampleLabel} disableScreenReaderOutput>
         <EuiButtonIcon
           size="s"
           iconType="refresh"
           color="text"
           onClick={onClickReloadExample}
-          aria-label="Reload example"
+          aria-label={reloadExampleLabel}
         />
       </EuiToolTip>
     </EuiFlexGroup>

package/src/components/demo/codesandbox/get_parameters.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+import { compressToBase64 } from 'lz-string';
+
+/**
+ * Encodes sandbox parameters for CodeSandbox's `define` API.
+ */
+export const getParameters = (parameters: unknown): string => {
+  return compressToBase64(JSON.stringify(parameters))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+};

package/src/components/demo/codesandbox/open_action.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useMemo } from 'react';
-import { getParameters } from 'codesandbox/lib/api/define';
+import { getParameters } from './get_parameters';
 import dedent from 'dedent';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import type { ActionComponent } from '../../../theme/Demo/actions';
@@ -34,7 +34,8 @@ const indexTsxSource = dedent`
     <EuiProvider cache={cache}>
       <Demo />
     </EuiProvider>
-  );`;
+  );
+`;
 
 const publicIndexHtmlSource = dedent`
   <head>
@@ -69,12 +70,29 @@ export type Options = {
 const processTsxSource = (source: string) => {
   // jsxImportSource pragma is needed in CodeSandbox as it doesn't seem
   // to support that setting via tsconfig.json
-  return `/** @jsxImportSource @emotion/react */\n${source}`;
+  let processed = `/** @jsxImportSource @emotion/react */\n${source}`;
+
+  // Inject `@elastic/charts` CSS for demos that use the charts library,
+  // since CodeSandbox doesn't load it globally unlike the docs site
+  if (source.includes('@elastic/charts')) {
+    // Match the closing line of the @elastic/charts import (handles both
+    // single-line and multi-line imports, and both quote styles)
+    processed = processed.replace(
+      /^(.*from ['"]@elastic\/charts['"];)$/m,
+      [
+        '$1',
+        "import '@elastic/charts/dist/theme_only_light.css';",
+        "import '@elastic/charts/dist/theme_only_dark.css';",
+      ].join('\n')
+    );
+  }
+
+  return processed;
 };
 
 export const createOpenInCodeSandboxAction =
   ({ files = {}, dependencies }: Options): ActionComponent =>
-  ({ extraFiles, activeSource }) => {
+  ({ extraFiles, activeSource, previewWrapperSource }) => {
     const parameters: string = useMemo(() => {
       const source = activeSource?.code || '';
 
@@ -93,6 +111,24 @@ export const createOpenInCodeSandboxAction =
       return getParameters({
         files: {
           ...defaultCodeSandboxParameters.files,
+          ...(previewWrapperSource
+            ? {
+                'index.tsx': {
+                  content: indexTsxSource
+                    .replace(
+                      "import Demo from './demo';",
+                      "import Demo from './demo';\nimport PreviewWrapper from './preview_wrapper';"
+                    )
+                    .replace(
+                      '<Demo />',
+                      '<PreviewWrapper>\n      <Demo />\n    </PreviewWrapper>'
+                    ),
+                },
+                'preview_wrapper.tsx': {
+                  content: processTsxSource(previewWrapperSource),
+                },
+              }
+            : {}),
           'demo.tsx': {
             content: processTsxSource(source),
           },
@@ -106,8 +142,10 @@ export const createOpenInCodeSandboxAction =
           },
           ...codeSandboxFiles,
         },
-      } as any);
-    }, [activeSource, extraFiles]);
+      });
+    }, [activeSource, extraFiles, previewWrapperSource]);
+
+    const openInCodeSandboxLabel = 'Open in CodeSandbox';
 
     return (
       <form
@@ -121,13 +159,13 @@ export const createOpenInCodeSandboxAction =
           name="query"
           value={`module=/demo.tsx&view=split`}
         />
-        <EuiToolTip content="Open in CodeSandbox">
+        <EuiToolTip content={openInCodeSandboxLabel} disableScreenReaderOutput>
           <EuiButtonIcon
             type="submit"
             size="s"
             iconType={CodeSandboxIcon}
             color="text"
-            aria-label="Open in CodeSandbox"
+            aria-label={openInCodeSandboxLabel}
           />
         </EuiToolTip>
       </form>

package/src/components/demo/demo.tsx

@@ -20,6 +20,7 @@ import {
   useEuiMemoizedStyles,
   copyToClipboard,
   UseEuiTheme,
+  useIsDarkMode,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { demoDefaultScope } from '@theme/Demo/default_scope';
@@ -79,6 +80,7 @@ export interface DemoProps extends PropsWithChildren {
   extraFiles?: ExtraFiles;
   previewPadding?: DemoPreviewProps['padding'];
   previewWrapper?: DemoPreviewProps['wrapperComponent'];
+  previewWrapperSource?: string;
 }
 
 const getDemoStyles = (euiTheme: UseEuiTheme) => ({
@@ -100,11 +102,14 @@ export const Demo = ({
   isSourceOpen: _isSourceOpen = false,
   previewPadding,
   previewWrapper,
+  previewWrapperSource,
 }: DemoProps) => {
   const styles = useEuiMemoizedStyles(getDemoStyles);
+  const isDarkMode = useIsDarkMode();
   const [sources, setSources] = useState<DemoSourceMeta[]>([]);
   const [isSourceOpen, setIsSourceOpen] = useState<boolean>(_isSourceOpen);
   const activeSource = sources[0] || null;
+  const prismTheme = isDarkMode ? prismThemes.dracula : prismThemes.github;
 
   // liveProviderKey restarts the demo to its initial state
   const [liveProviderKey, setLiveProviderKey] = useState<number>(0);
@@ -140,7 +145,7 @@ export const Demo = ({
           key={liveProviderKey}
           code={activeSource?.code || ''}
           transformCode={demoCodeTransformer}
-          theme={prismThemes.dracula}
+          theme={prismTheme}
           scope={finalScope}
         >
           <DemoPreview
@@ -153,6 +158,7 @@ export const Demo = ({
             activeSource={activeSource}
             extraFiles={extraFiles}
             sources={sources}
+            previewWrapperSource={previewWrapperSource}
             onClickCopyToClipboard={onClickCopyToClipboard}
             onClickReloadExample={onClickReloadExample}
           />

package/src/components/demo/preview/preview.tsx

@@ -21,6 +21,7 @@ import {
   UseEuiTheme,
   useEuiTheme,
   EuiPaddingSize,
+  EuiThemeProvider,
   euiPaddingSize,
 } from '@elastic/eui';
 
@@ -65,9 +66,14 @@ export const DemoPreview = ({
             )}
           >
             <div css={styles.previewWrapper} style={style}>
-              <WrapperComponent>
-                <LivePreview />
-              </WrapperComponent>
+              {/* Use the theme's actual default instead of docs global `lineHeightMultiplier` override */}
+              <EuiThemeProvider
+                modify={{ font: { lineHeightMultiplier: 1.5 } }}
+              >
+                <WrapperComponent>
+                  <LivePreview />
+                </WrapperComponent>
+              </EuiThemeProvider>
             </div>
           </ErrorBoundary>
         </>

package/src/components/navbar_item/index.tsx

@@ -12,9 +12,9 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import {
   CommonProps,
   EuiIcon,
+  EuiToolTip,
   ExclusiveUnion,
   IconType,
-  mathWithUnits,
   PropsForAnchor,
   PropsForButton,
   useEuiMemoizedStyles,
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui';
 
 import { AppThemeContext } from '../theme_context';
+import { getNavbarBreakpoint } from '../../theme/Navbar/breakpoint';
 
 type SharedProps = {
   icon: IconType;
@@ -36,55 +37,63 @@ type Props = ExclusiveUnion<
 >;
 
 // converted from css modules to Emotion
-export const getStyles = ({ euiTheme }: UseEuiTheme) => ({
-  item: css`
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-
-    -webkit-tap-highlight-color: transparent;
-    transition: background var(--ifm-transition-fast);
-
-    &:hover {
-      background-color: ${euiTheme.components.buttons.backgroundTextHover};
-      color: currentColor;
-    }
-  `,
-  navItem: css`
-    justify-content: center;
-    width: ${euiTheme.size.xl};
-    height: ${euiTheme.size.xl};
-    border-radius: 50%;
-  `,
-  menuItem: css`
-    justify-content: flex-start;
-    gap: ${euiTheme.size.s};
-
-    @media (min-width: 997px) {
+export const getStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { desktopMediaQuery } = getNavbarBreakpoint(euiThemeContext);
+
+  return {
+    item: css`
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+
+      -webkit-tap-highlight-color: transparent;
+      transition: background var(--ifm-transition-fast);
+
+      &:hover {
+        background-color: ${euiTheme.components.buttons.backgroundTextHover};
+        color: currentColor;
+      }
+    `,
+    navItem: css`
       justify-content: center;
       width: ${euiTheme.size.xl};
       height: ${euiTheme.size.xl};
       border-radius: 50%;
-    }
-  `,
-  darkMode: css`
-    &:hover {
-      color: currentColor;
-    }
-  `,
-  disabled: css`
-    cursor: not-allowed;
-  `,
-  selected: css`
-    background-color: ${euiTheme.colors.backgroundFilledText};
-    color: ${euiTheme.colors.textInverse};
-  `,
-  title: css`
-    @media (min-width: 997px) {
-      display: none;
-    }
-  `,
-});
+    `,
+    menuItem: css`
+      justify-content: flex-start;
+      gap: ${euiTheme.size.s};
+
+      ${desktopMediaQuery} {
+        justify-content: center;
+        width: ${euiTheme.size.xl};
+        height: ${euiTheme.size.xl};
+        border-radius: 50%;
+      }
+    `,
+    darkMode: css`
+      &:hover {
+        color: currentColor;
+      }
+    `,
+    disabled: css`
+      cursor: not-allowed;
+    `,
+    selected: css`
+      background-color: ${euiTheme.colors.backgroundFilledText};
+      color: ${euiTheme.colors.textInverse};
+    `,
+    title: css`
+      ${desktopMediaQuery} {
+        display: none;
+      }
+    `,
+    tooltipAnchor: css`
+      display: inline-flex;
+    `,
+  };
+};
 
 // using a type guard to ensure proper typing from ExclusiveUnion
 const isAnchorClick = (
@@ -118,6 +127,7 @@ export const NavbarItem = (props: Props) => {
     !isBrowser && styles.disabled,
     isSelected && styles.selected,
     isDarkMode && styles.darkMode,
+    css,
   ];
 
   const content = showLabel ? (
@@ -129,31 +139,25 @@ export const NavbarItem = (props: Props) => {
     <EuiIcon type={icon} />
   );
 
-  if (isAnchorClick(onClick, href)) {
-    return (
-      <a
-        href={href}
-        target={target ?? '_blank'}
-        title={title}
-        className={className}
-        css={cssStyles}
-        onClick={onClick}
-        aria-label={title}
-        aria-live="polite"
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
+  const control = isAnchorClick(onClick, href) ? (
+    <a
+      href={href}
+      target={target ?? '_blank'}
+      className={className}
+      css={cssStyles}
+      onClick={onClick}
+      aria-label={title}
+      aria-live="polite"
+    >
+      {content}
+    </a>
+  ) : (
     <button
       type="button"
       disabled={!isBrowser}
       className={className}
       css={cssStyles}
       onClick={onClick}
-      title={title}
       aria-label={title}
       aria-live="polite"
       aria-pressed={isSelected != null ? isSelected : undefined}
@@ -161,4 +165,19 @@ export const NavbarItem = (props: Props) => {
       {content}
     </button>
   );
+
+  if (!title) {
+    return control;
+  }
+
+  return (
+    <EuiToolTip
+      content={title}
+      disableScreenReaderOutput
+      repositionOnScroll
+      anchorProps={{ css: styles.tooltipAnchor }}
+    >
+      {control}
+    </EuiToolTip>
+  );
 };

package/src/components/version_switcher/index.tsx

@@ -123,7 +123,7 @@ export const VersionSwitcher = ({
     <EuiButtonEmpty
       size="s"
       color="text"
-      iconType="arrowDown"
+      iconType="chevronSingleDown"
       iconSide="right"
       css={styles.button}
       onClick={() => setPopoverOpen((isOpen) => !isOpen)}
@@ -157,15 +157,15 @@ export const VersionSwitcher = ({
           const isCurrentVersion = version === currentVersion;
           const screenReaderVersion = pronounceVersion(version!);
 
-          const url = version === latestVersion
-            ? `${previousVersionUrl}/`
-            : `${previousVersionUrl}/v${version}/`;
+          const url =
+            version === latestVersion
+              ? `${previousVersionUrl}/`
+              : `${previousVersionUrl}/v${version}/`;
 
           return (
             <EuiListGroupItem
               css={styles.listItem}
               style={style}
-              size="xs"
               label={`v${version}`}
               aria-label={screenReaderVersion}
               href={url}

package/src/theme/Admonition/Types.tsx

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { EuiCallOut, EuiText } from '@elastic/eui';
+import { EuiCallOut } from '@elastic/eui';
 import type { Props } from '@theme-original/Admonition';
 import type AdmonitionTypes from '@theme-original/Admonition/Types';
 
@@ -22,17 +22,17 @@ type CalloutVariant =
   | 'important'
   | 'success'
   | 'caution';
-type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+type VariantColor = 'primary' | 'success' | 'warning' | 'danger';
 
 const VARIANT_TO_PROPS_MAP: Record<
   CalloutVariant,
   { iconType?: string; color?: VariantColor }
 > = {
-  note: { iconType: 'paperClip', color: 'accent' },
+  note: { iconType: 'paperClip', color: 'primary' },
   tip: { iconType: 'faceHappy', color: 'success' },
   info: { iconType: 'info', color: 'primary' },
   accessibility: { iconType: 'accessibility', color: 'primary' },
-  warning: { iconType: 'alert', color: 'warning' },
+  warning: { iconType: 'warning', color: 'warning' },
   danger: { iconType: 'error', color: 'danger' },
   // Undocumented legacy admonition type aliases
   secondary: {},
@@ -56,7 +56,6 @@ const Callout = ({ title, type, children }: Props) => {
   return (
     <EuiCallOut
       title={title}
-      iconType="info"
       color="primary"
       {...variantProps}
       css={css`

package/src/theme/CodeBlock/index.tsx

@@ -8,11 +8,18 @@
 
 import React, { isValidElement, type ReactNode, JSX } from 'react';
 import { css } from '@emotion/react';
-import { EuiCodeBlock } from '@elastic/eui';
+import { EuiCodeBlock, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
 import type { Props } from '@theme/CodeBlock';
 
 import { Demo } from '../../components/demo';
 
+const getStyles = ({ euiTheme }: UseEuiTheme) => ({
+  codeBlock: css`
+    margin-block: ${euiTheme.size.base};
+    word-break: break-word;
+  `,
+});
+
 /**
  * Best attempt to make the children a plain string so it is copyable. If there
  * are react elements, we will not be able to copy the content, and it will
@@ -35,21 +42,24 @@ export default function CodeBlock({
 }: Props): JSX.Element {
   const children = maybeStringifyChildren(rawChildren);
   const language = className?.replace('language-', '') || undefined;
+  const styles = useEuiMemoizedStyles(getStyles);
 
   if (metastring?.startsWith('interactive')) {
     return <Demo {...props}>{children}</Demo>;
   }
 
+  // Don't show the fullscreen button for one-liner snippets
+  const isOneLiner =
+    typeof children === 'string' && !children.trim().includes('\n');
+
   return (
     <EuiCodeBlock
       {...props}
       fontSize="m"
-      overflowHeight={450}
+      overflowHeight={isOneLiner ? undefined : 450}
       language={language}
       isCopyable
-      css={css`
-        word-break: break-word;
-      `}
+      css={styles.codeBlock}
     >
       {children}
     </EuiCodeBlock>

package/src/theme/Demo/actions.tsx

@@ -14,6 +14,7 @@ export type ActionComponentProps = {
   activeSource: DemoSourceMeta | null;
   sources: DemoSourceMeta[];
   extraFiles?: ExtraFiles;
+  previewWrapperSource?: string;
 };
 
 export type ActionComponent = ComponentType<ActionComponentProps>;

package/src/theme/DocBreadcrumbs/Items/Home/index.tsx

@@ -35,7 +35,7 @@ export default function HomeBreadcrumbItem(): JSX.Element {
       >
         {title}
       </Link>
-      <EuiIcon type="arrowRight" size="s" css={styles.icon} />
+      <EuiIcon type="chevronSingleRight" size="s" css={styles.icon} />
     </li>
   );
 }

package/src/theme/DocBreadcrumbs/index.tsx

@@ -88,7 +88,7 @@ function BreadcrumbsItem({
     >
       {children}
       <meta itemProp="position" content={String(index + 1)} />
-      {!active && <EuiIcon type="arrowRight" css={styles.icon} />}
+      {!active && <EuiIcon type="chevronSingleRight" css={styles.icon} />}
     </li>
   );
 }

package/src/theme/DocCard/index.tsx

@@ -75,8 +75,8 @@ function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode {
 }
 
 function CardLink({ item }: { item: PropSidebarItemLink }): ReactNode {
-  // We update Docusaurus `link` icon to EUI `popout` icon
-  const icon = isInternalUrl(item.href) ? 'document' : 'popout';
+  // We update Docusaurus `link` icon to EUI `external` icon
+  const icon = isInternalUrl(item.href) ? 'document' : 'external';
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout