@elastic/eui-docusaurus-theme 2.4.0 → 2.5.0-snapshot.1783954480414

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/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,13 +22,13 @@ 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' },
@@ -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/Heading/index.tsx

@@ -11,6 +11,7 @@ import { Props as HeadingProps } from '@theme/Heading';
 import {
   EuiTitle,
   EuiButtonIcon,
+  EuiToolTip,
   UseEuiTheme,
   EuiTitleProps,
   useEuiMemoizedStyles,
@@ -76,15 +77,16 @@ const Heading = ({
       >
         {children}
         {shouldShowSectionLink && (
-          <EuiButtonIcon
-            css={styles.anchor}
-            href={`#${id}`}
-            aria-label={anchorTitle}
-            title={anchorTitle}
-            iconType="link"
-            color="text"
-            size="xs"
-          />
+          <EuiToolTip content={anchorTitle} disableScreenReaderOutput>
+            <EuiButtonIcon
+              css={styles.anchor}
+              href={`#${id}`}
+              aria-label={anchorTitle}
+              iconType="link"
+              color="text"
+              size="xs"
+            />
+          </EuiToolTip>
         )}
       </Component>
     </EuiTitle>

package/src/theme/Navbar/Content/index.tsx

@@ -40,6 +40,7 @@ import {
   VersionSwitcherProps,
 } from '../../../components/version_switcher';
 import { HighContrastModeToggle } from '../../../components/high_contrast_mode_toggle';
+import { getNavbarBreakpoint } from '../breakpoint';
 
 const DOCS_PATH = '/docs';
 
@@ -54,6 +55,8 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   const form = euiFormVariables(euiThemeContext);
   const iconColor = encodeURIComponent(euiTheme.colors.text);
+  const { desktopMediaQuery, mobileMediaQuery } =
+    getNavbarBreakpoint(euiThemeContext);
 
   return {
     navbarItems: css`
@@ -62,7 +65,7 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
 
       .navbar__item,
       [class*='colorModeToggle'] {
-        @media (max-width: 996px) {
+        ${mobileMediaQuery} {
           display: none;
         }
       }
@@ -74,12 +77,16 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
           background-color: var(--ifm-color-emphasis-200);
           color: currentColor;
         }
+
+        ${mobileMediaQuery} {
+          display: inherit;
+        }
       }
     `,
     navbarItemsLeft: css`
       gap: ${euiTheme.size.s};
 
-      @media (min-width: 997px) {
+      ${desktopMediaQuery} {
         gap: ${euiTheme.size.l};
       }
 
@@ -91,7 +98,7 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
       gap: ${euiTheme.size.s};
     `,
     actions: css`
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,
@@ -130,22 +137,18 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
           max-inline-size: 25rem;
         }
 
-        @media (min-width: 997px) {
+        ${desktopMediaQuery} {
           min-inline-size: 15rem;
         }
-
-        @media (min-width: 1200px) {
-          min-inline-size: 25rem;
-        }
       }
     `,
     versionSwitcher: css`
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,
     themeSwitcher: css`
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,

package/src/theme/Navbar/MobileSidebar/index.tsx

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { type ReactNode } from 'react';
+import { type ReactNode, useEffect } from 'react';
+import { useWindowSize } from '@docusaurus/theme-common';
 import {
   useLockBodyScroll,
   useNavbarMobileSidebar,
@@ -15,8 +16,10 @@ import NavbarMobileSidebarLayout from '@theme-original/Navbar/MobileSidebar/Layo
 import NavbarMobileSidebarHeader from './Header';
 import NavbarMobileSidebarPrimaryMenu from '@theme-original/Navbar/MobileSidebar/PrimaryMenu';
 import NavbarMobileSidebarSecondaryMenu from '@theme-original/Navbar/MobileSidebar/SecondaryMenu';
+import { useEuiTheme } from '@elastic/eui';
 
 import { VersionSwitcherProps } from '../../../components/version_switcher';
+import { getNavbarBreakpoint } from '../breakpoint';
 
 type Props = {
   versionSwitcherOptions?: VersionSwitcherProps;
@@ -26,9 +29,29 @@ export default function NavbarMobileSidebar({
   versionSwitcherOptions,
 }: Props): ReactNode {
   const mobileSidebar = useNavbarMobileSidebar();
-  useLockBodyScroll(mobileSidebar.shown);
+  const {
+    disabled,
+    shouldRender: shouldRenderDefault,
+    shown,
+    toggle,
+  } = mobileSidebar;
+  const euiThemeContext = useEuiTheme();
+  const { mobileBreakpoint } = getNavbarBreakpoint(euiThemeContext);
+  const windowSize = useWindowSize({
+    desktopBreakpoint: mobileBreakpoint,
+  });
+  const shouldRender =
+    shouldRenderDefault || (!disabled && windowSize === 'mobile');
 
-  if (!mobileSidebar.shouldRender) {
+  useLockBodyScroll(shouldRender && shown);
+
+  useEffect(() => {
+    if (windowSize === 'desktop' && shown) {
+      toggle();
+    }
+  }, [shown, toggle, windowSize]);
+
+  if (!shouldRender) {
     return null;
   }
 

package/src/theme/Navbar/breakpoint.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 type { UseEuiTheme } from '@elastic/eui';
+
+const NAVBAR_MOBILE_BREAKPOINT_KEY = 'xl';
+
+export const getNavbarBreakpoint = ({ euiTheme }: UseEuiTheme) => {
+  const mobileBreakpoint = euiTheme.breakpoint[NAVBAR_MOBILE_BREAKPOINT_KEY];
+  const desktopBreakpoint = mobileBreakpoint + 1;
+
+  return {
+    desktopBreakpoint,
+    desktopMediaQuery: `@media (min-width: ${desktopBreakpoint}px)`,
+    mobileBreakpoint,
+    mobileMediaQuery: `@media (max-width: ${mobileBreakpoint}px)`,
+  };
+};