@patternfly/documentation-framework 6.0.0-alpha.11 → 6.0.0-alpha.111

package/components/tableOfContents/tableOfContents.css

@@ -1,35 +1,38 @@
 .ws-toc {
   align-self: flex-start;
   position: sticky;
-  width: calc(100% + var(--pf-v6-c-page__main-section--PaddingLeft) + var(--pf-v6-c-page__main-section--PaddingRight));
-  background-color: var(--pf-v6-global--BackgroundColor--200);
-  z-index: 501;
+  width: calc(100% + var(--pf-v6-c-page__main-section--PaddingInlineStart) + var(--pf-v6-c-page__main-section--PaddingInlineEnd));
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  z-index: 201;
   margin-block-start: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
-  margin-block-end: var(--pf-v6-global--spacer--md);
-  margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1);
-  margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingRight) * -2);
-  padding-block-start: var(--pf-v6-global--spacer--md);
-  padding-block-end: var(--pf-v6-global--spacer--md);
-  padding-inline-start: var(--pf-v6-global--spacer--md);
+  margin-block-end: var(--pf-t--global--spacer--md);
+  margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) * -1);
+  margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) * -2);
+  padding-block-start: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
   padding-inline-end: 0;
-  box-shadow: var(--pf-v6-global--BoxShadow--lg-bottom);
+  box-shadow: var(--pf-t--global--box-shadow--lg--bottom);
 }
 
 .ws-toc.pf-m-expanded {
-  box-shadow: var(--pf-v6-global--BoxShadow--sm-bottom)
+  box-shadow: var(--pf-t--global--box-shadow--sm--bottom)
+}
+
+.ws-toc .pf-v6-c-jump-links__toggle {
+  background-color: var(--pf-t--global--background--color--secondary--default);
 }
 
 /* Mobile jumplinks */
 @media (max-width: 1450px) {
   .ws-toc.pf-m-expanded .pf-v6-c-jump-links__main {
     max-height: 65vh;
-    overflow: auto;
+    overflow-y:auto;
   }
 
   .ws-toc .pf-v6-c-jump-links__header {
     position: sticky;
     top: 0;
-    background-color: var(--pf-v6-global--BackgroundColor--200);
     z-index: 2;
   }
 }
@@ -45,14 +48,14 @@
 
 @media (min-width: 1451px) {
   .ws-toc {
-    width: 280px;
+    width: 260px;
     max-height: calc(100vh - 76px);
     overflow-y: auto;
     /* Hide TOC scrollbar IE, Edge & Firefox */
     -ms-overflow-style: none;
     scrollbar-width: none;
     order: 1;
-    padding: 0 var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--2xl);
+    padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--2xl);
     flex-grow: 1;
     background: none;
     margin: 0;
@@ -64,19 +67,7 @@
   }
 }
 
-/* .ws-toc-link { */
-.ws-toc-item .pf-v6-c-jump-links__link {
-  position: relative;
-  display: block;
-  color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300));
-  font-size: var(--pf-v6-global--FontSize--sm);
-  margin: -4px 0;
-}
-
-.ws-toc-sublist > .ws-toc-item:first-child .pf-v6-c-jump-links__link {
-  margin-top: 0;
-}
-
-.ws-toc-item.pf-m-current .pf-v6-c-jump-links__link::before {
-  z-index: 1;
+.ws-toc-item .pf-m-link {
+  text-wrap: wrap;
+  text-align: left;
 }

package/components/tableOfContents/tableOfContents.js

@@ -1,5 +1,9 @@
 import React from 'react';
-import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
+import {
+  JumpLinks,
+  JumpLinksItem,
+  JumpLinksList,
+} from '@patternfly/react-core';
 import { trackEvent } from '../../helpers';
 
 export const TableOfContents = ({ items }) => {
@@ -9,15 +13,17 @@ export const TableOfContents = ({ items }) => {
   const [stickyNavHeight, setStickyNavHeight] = React.useState(0);
 
   React.useEffect(() => {
-    if (document.getElementById("ws-sticky-nav-tabs")) {
-      setStickyNavHeight(document.getElementById("ws-sticky-nav-tabs").offsetHeight);
+    if (document.getElementById('ws-sticky-nav-tabs')) {
+      setStickyNavHeight(
+        document.getElementById('ws-sticky-nav-tabs').offsetHeight
+      );
     }
-  }, [])
+  }, []);
 
   const updateWidth = () => {
     const { innerWidth } = window;
     innerWidth !== width && setWidth(innerWidth);
-  }
+  };
   let jumpLinksItems = [];
   let wasSublistRendered = false;
 
@@ -27,14 +33,20 @@ export const TableOfContents = ({ items }) => {
       <>
         {item.text}
         <JumpLinksList>
-          {nextItemArr.map(curItem => (
+          {nextItemArr.map((curItem) => (
             <JumpLinksItem
               key={curItem.id}
               href={`#${curItem.id}`}
               className="ws-toc-item"
               onKeyDown={updateWidth}
               onMouseDown={updateWidth}
-              onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
+              onClick={() =>
+                trackEvent(
+                  'jump_link_click',
+                  'click_event',
+                  curItem.id.toUpperCase()
+                )
+              }
             >
               {curItem.text}
             </JumpLinksItem>
@@ -42,7 +54,7 @@ export const TableOfContents = ({ items }) => {
         </JumpLinksList>
       </>
     );
-  }
+  };
 
   const renderJumpLinksItems = () => {
     items.forEach((item, index) => {
@@ -53,18 +65,28 @@ export const TableOfContents = ({ items }) => {
         return;
       }
       if (!Array.isArray(nextItem) && Array.isArray(item)) {
-        {item.map(curItem => jumpLinksItems.push(
-          <JumpLinksItem
-            key={curItem.id}
-            href={`#${curItem.id}`}
-            className="ws-toc-item"
-            onKeyDown={updateWidth}
-            onMouseDown={updateWidth}
-            onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
-          >
-            {curItem.text}
-          </JumpLinksItem>
-        ))}
+        {
+          item.map((curItem) =>
+            jumpLinksItems.push(
+              <JumpLinksItem
+                key={curItem.id}
+                href={`#${curItem.id}`}
+                className="ws-toc-item"
+                onKeyDown={updateWidth}
+                onMouseDown={updateWidth}
+                onClick={() =>
+                  trackEvent(
+                    'jump_link_click',
+                    'click_event',
+                    curItem.id.toUpperCase()
+                  )
+                }
+              >
+                {curItem.text}
+              </JumpLinksItem>
+            )
+          );
+        }
       } else {
         jumpLinksItems.push(
           <JumpLinksItem
@@ -73,27 +95,35 @@ export const TableOfContents = ({ items }) => {
             className="ws-toc-item"
             onKeyDown={updateWidth}
             onMouseDown={updateWidth}
-            onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())}
+            onClick={() =>
+              trackEvent(
+                'jump_link_click',
+                'click_event',
+                item.id.toUpperCase()
+              )
+            }
           >
-            { Array.isArray(nextItem) ? renderSublist(item, nextItem) : item.text }
+            {Array.isArray(nextItem)
+              ? renderSublist(item, nextItem)
+              : item.text}
           </JumpLinksItem>
         );
       }
-    })
+    });
     return jumpLinksItems;
-  }
+  };
 
   return (
     <JumpLinks
       label="Table of contents"
       isVertical
-      scrollableSelector="#ws-page-main"
+      scrollableSelector=".pf-v6-c-page__main-container"
       className="ws-toc"
-      style={{ 'top': stickyNavHeight }}
+      style={{ top: stickyNavHeight }}
       offset={width > 1450 ? 108 + stickyNavHeight : 148 + stickyNavHeight}
       expandable={{ default: 'expandable', '2xl': 'nonExpandable' }}
     >
-      { renderJumpLinksItems() }
+      {renderJumpLinksItems()}
     </JumpLinks>
   );
-}
+};

package/layouts/sideNavLayout/sideNavLayout.css

@@ -8,43 +8,8 @@
   flex: 1;
 }
 
-.ws-switcher-divider {
-  padding: 0 var(--pf-v6-global--spacer--md);
-}
-
-@media (min-width: 1200px) {
-  .ws-page-sidebar {
-    box-shadow: none !important;
-  }
-}
-
-.ws-page-sidebar > .pf-v6-c-page__sidebar-body {
-  padding-top: var(--pf-v6-global--spacer--md);
-}
-
 /* Search */
 #algolia-autocomplete-listbox-0 {
   /* Fix search results overflowing page */
   min-width: 480px !important;
 }
-.ws-global-search.pf-v6-c-input-group {
-  /* remove white background on dark Masthead */
-  --pf-v6-c-input-group--BackgroundColor: none;
-}
-
-/* For tiny (200px) viewports */
-.ws-masthead .pf-v6-c-toolbar__item  {
-  min-width: 0;
-}
-
-.ws-masthead .pf-v6-c-switch {
-  align-items: center;
-  --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-switch__input--checked__label--Color: var(--pf-v6-global--Color--100);
-}
-
-.ws-masthead .pf-v6-c-toggle-group {
-  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v6-global--palette--blue-400);
-  --pf-v6-c-toggle-group__button--focus--BackgroundColor: transparent;
-  --pf-v6-c-toggle-group__button--hover--BackgroundColor: transparent;
-}