@salesforcedevs/docs-components 1.20.7 → 1.20.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.20.7",
+    "version": "1.20.9",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,7 +25,7 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "fffbef4d7b536a321824457c6a987e53830a78f1",
+    "gitHead": "f059ed735a63a7da1639c89388548ff6ff351c8a",
     "volta": {
         "node": "20.19.0",
         "yarn": "1.22.19"

package/src/modules/doc/amfReference/amfReference.css

@@ -1,10 +1,3 @@
-doc-phase {
-    --doc-c-phase-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-xl)
-    );
-}
-
 /* We need to apply some borders when there are two doc phases */
 doc-phase:not(:only-of-type)::part(container) {
     border-top: 1px solid var(--dx-g-yellow-vibrant-90);
@@ -15,11 +8,6 @@ doc-phase:nth-child(2)::part(container) {
     border-bottom: 1px solid var(--dx-g-yellow-vibrant-90);
 }
 
-/* We don't want second component to sticky as we need to handle different cases like position */
-doc-phase:nth-child(2) {
-    position: static;
-}
-
 .api-documentation {
     margin-top: 48px;
 }

package/src/modules/doc/contentLayout/contentLayout.html

@@ -17,8 +17,12 @@
             <slot name="sidebar-header" slot="version-picker"></slot>
         </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
-            <slot name="doc-phase"></slot>
-            <slot name="version-banner"></slot>
+            <div class="doc-phase-wrapper">
+                <slot name="doc-phase"></slot>
+            </div>
+            <div class="version-wrapper">
+                <slot name="version-banner"></slot>
+            </div>
             <div class="content-body-container">
                 <div class="content-body">
                     <doc-breadcrumbs

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

@@ -223,15 +223,20 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        let docPhaseEl = (
-            this.template.querySelector("[name=doc-phase]")! as any
+        const docPhaseWrapper = this.template.querySelector(
+            ".doc-phase-wrapper"
+        ) as HTMLElement;
+        const versionWrapper = this.template.querySelector(
+            ".version-wrapper"
+        ) as HTMLElement;
+
+        const docPhaseEl = (
+            docPhaseWrapper.querySelector("[name=doc-phase]")! as any
         ).assignedElements()[0] as HTMLSlotElement;
 
-        if (!docPhaseEl) {
-            docPhaseEl = (
-                this.template.querySelector("[name=version-banner]")! as any
-            ).assignedElements()[0] as HTMLSlotElement;
-        }
+        const verBannerEl = (
+            versionWrapper.querySelector("[name=version-banner]")! as any
+        ).assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -263,23 +268,21 @@ export default class ContentLayout extends LightningElement {
                 `${globalNavHeight}px`
             );
 
+            const docPhaseElHeight =
+                docPhaseEl || verBannerEl
+                    ? (docPhaseEl || verBannerEl).getBoundingClientRect().height
+                    : 0;
+
             // Adjusting the doc section heading on scroll.
             docHeadingEls.forEach((docHeadingEl) => {
-                (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height +
-                          40
-                      }px`
-                    : `${totalHeaderHeight + 40}px`;
+                (docHeadingEl as any).style.scrollMarginTop = `${
+                    totalHeaderHeight + docPhaseElHeight + 40
+                }px`;
             });
 
             // Adjusting the right nav bar on scroll.
             // setting maxheight to make the RNB scrollable based on different parent elements
             if (rightNavBarEl) {
-                const docPhaseElHeight = docPhaseEl
-                    ? docPhaseEl.getBoundingClientRect().height
-                    : 0;
                 const viewportHeight = window.innerHeight;
                 const maxHeight =
                     viewportHeight -
@@ -299,18 +302,20 @@ export default class ContentLayout extends LightningElement {
                 }
             }
 
+            const docPhaseTop =
+                window.innerWidth < 769
+                    ? globalNavHeight +
+                      docHeaderHeight +
+                      sidebarEl.getBoundingClientRect().height
+                    : globalNavHeight + docHeaderHeight;
+
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
+            // To handle sticky position for safari browser, position sticky given to wrapper class
             if (docPhaseEl) {
-                docPhaseEl.style.setProperty(
-                    "--doc-c-phase-top",
-                    `${
-                        window.innerWidth < 769
-                            ? globalNavHeight +
-                              docHeaderHeight +
-                              sidebarEl.getBoundingClientRect().height
-                            : globalNavHeight + docHeaderHeight
-                    }px`
-                );
+                docPhaseWrapper.style.top = `${docPhaseTop}px`;
+            } else if (verBannerEl) {
+                versionWrapper.style.position = "sticky";
+                versionWrapper.style.top = `${docPhaseTop}px`;
             }
         });
     };

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -16,8 +16,12 @@
             <slot name="sidebar-header" slot="version-picker"></slot>
         </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
-            <slot name="doc-phase"></slot>
-            <slot name="version-banner"></slot>
+            <div class="doc-phase-wrapper">
+                <slot name="doc-phase"></slot>
+            </div>
+            <div class="version-wrapper">
+                <slot name="version-banner"></slot>
+            </div>
             <div class="content-body-container">
                 <div class={contentBodyClasses}>
                     <doc-breadcrumbs

package/src/modules/doc/phase/phase.css

@@ -3,14 +3,7 @@
 @import "docHelpers/status";
 
 :host {
-    --doc-c-phase-top: 0;
     --doc-c-phase-container-align-items: flex-start;
-
-    position: sticky;
-    top: var(--doc-c-phase-top);
-
-    /* NOTE: If you are changing z-index value here, ensure it's less than z-index of dx-sidebar in contentLayout.css */
-    z-index: var(--dx-g-z-index-100);
 }
 
 .doc-phase-container {

package/src/modules/doc/xmlContent/xmlContent.css

@@ -31,10 +31,6 @@ dx-dropdown > dx-button:hover {
     --border-color: var(--button-primary-color-hover);
 }
 
-doc-phase {
-    --doc-c-phase-top: var(--dx-g-global-header-height);
-}
-
 @media screen and (max-width: 768px) {
     doc-content-layout {
         --dx-g-doc-header-main-nav-height: 41px;
@@ -45,10 +41,4 @@ doc-phase {
             var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
         );
     }
-
-    doc-phase {
-        --doc-c-phase-top: calc(
-            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-        );
-    }
 }

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -59,6 +59,21 @@ dx-toc {
     border-left: 1px solid var(--dx-g-gray-90);
 }
 
+.doc-phase-wrapper,
+.version-wrapper {
+    /* NOTE: If you are changing z-index value here, ensure it's less than z-index of dx-sidebar in contentLayout.css */
+    z-index: var(--dx-g-z-index-100);
+}
+
+.doc-phase-wrapper {
+    position: sticky;
+}
+
+/* We don't want second component to sticky */
+.version-wrapper {
+    position: static;
+}
+
 .content-body-container {
     display: flex;
     flex-direction: row;