@salesforcedevs/dx-components 1.40.7-tlv-alpha → 1.40.8

package/src/modules/dx/versionPicker/versionPicker.css

@@ -1,248 +0,0 @@
-@import "dxHelpers/reset";
-
-/* NOTE: dx-version-picker-width 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-active-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"])) {
-    z-index: 2;
-}
-
-.version-picker-container {
-    /* Override --dx-version-picker-padding to change the inset (e.g. when the
-       picker sits inside an already-padded container). */
-    padding: var(
-        --dx-version-picker-padding,
-        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-sm)
-            var(--dx-g-global-header-padding-horizontal)
-    );
-
-    /* Override --dx-version-picker-divider (e.g. `none`) to restyle dividers. */
-    border-top: var(--dx-version-picker-divider, 1px solid var(--dx-g-gray-90));
-    border-bottom: var(
-        --dx-version-picker-divider,
-        1px solid var(--dx-g-gray-90)
-    );
-}
-
-/* Inline sidebar variant: drop the header-slot chrome so the picker sits
-   beside a tree node without extra padding or divider lines. */
-.version-picker-container-small {
-    display: flex;
-    align-items: center;
-    padding: 0;
-    border: none;
-}
-
-.version-picker-button {
-    display: flex;
-    width: var(--dx-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[aria-expanded="true"] {
-    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
-}
-
-/**
- * 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.
- */
-dx-button::part(content) {
-    width: inherit;
-    overflow: hidden;
-}
-
-/* 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;
-    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;
-    transition: var(--dx-g-transition-hue-1x), box-shadow 0.15s linear;
-}
-
-/* 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);
-}
-
-/* Open keeps the fill and the 2px stroke. The focus ring is keyboard-only,
-   on the closed picker below. */
-.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);
-}
-
-/* Keyboard focus while closed. */
-.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);
-    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 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.selected-version-label {
-    flex: 1;
-    overflow: hidden;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-dx-type-badge.latest-badge,
-dx-type-badge.not-latest-badge {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-/* ------------------------------------------------------------------ *
- * Small "dot" variant (opt-in via `small`). Additive 
- * ------------------------------------------------------------------ */
-
-/* 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-base);
-    --dx-c-dropdown-option-padding: 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;
-
-    /* Hug the labels (down to the shortest) but never wider than the ToC
-       content: 296px on desktop, and on the smallest breakpoint the sidebar
-       variable grows with the viewport up to 720px. Long labels wrap inside
-       that cap. */
-    --dx-c-dropdown-menu-max-width: var(--dx-version-picker-width, 296px);
-    --dx-c-dropdown-fit-white-space: normal;
-    --dx-c-dropdown-fit-overflow: hidden;
-    --dx-c-dropdown-fit-text-overflow: clip;
-    --dx-c-dropdown-option-overflow-wrap: anywhere;
-}
-
-.version-picker-button-small {
-    width: fit-content;
-    max-width: 104px;
-
-    --dx-c-button-font-size: var(--dx-g-text-xs);
-    --dx-c-button-font-weight: var(--dx-g-font-normal);
-    --dx-c-button-line-height: var(--dx-g-spacing-lg);
-    --dx-c-button-icon-gap: var(--dx-g-spacing-2xs);
-}
-
-/* min-width: 0 on each flex ancestor lets the label truncate: a flex item's
-   default min-width: auto refuses to shrink below its content and overrides the
-   host's max-width, so without this the trigger overflows instead. */
-.version-picker-button-small::part(content) {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-    width: auto;
-    overflow: hidden;
-}
-
-/* width:100% re-ties to the 104px-capped host (container is width:inherit,
-   which copies width but not max-width). Border/bg/states are shared above. */
-.version-picker-button-small::part(container) {
-    width: 100%;
-    height: var(--dx-g-spacing-lg);
-    padding: 0 var(--dx-g-spacing-xs);
-}
-
-.selected-version-small {
-    flex: 1;
-    min-width: 0;
-}
-
-.version-picker-dot {
-    flex: 0 0 auto;
-    width: var(--dx-g-spacing-sm);
-    height: var(--dx-g-spacing-sm);
-    margin-right: var(--dx-g-spacing-xs);
-    border-radius: 50%;
-}
-
-.version-picker-dot-latest {
-    background: var(--dx-g-green-vibrant-60);
-}
-
-.version-picker-dot-not-latest {
-    background: var(--dx-g-yellow-vibrant-80);
-}
-
-/* inline-block (not flex) so the label can truncate; line-height centers it. */
-.version-picker-readonly {
-    box-sizing: border-box;
-    display: inline-block;
-    width: var(--dx-version-picker-width, 296px);
-    height: var(--dx-g-spacing-xl);
-    margin: 0;
-    padding: 0 var(--dx-g-spacing-sm);
-    border: 1px solid var(--dx-g-gray-80);
-    border-radius: var(--dx-g-spacing-xs);
-    overflow: hidden;
-    color: var(--dx-g-gray-10);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font: var(--dx-g-font-normal) var(--dx-g-text-sm) / var(--dx-g-spacing-xl)
-            var(--dx-g-font-sans),
-        sans-serif;
-}
-
-.version-picker-readonly-small {
-    width: fit-content;
-    max-width: 104px;
-    height: var(--dx-g-spacing-lg);
-    padding: 0 var(--dx-g-spacing-xs);
-    font: var(--dx-g-font-normal) var(--dx-g-text-xs) / var(--dx-g-spacing-lg)
-            var(--dx-g-font-sans),
-        sans-serif;
-}

package/src/modules/dx/versionPicker/versionPicker.html

@@ -1,73 +0,0 @@
-<template>
-    <div lwc:if={showVersionPicker} class={containerClass}>
-        <!-- Small read-only: plain value, no dropdown -->
-        <p
-            lwc:if={readOnly}
-            class={readOnlyClass}
-            title={selectedVersion.label}
-        >
-            {selectedVersion.label}
-        </p>
-
-        <dx-dropdown
-            lwc:else
-            class={dropdownClass}
-            options={versions}
-            analytics-event="custEv_docVersionSelect"
-            analytics-payload={analyticsPayload}
-            value={selectedVersion.id}
-            width-mode={dropdownWidthMode}
-            onchange={onVersionChange}
-        >
-            <dx-button
-                class={triggerClass}
-                variant="tertiary"
-                size="small"
-                font="sans"
-                icon-symbol="chevrondown"
-                icon-size={triggerIconSize}
-                aria-label={triggerAriaLabel}
-            >
-                <div class={selectedVersionClass}>
-                    <!-- Small: leading colored dot -->
-                    <template lwc:if={small}>
-                        <template lwc:if={showLatestTag}>
-                            <span class={dotClass} aria-hidden="true"></span>
-                        </template>
-                        <p
-                            class="selected-version-label"
-                            title={selectedVersion.label}
-                        >
-                            {selectedVersion.label}
-                        </p>
-                    </template>
-                    <!-- Default: trailing Latest/Not-Latest badge -->
-                    <template lwc:else>
-                        <p
-                            class="selected-version-label"
-                            title={selectedVersion.label}
-                        >
-                            {selectedVersion.label}
-                        </p>
-                        <template lwc:if={showLatestTag}>
-                            <dx-type-badge
-                                class="latest-badge"
-                                lwc:if={latestVersion}
-                                variant="status-success"
-                                value="Latest"
-                                size="small"
-                            ></dx-type-badge>
-                            <dx-type-badge
-                                class="not-latest-badge"
-                                lwc:else
-                                variant="status-warning"
-                                value="Not Latest"
-                                size="small"
-                            ></dx-type-badge>
-                        </template>
-                    </template>
-                </div>
-            </dx-button>
-        </dx-dropdown>
-    </div>
-</template>

package/src/modules/dx/versionPicker/versionPicker.ts

@@ -1,157 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import cx from "classnames";
-
-import { AnalyticsPayload, OptionWithNested } from "typings/custom";
-
-import { toJson, normalizeBoolean } from "dxUtils/normalizers";
-
-export default class VersionPicker extends LightningElement {
-    @api analyticsEvent?: string;
-    @api analyticsPayload?: AnalyticsPayload;
-
-    @track private _versions!: OptionWithNested[];
-    private _selectedVersion?: OptionWithNested;
-    private _latestVersion: boolean = false;
-    private _hideBadge: boolean = false;
-    private _small: boolean = false;
-    private _readOnly: boolean = false;
-
-    @api
-    get versions() {
-        return this._versions;
-    }
-
-    set versions(value: OptionWithNested[]) {
-        this._versions = toJson(value);
-    }
-
-    @api
-    get selectedVersion(): OptionWithNested | undefined {
-        return this._selectedVersion || this.versions[0];
-    }
-
-    set selectedVersion(value: OptionWithNested) {
-        if (value) {
-            this._selectedVersion = toJson(value);
-        }
-    }
-
-    @api
-    get latestVersion() {
-        return this._latestVersion;
-    }
-
-    set latestVersion(value) {
-        this._latestVersion = normalizeBoolean(value);
-    }
-
-    @api
-    get hideBadge() {
-        return this._hideBadge;
-    }
-
-    set hideBadge(value) {
-        this._hideBadge = normalizeBoolean(value);
-    }
-
-    // Opt-in compact "dot" variant (24px, abbreviated label). Off by default so
-    // existing consumers render the default trigger unchanged.
-    @api
-    get small() {
-        return this._small;
-    }
-
-    set small(value) {
-        this._small = normalizeBoolean(value);
-    }
-
-    // Opt-in read-only state: plain value, no dropdown menu.
-    @api
-    get readOnly() {
-        return this._readOnly;
-    }
-
-    set readOnly(value) {
-        this._readOnly = normalizeBoolean(value);
-    }
-
-    private get showVersionPicker() {
-        return this._versions && this._versions.length !== 0;
-    }
-
-    private get containerClass(): string {
-        return this.small
-            ? "version-picker-container-small"
-            : "version-picker-container";
-    }
-
-    private get showLatestTag(): boolean {
-        return !this.hideBadge;
-    }
-
-    private get readOnlyClass(): string {
-        return cx(
-            "version-picker-readonly",
-            this.small && "version-picker-readonly-small"
-        );
-    }
-
-    private get dotClass(): string {
-        return `version-picker-dot ${
-            this.latestVersion
-                ? "version-picker-dot-latest"
-                : "version-picker-dot-not-latest"
-        }`;
-    }
-
-    // Accessible name for the small trigger: includes the latest state so it
-    // isn't conveyed by the dot's color alone (WCAG 1.4.1). Omits the state
-    // when the indicator is hidden.
-    private get smallTriggerAriaLabel(): string {
-        const label = this.selectedVersion?.label ?? "";
-        if (!this.showLatestTag) {
-            return label;
-        }
-        return `${label}, ${this.latestVersion ? "Latest" : "Not Latest"}`;
-    }
-
-    // --- Per-variant values for the shared dropdown/button markup below. The
-    // small variant opts into extra classes and a compact chevron.
-
-    // Not cx(): the default must have NO class attribute (cx returns "", which
-    // would render class="" and break the frozen consumer snapshots).
-    private get dropdownClass(): string | undefined {
-        return this.small ? "version-picker-dropdown-small" : undefined;
-    }
-
-    // "full" matches the trigger (ToC width). "fit-end" sizes to the labels,
-    // caps at the ToC width, and opens inward.
-    private get dropdownWidthMode(): "full" | "fit-end" {
-        return this.small ? "fit-end" : "full";
-    }
-
-    private get triggerClass(): string {
-        return cx(
-            "version-picker-button",
-            this.small && "version-picker-button-small"
-        );
-    }
-
-    private get triggerIconSize(): string {
-        return this.small ? "xsmall" : "medium";
-    }
-
-    // Default returns "" (dx-button's own default) so the trigger's rendered
-    // aria-label is unchanged for the default variant.
-    private get triggerAriaLabel(): string {
-        return this.small ? this.smallTriggerAriaLabel : "";
-    }
-
-    private get selectedVersionClass(): string {
-        return cx("selected-version", this.small && "selected-version-small");
-    }
-
-    private onVersionChange(e: CustomEvent) {
-        this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
-    }
-}