@salesforcedevs/docs-components 1.34.3-fix-redoc-topic-v-2 → 1.34.3-style-fix-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.34.3-fix-redoc-topic-v-2",
+  "version": "1.34.3-style-fix-alpha1",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",
@@ -25,6 +25,5 @@
     "@types/lodash.orderby": "4.6.9",
     "@types/lodash.uniqby": "4.7.9"
   },
-  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad",
-  "stableVersion": "1.34.3"
+  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/doc/redocReference/redocReference.ts

@@ -10,15 +10,6 @@ import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
 import { toJson } from "dxUtils/normalizers";
 import { oldVersionDocInfo } from "docUtils/utils";
-import {
-    applyVersionToHref,
-    collectSubtreeCanonicalHrefs,
-    normalizePath,
-    getTopicVersionKey,
-    persistTopicVersion,
-    toCanonicalHref
-} from "dxUtils/topicVersion";
-import type { VersionedNode } from "dxUtils/topicVersion";
 import type { DocPhaseInfo, OptionWithLink } from "typings/custom";
 
 declare global {
@@ -56,8 +47,6 @@ type ReferenceVersion = {
 type ReferenceConfig = {
     refList: ReferenceItem[];
     versions?: ReferenceVersion[];
-    /** Sidebar topic name. Sidebar stores the selected version under this key. */
-    versionTopicKey?: string;
 };
 
 const SCROLL_THROTTLE_DELAY = 50;
@@ -140,30 +129,6 @@ export default class RedocReference extends LightningElement {
      */
     @api headerHref: string | null = null;
 
-    /**
-     * Versioned topic that owns this spec, including its children.
-     * Href matches this page, so an older version still has its version
-     * in the path.
-     */
-    @api
-    set parentTopicFamily(value: string | { topics?: VersionedNode[] } | null) {
-        try {
-            const parsed = toJson(value) as { topics?: VersionedNode[] } | null;
-            this._parentTopicFamilyNode = parsed?.topics?.[0] ?? null;
-        } catch (error) {
-            this._parentTopicFamilyNode = null;
-            console.error("Failed to parse parent topic family", error);
-        }
-    }
-
-    get parentTopicFamily(): { topics?: VersionedNode[] } | null {
-        return this._parentTopicFamilyNode
-            ? { topics: [this._parentTopicFamilyNode] }
-            : null;
-    }
-
-    private _parentTopicFamilyNode: VersionedNode | null = null;
-
     @api
     get contentType(): string {
         return this._contentType;
@@ -268,64 +233,13 @@ export default class RedocReference extends LightningElement {
     private onBackClick = (event: Event): void => {
         event.preventDefault();
 
-        const target = this.getVersionedBackTarget() ?? this.headerHref;
+        const target = this.getTranslatedBackTarget() ?? this.headerHref;
 
         if (target) {
             window.location.assign(target);
         }
     };
 
-    /**
-     * When the back target is in this spec's topic, return it on the
-     * selected version. With no back target, do the same for the header
-     * link when that link is the versioned parent.
-     */
-    private getVersionedBackTarget(): string | null {
-        const stored = this.getTranslatedBackTarget();
-        const selectedVersion = this.selectedVersion;
-        const target = stored ?? this.headerHref;
-        if (!target || !selectedVersion) {
-            return stored;
-        }
-
-        let targetUrl: URL;
-        try {
-            targetUrl = new URL(target, window.location.origin);
-        } catch {
-            return target;
-        }
-
-        // Family hrefs match this page's version. Compare them without
-        // the version segment. Rewrite only the pathname so the target's
-        // query and hash survive.
-        const familyHrefs = this._parentTopicFamilyNode
-            ? collectSubtreeCanonicalHrefs(this._parentTopicFamilyNode).map(
-                  (href) => toCanonicalHref(href, this.versions)
-              )
-            : [];
-
-        const canonicalTarget = toCanonicalHref(
-            targetUrl.pathname,
-            this.versions
-        );
-        const inFamily = familyHrefs.some(
-            (href) => normalizePath(href) === normalizePath(canonicalTarget)
-        );
-        if (!inFamily) {
-            return target;
-        }
-
-        const versioned = applyVersionToHref(
-            canonicalTarget,
-            selectedVersion,
-            this.versions
-        );
-        if (!versioned) {
-            return target;
-        }
-        return `${versioned}${targetUrl.search}${targetUrl.hash}`;
-    }
-
     private getTranslatedBackTarget(): string | null {
         const stored = this.getBackTargetFromSession();
         if (stored) {
@@ -448,13 +362,6 @@ export default class RedocReference extends LightningElement {
         // Track the back target, preserving it across locale switches
         this.trackBackTarget();
 
-        // Remember the selected version for the sidebar. Changing version
-        // reloads this page.
-        const topicKey = this.getParentTopicVersionKey();
-        if (topicKey && this.selectedVersion) {
-            persistTopicVersion(topicKey, this.selectedVersion.id);
-        }
-
         window.addEventListener("scroll", this.handleScrollAndResize);
         window.addEventListener("resize", this.handleScrollAndResize);
     }
@@ -763,18 +670,6 @@ export default class RedocReference extends LightningElement {
         return wrapper;
     }
 
-    /**
-     * Key the sidebar uses for this topic's selected version.
-     * Missing `versionTopicKey` returns null so nothing is written.
-     */
-    private getParentTopicVersionKey(): string | null {
-        const versionTopicKey = this._referenceConfig?.versionTopicKey;
-        if (!versionTopicKey) {
-            return null;
-        }
-        return getTopicVersionKey({ name: versionTopicKey }) || null;
-    }
-
     /** Stashes the current view (URL hash) before the version link navigates. */
     private onVersionChange = (): void => {
         sessionStorage.setItem(

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

@@ -2,17 +2,24 @@
 
 /* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
 :host {
+    /* Always positioned so the popover's containing block stays the picker.
+       Toggling position with aria-expanded lets the menu jump to the sidebar
+       (top of the ToC) for a frame before LWC hides it. */
+    position: relative;
+
     --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-base);
     --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
     --dx-c-dropdown-option-padding: var(--dx-g-spacing-sm)
         var(--dx-g-spacing-lg);
     --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
     --popover-container-open-transform: translateY(4px);
+    --dx-c-version-picker-focus-ring: 0 0 0 2px white,
+        0 0 0 4px var(--dx-g-blue-vibrant-60);
 }
 
 /* Open menus must stack above later sibling pickers in the sidebar. */
 :host(:has([aria-expanded="true"])) {
-    position: relative;
     z-index: 2;
 }
 
@@ -48,13 +55,13 @@
 .version-picker-button {
     display: flex;
     width: var(--doc-version-picker-width, 296px);
+    overflow: visible;
 
     --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
     --dx-g-button-icon-color: var(--dx-g-gray-50);
 }
 
 .version-picker-button:hover,
-.version-picker-button:focus-within,
 .version-picker-button[aria-expanded="true"] {
     --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
 }
@@ -68,25 +75,59 @@ dx-button::part(content) {
     overflow: hidden;
 }
 
-/* The border is an inset box-shadow so thickening it on hover/focus doesn't
-   resize the small variant's fit-content box. */
+/* Border width stays 1px in every state. Hover, open, and focus paint the
+   2px blue stroke with an inset shadow so the box does not grow.
+   Tertiary's hover border is overridden. */
 .version-picker-button::part(container) {
+    box-sizing: border-box;
     background: white;
-    box-shadow: inset 0 0 0 1px var(--dx-g-gray-50);
+    border: 1px solid var(--dx-g-gray-50);
+    border-radius: var(--dx-g-spacing-xs);
+    box-shadow: none;
     color: var(--dx-g-gray-10);
+    outline: none;
+}
+
+/* Hover only (not open): 2px #032D60 on #EEF4FF, no ring.
+   Border color matches the fill so the 1px border does not add a third
+   pixel around the inset stroke.
+   :focus-visible is included so click-open + Escape (which upgrades the
+   trigger to keyboard focus) still looks like hover while the pointer is on
+   the picker. */
+.version-picker-button:hover:not([aria-expanded="true"])::part(container),
+.version-picker-button:hover:not([aria-expanded="true"])::part(
+        container
+    ):focus-visible {
+    background: var(--dx-g-blue-vibrant-95);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
 }
 
-.version-picker-button::part(container):hover {
+/* Halo lives on the dx-button host so inner tertiary styles / overflow
+   cannot flatten it. Fill and the inset stroke stay on the part. */
+.version-picker-button[aria-expanded="true"] {
+    border-radius: var(--dx-g-spacing-xs);
+    box-shadow: var(--dx-c-version-picker-focus-ring);
+}
+
+.version-picker-button[aria-expanded="true"]::part(container) {
     background: var(--dx-g-blue-vibrant-95);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
+    border-radius: var(--dx-g-spacing-xs);
     box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
 }
 
-/* aria-expanded keeps the focus ring while the menu is open. */
-.version-picker-button:focus-within::part(container),
-.version-picker-button[aria-expanded="true"]::part(container) {
+/* Keyboard focus while closed. Open uses the host halo above. */
+.version-picker-button:not([aria-expanded="true"])::part(
+        container
+    ):focus-visible {
+    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
+
     background: var(--dx-g-blue-vibrant-95);
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20), 0 0 0 2px white,
-        0 0 0 4px var(--dx-g-blue-vibrant-60);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
+    border-radius: var(--dx-g-spacing-xs);
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20),
+        var(--dx-c-version-picker-focus-ring);
 }
 
 .selected-version {
@@ -112,12 +153,13 @@ dx-type-badge.not-latest-badge {
  * Small "dot" variant (opt-in via `small`). Additive 
  * ------------------------------------------------------------------ */
 
-/* Option padding is sm both axes: the small menu tracks the ~104px trigger, so
-   the default 24px horizontal would crowd the labels. */
+/* Menu is capped at the ToC width (296px), not the 104px trigger, so options
+   keep the same 16px / 8px 24px / gray-10 type as the default picker. */
 .version-picker-dropdown-small {
-    --dx-c-dropdown-option-font-size: var(--dx-g-text-xs);
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-base);
     --dx-c-dropdown-option-padding: var(--dx-g-spacing-sm)
-        var(--dx-g-spacing-sm);
+        var(--dx-g-spacing-lg);
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
     --dx-c-dropdown-option-border-radius: 0;
     --dx-c-popover-border: none;