@salesforcedevs/docs-components 1.3.227-dh5-alpha → 1.3.227-dh7-alpha

package/package.json

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

package/src/modules/doc/header/header.html

@@ -40,7 +40,7 @@
             </header>
         </dx-brand-theme-provider>
     </template>
-    <template if:false={shouldRender}>
+    <template if:true={showDocDivider}>
         <div class="no-header-content"></div>
     </template>
 </template>

package/src/modules/doc/header/header.ts

@@ -5,7 +5,7 @@ import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
 
 const TABLET_MATCH = "980px";
-const MOBILE_MATCH = "880px";
+const MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
@@ -23,6 +23,8 @@ export default class Header extends HeaderBase {
     private _scopedNavItems!: OptionWithNested[];
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
+    private shouldRender: boolean = false;
+    private showDocDivider: boolean = false;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;
@@ -41,16 +43,22 @@ export default class Header extends HeaderBase {
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
         if (
-            ((window.location.pathname.includes("/docs/") &&
+            (window.location.pathname.includes("/docs/") &&
                 window.location.pathname !== "/docs/apis") ||
-                window.location.pathname ===
-                    "/tableau/embedding-playground/overview" ||
-                window.location.host === "localhost:6006" ||
-                window.location.host === "dsc-components.herokuapp.com") &&
-            (this.brand || this.mobile)
+            window.location.pathname ===
+                "/tableau/embedding-playground/overview" ||
+            window.location.host === "localhost:6006" ||
+            window.location.host === "dsc-components.herokuapp.com"
         ) {
             this.shouldRender = true;
         }
+
+        if (this.shouldRender && window.location.pathname.includes("/docs/")) {
+            if (!this.brand && !this.mobile) {
+                this.shouldRender = false;
+                this.showDocDivider = true;
+            }
+        }
     }
 
     disconnectedCallback(): void {

package/src/modules/doc/versionPicker/versionPicker.css

@@ -2,6 +2,8 @@
 
 /* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
 :host {
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
     --popover-container-open-transform: translateY(4px);
 }
 
@@ -12,11 +14,18 @@
     border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
-dx-button {
+.version-picker-button {
     display: flex;
     width: var(--doc-version-picker-width, 296px);
 }
 
+.version-picker-button:hover,
+.version-picker-button:active,
+.version-picker-button:focus {
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
 /**
  * NOTE: This CSS ensures the span inside the button stays within the parent's width, avoiding overflow.
  * Not keeping this in common component to ensure that existing functionality works as it is.

package/src/modules/doc/versionPicker/versionPicker.html

@@ -6,6 +6,7 @@
             width="var(--doc-version-picker-width)"
         >
             <dx-button
+                class="version-picker-button"
                 variant="tertiary"
                 size="small"
                 icon-symbol="chevrondown"

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

@@ -32,7 +32,23 @@ dx-dropdown > dx-button:hover {
 }
 
 doc-phase {
-    --doc-c-phase-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-    );
+    --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;
+        --dx-g-doc-header-height: calc(
+            var(--dx-g-doc-header-main-nav-height) + 40px
+        );
+        --dx-c-content-sidebar-sticky-top: calc(
+            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)
+        );
+    }
 }