@salesforcedevs/docs-components 1.3.106-alpha.0 → 1.3.106-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.106-alpha.0",
+    "version": "1.3.106-alpha.2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -185,6 +185,10 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
+    /* 
+        This is a workaround for the global nav sticky header being decoupled from the doc header & doc phase.
+        We have to account for the global nav changing height due to animations.
+    */
     adjustNavPosition = () => {
         const sidebarType = this.useOldSidebar
             ? "dx-sidebar-old"
@@ -196,19 +200,42 @@ export default class ContentLayout extends LightningElement {
         const contextNavEl = document.querySelector(
             "hgf-c360contextnav"
         ) as HTMLElement;
-        const docHeaderEl = document.querySelector("doc-header") as HTMLElement;
+        const docHeaderEl = document.querySelector(
+            ".sticky-doc-header"
+        ) as HTMLElement;
+        const docPhaseEl = document.querySelector("doc-phase") as HTMLElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
             return;
         }
 
-        const totalOffsetHeight =
-            globalNavEl.offsetHeight +
-            contextNavEl.offsetHeight +
-            docHeaderEl.offsetHeight;
+        const globalNavHeight =
+            globalNavEl.offsetHeight + contextNavEl.offsetHeight;
+        const docHeaderHeight = docHeaderEl.offsetHeight;
+
+        sidebarEl.style.setProperty(
+            "--dx-c-content-sidebar-sticky-top",
+            `${globalNavHeight + docHeaderHeight}px`
+        );
+        docHeaderEl.style.setProperty(
+            "--dx-g-global-header-height",
+            `${globalNavHeight}px`
+        );
 
-        sidebarEl.style.top = `${totalOffsetHeight}px`;
+        // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
+        if (docPhaseEl) {
+            docPhaseEl.style.setProperty(
+                "--doc-c-phase-top",
+                `${
+                    window.innerWidth <= 769
+                        ? globalNavHeight +
+                          docHeaderHeight +
+                          sidebarEl.offsetHeight
+                        : globalNavHeight + docHeaderHeight
+                }px`
+            );
+        }
     };
 
     updateHighlighted = (event: Event): void =>

package/src/modules/doc/header/header.css

@@ -84,6 +84,7 @@ header:not(.has-brand) > .header_l2 {
     }
 
     .header_l2_group-title {
+        height: var(--dx-g-doc-header-main-nav-height);
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
             var(--dx-g-global-header-padding-horizontal);