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

package/src/theme/DocSidebarItem/Category/index.tsx

@@ -138,7 +138,7 @@ function CollapseButton({
       onClick={onClick}
       {...rest}
     >
-      <EuiIcon size="s" type={collapsed ? 'arrowRight' : 'arrowDown'} />
+      <EuiIcon size="s" type={collapsed ? 'chevronSingleRight' : 'chevronSingleDown'} />
     </button>
   );
 }

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)`,
+  };
+};

package/src/theme/NavbarItem/NavbarNavLink.tsx

@@ -40,7 +40,7 @@ const CUSTOM_LINK_COMPONENT_MAP: Record<
   },
   changelog: {
     component: NavbarItem,
-    icon: 'cheer',
+    icon: 'popper',
   },
   figma: {
     component: NavbarItem,

package/src/theme/PaginatorNavLink/index.tsx

@@ -63,9 +63,9 @@ export default function PaginatorNavLink(props: Props): JSX.Element {
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
 
       <div className="pagination-nav__label">
-        {isPrev && <EuiIcon type="arrowLeft" />}
+        {isPrev && <EuiIcon type="chevronSingleLeft" />}
         {title}
-        {isNext && <EuiIcon type="arrowRight" />}
+        {isNext && <EuiIcon type="chevronSingleRight" />}
       </div>
     </Link>
   );

package/src/theme/TOCCollapsible/CollapseButton/index.tsx

@@ -47,7 +47,7 @@ export default function TOCCollapsibleCollapseButton({
       >
         On this page
       </Translate>
-      <EuiIcon type={collapsed ? 'arrowDown' : 'arrowUp'} />
+      <EuiIcon type={collapsed ? 'chevronSingleDown' : 'chevronSingleUp'} />
     </button>
   );
 }

package/src/theme/theme.d.ts

@@ -594,6 +594,7 @@ declare module '@theme/Demo/actions' {
     activeSource: DemoSourceMeta;
     sources: DemoSourceMeta[];
     extraFiles?: ExtraFiles;
+    previewWrapperSource?: string;
   };
 
   export type ActionComponent = ComponentType<ActionComponentProps>;