From fc9d721d9d4a1a14ab0bb2d66d1c68fb2d90ca7c Mon Sep 17 00:00:00 2001
From: Nicole Thoen <nthoen@redhat.com>
Date: Thu, 11 Jul 2024 11:35:18 -0400
Subject: [PATCH] fix: css clean up - esp sidenavlayout.css (#4129)

---
 .../components/example/example.css            |  2 +-
 .../tableOfContents/tableOfContents.css       |  4 +++
 .../layouts/sideNavLayout/sideNavLayout.css   | 35 -------------------
 .../layouts/sideNavLayout/sideNavLayout.js    | 11 +++---
 packages/documentation-site/package.json      |  2 +-
 5 files changed, 10 insertions(+), 44 deletions(-)

diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css
index c6ab8a2ec3..2018d81b5a 100644
--- a/packages/documentation-framework/components/example/example.css
+++ b/packages/documentation-framework/components/example/example.css
@@ -27,7 +27,7 @@
 .ws-preview__thumbnail-link::before,
 .ws-preview__thumbnail-link::after {
   position: absolute;
-  z-index: 500;
+  z-index: var(--pf-t--global--z-index--sm);
   transition: .2s;
   opacity: 0;
 }
diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.css b/packages/documentation-framework/components/tableOfContents/tableOfContents.css
index d7d2a98d50..a48c633a9b 100644
--- a/packages/documentation-framework/components/tableOfContents/tableOfContents.css
+++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.css
@@ -19,6 +19,10 @@
   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 {
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
index b620fae162..8b13e97c95 100644
--- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
+++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
@@ -8,43 +8,8 @@
   flex: 1;
 }
 
-.ws-switcher-divider {
-  padding: 0 var(--pf-t--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-t--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;
-}
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
index d3e33efd49..5c76ab5f9a 100644
--- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
+++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
@@ -163,7 +163,7 @@ const HeaderTools = ({
                     </DropdownList>
                   </DropdownGroup>
                 )}
-                <Divider key="divider1" className="ws-switcher-divider"/>
+                <Divider key="divider1"/>
                 <DropdownGroup key="Alpha preview version" label="Alpha preview version">
                   <DropdownList>
                     <DropdownItem
@@ -177,7 +177,7 @@ const HeaderTools = ({
                     </DropdownItem>
                   </DropdownList>
                 </DropdownGroup>
-                <Divider key="divider2" className="ws-switcher-divider"/>
+                <Divider key="divider2"/>
                 <DropdownGroup key="Previous versions" label="Previous versions">
                   <DropdownList>
                     <DropdownItem
@@ -263,10 +263,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   }, []);
 
   const SideBar = (
-    <PageSidebar
-      className="ws-page-sidebar"
-      theme="light"
-    >
+    <PageSidebar>
       <PageSidebarBody>
         <SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />
       </PageSidebarBody>
@@ -274,7 +271,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   );
 
   const masthead = (
-    <Masthead className="ws-masthead">
+    <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
           <BarsIcon />
diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json
index 05a456dd61..ea259cf17d 100644
--- a/packages/documentation-site/package.json
+++ b/packages/documentation-site/package.json
@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.0-alpha.57",
+    "@patternfly/documentation-framework": "6.0.0-alpha.58",
     "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4",
     "@patternfly/react-console": "6.0.0-alpha.3",
     "@patternfly/react-docs": "7.0.0-alpha.84",