[EUI+] Implement sidebar style changes (#7880)

elastic · Jul 22, 2024 · 2beb7e8 · 2beb7e8
1 parent e738c32
commit 2beb7e8
Show file tree

Hide file tree

Showing 21 changed files with 1,139 additions and 355 deletions.
diff --git a/packages/docusaurus-theme/src/components/call_out/index.tsx b/packages/docusaurus-theme/src/components/call_out/index.tsx
@@ -37,8 +37,8 @@ const getStyles = ({ euiTheme }: UseEuiTheme, variant: VARIANTS) => {
 
   return {
     note: css`
-      &:not(:last-of-type) {
-        margin-block-end: ${euiTheme.size.m};
+      &:not(:last-child) {
+        margin-block-end: ${euiTheme.size.xl};
       }
 
       .alert {

diff --git a/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx
@@ -4,11 +4,11 @@ import { useWindowSize } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/theme-common/internal';
 import DocItemPaginator from '@theme-original/DocItem/Paginator';
 import Unlisted from '@theme-original/Unlisted';
+import DocVersionBanner from '@theme-original/DocVersionBanner';
+import DocVersionBadge from '@theme-original/DocVersionBadge';
 import * as Props from '@theme-original/DocItem/Layout';
 import { EuiHorizontalRule } from '@elastic/eui';
 
-import DocVersionBanner from '../../DocVersionBanner';
-import DocVersionBadge from '../../DocVersionBadge';
 import DocBreadcrumbs from '../../DocBreadcrumbs';
 import DocItemContent from '../Content';
 import DocItemTOCMobile from '../TOC/Mobile';
@@ -25,7 +25,7 @@ const layoutStyles = {
   `,
   docItemCol: css`
     @media (min-width: 997px) {
-      max-width: 75% !important;
+      max-width: 764px;
     }
   `,
 };

diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Main/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Main/index.tsx
@@ -32,7 +32,7 @@ const styles = {
 export default function DocRootLayoutMain({
   hiddenSidebarContainer,
   children,
-}: any): JSX.Element {
+}: Props): JSX.Element {
   const sidebar = useDocsSidebar();
   return (
     <main

diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx
@@ -9,10 +9,9 @@ import { useDocsSidebar } from '@docusaurus/theme-common/internal';
 import { useLocation } from '@docusaurus/router';
 import DocSidebar from '@theme-original/DocSidebar';
 import type { Props } from '@theme-original/DocRoot/Layout/Sidebar';
+import ExpandButton from '@theme-original/DocRoot/Layout/Sidebar/ExpandButton';
 import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
 
-import ExpandButton from './ExpandButton';
-
 const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
   return {
     sidebar: css`
@@ -108,7 +107,6 @@ export default function DocRootLayoutSidebar({
         }
 
         if (hiddenSidebarContainer) {
-          console.log('hidden sidebar?');
           setHiddenSidebar(true);
         }
       }}

diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx
@@ -3,8 +3,8 @@ import { css } from '@emotion/react';
 import { useDocsSidebar } from '@docusaurus/theme-common/internal';
 import BackToTopButton from '@theme-original/BackToTopButton';
 import type { Props } from '@theme-original/DocRoot/Layout';
+import DocRootLayoutSidebar from '@theme-original/DocRoot/Layout/Sidebar';
 
-import DocRootLayoutSidebar from './Sidebar';
 import DocRootLayoutMain from './Main';
 
 // converted from css modules to Emotion

diff --git a/packages/docusaurus-theme/src/theme/DocRoot/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/index.tsx