@salesforcedevs/dx-components 1.40.0 → 1.40.1-proj-ver-picker-1

package/package.json

@@ -1,48 +1,48 @@
 {
-    "name": "@salesforcedevs/dx-components",
-    "version": "1.40.0",
-    "description": "DX Lightning web components",
-    "license": "MIT",
-    "engines": {
-        "node": "22.x"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "dependencies": {
-        "@coveo/headless": "3.22.2",
-        "@floating-ui/dom": "1.5.1",
-        "@optimizely/optimizely-sdk": "5.3.0",
-        "@shikijs/colorized-brackets": "^3.12.2",
-        "@types/throttle-debounce": "5.0.2",
-        "@vimeo/player": "2.22.0",
-        "classnames": "2.5.1",
-        "composed-offset-position": "0.0.4",
-        "coveo-search-ui": "2.10113.0",
-        "debounce": "1.2.1",
-        "js-cookie": "3.0.5",
-        "lodash.defaults": "4.2.0",
-        "lodash.get": "4.4.2",
-        "lodash.kebabcase": "4.1.1",
-        "memoize-one": "6.0.0",
-        "microtip": "0.2.2",
-        "shiki": "^3.12.2",
-        "throttle-debounce": "5.0.0",
-        "uuid": "9.0.1"
-    },
-    "devDependencies": {
-        "@types/classnames": "2.3.1",
-        "@types/debounce": "1.2.4",
-        "@types/js-cookie": "3.0.6",
-        "@types/lodash.defaults": "4.2.9",
-        "@types/lodash.get": "4.4.9",
-        "@types/lodash.kebabcase": "4.1.9",
-        "@types/luxon": "3.4.2",
-        "@types/uuid": "8.3.4",
-        "@types/vimeo__player": "2.18.3",
-        "eventsourcemock": "2.0.0",
-        "luxon": "3.4.4",
-        "msw": "^2.12.4"
-    },
-    "gitHead": "db75cd19dd7a77fe4e09856439c4905c32e64d1f"
-}
+  "name": "@salesforcedevs/dx-components",
+  "version": "1.40.1-proj-ver-picker-1",
+  "description": "DX Lightning web components",
+  "license": "MIT",
+  "engines": {
+    "node": "22.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@coveo/headless": "3.22.2",
+    "@floating-ui/dom": "1.5.1",
+    "@optimizely/optimizely-sdk": "5.3.0",
+    "@shikijs/colorized-brackets": "^3.12.2",
+    "@types/throttle-debounce": "5.0.2",
+    "@vimeo/player": "2.22.0",
+    "classnames": "2.5.1",
+    "composed-offset-position": "0.0.4",
+    "coveo-search-ui": "2.10113.0",
+    "debounce": "1.2.1",
+    "js-cookie": "3.0.5",
+    "lodash.defaults": "4.2.0",
+    "lodash.get": "4.4.2",
+    "lodash.kebabcase": "4.1.1",
+    "memoize-one": "6.0.0",
+    "microtip": "0.2.2",
+    "shiki": "^3.12.2",
+    "throttle-debounce": "5.0.0",
+    "uuid": "9.0.1"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.3.1",
+    "@types/debounce": "1.2.4",
+    "@types/js-cookie": "3.0.6",
+    "@types/lodash.defaults": "4.2.9",
+    "@types/lodash.get": "4.4.9",
+    "@types/lodash.kebabcase": "4.1.9",
+    "@types/luxon": "3.4.2",
+    "@types/uuid": "8.3.4",
+    "@types/vimeo__player": "2.18.3",
+    "eventsourcemock": "2.0.0",
+    "luxon": "3.4.4",
+    "msw": "^2.12.4"
+  },
+  "stableVersion": "1.40.0"
+}

package/src/modules/dx/button/button.css

@@ -86,11 +86,11 @@
 }
 
 .button.icon-right:not(.slot-empty) > *:nth-child(2) {
-    margin-left: var(--dx-g-spacing-sm);
+    margin-left: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
 }
 
 .button.icon-left:not(.slot-empty) > *:nth-child(2) {
-    margin-right: var(--dx-g-spacing-sm);
+    margin-right: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
 }
 
 .button.style-icon.slot-empty {

package/src/modules/dx/dropdown/dropdown.css

@@ -14,6 +14,20 @@
     display: none;
 }
 
+/* Opt-in fit-content menu: grows to content (capped at the popover's viewport
+   max-width); long labels truncate instead of wrapping. */
+.menu-fit-content::part(content) {
+    width: max-content;
+}
+
+.menu-fit-content {
+    --dx-c-dropdown-option-min-width: 0;
+    --dx-c-dropdown-option-label-display: block;
+    --dx-c-dropdown-option-white-space: nowrap;
+    --dx-c-dropdown-option-overflow: hidden;
+    --dx-c-dropdown-option-text-overflow: ellipsis;
+}
+
 @media screen and (max-width: 1000px) {
     .menu-nested .menu_option:not(:first-child) {
         border-top: var(--border);

package/src/modules/dx/dropdown/dropdown.html

@@ -2,7 +2,7 @@
     <dx-popover
         aria-label={ariaLabel}
         class={className}
-        full-width={fullWidth}
+        full-width={effectiveFullWidth}
         offset={offset}
         onclose={onClose}
         open-on-hover={openOnHover}
@@ -10,7 +10,7 @@
         page-padding={pagePadding}
         placement={placement}
         small={small}
-        width={width}
+        width={effectiveWidth}
     >
         <slot slot="control"></slot>
         <div

package/src/modules/dx/dropdown/dropdown.ts

@@ -2,7 +2,8 @@ import {
     AnalyticsPayload,
     OptionWithNested,
     PopperPlacement,
-    DropdownVariant
+    DropdownVariant,
+    DropdownWidthMode
 } from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
@@ -37,6 +38,7 @@ export default class Dropdown extends LightningElement {
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
+    @api widthMode: DropdownWidthMode = "fixed";
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;
@@ -80,12 +82,32 @@ export default class Dropdown extends LightningElement {
         return this.areOptionsEmpty ? null : "menu";
     }
 
+    private get isFitContent() {
+        return this.widthMode === "fit-content";
+    }
+
+    // fit-content takes precedence; the misuse is surfaced in className() below.
+    private get effectiveWidth() {
+        return this.isFitContent ? null : this.width;
+    }
+
+    private get effectiveFullWidth() {
+        return this.isFitContent ? false : this.fullWidth;
+    }
+
     private get className() {
+        const fitContent = this.isFitContent;
+        if (fitContent && (this.width || this.fullWidth)) {
+            console.error(
+                'The "width-mode=fit-content" and "width"/"full-width" properties cannot be provided simultaneously. "width-mode=fit-content" is prioritized; "width"/"full-width" are ignored.'
+            );
+        }
         return cx(
             this.isNested && "menu-nested",
             this.isNested && this.options.length >= 2 && "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
-            this.areOptionsEmpty && "menu-hidden"
+            this.areOptionsEmpty && "menu-hidden",
+            fitContent && "menu-fit-content"
         );
     }
 

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -25,9 +25,14 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-    padding: var(--dx-g-spacing-sm);
+
+    /* Opt-in hooks; defaults preserve today's look. */
+    padding: var(--dx-c-dropdown-option-padding, var(--dx-g-spacing-sm));
     font-size: var(--dx-g-text-sm);
-    border-radius: var(--dx-g-spacing-xs);
+    border-radius: var(
+        --dx-c-dropdown-option-border-radius,
+        var(--dx-g-spacing-xs)
+    );
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
@@ -58,6 +63,9 @@
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     text-align: left;
+
+    /* Opt-in: set to 0 to let a long label truncate instead of overflow. */
+    min-width: var(--dx-c-dropdown-option-min-width, auto);
 }
 
 .option-indented .option_details {
@@ -67,10 +75,19 @@
 
 .option_label {
     color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
-    display: flex;
+
+    /* Opt-in: set to block so text-overflow:ellipsis applies (ignored on flex). */
+    display: var(--dx-c-dropdown-option-label-display, flex);
     align-items: center;
     font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
+
+    /* Opt-in truncation: consumers set --dx-c-dropdown-option-white-space:
+       nowrap to truncate labels with an ellipsis instead of wrapping.
+       Defaults preserve today's wrapping behavior. */
+    white-space: var(--dx-c-dropdown-option-white-space, normal);
+    overflow: var(--dx-c-dropdown-option-overflow, visible);
+    text-overflow: var(--dx-c-dropdown-option-text-overflow, clip);
 }
 
 .option-indented .option_label {

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -7,6 +7,7 @@ import {
     IconSprite,
     IconData,
     IconSymbol,
+    StatusBadgeVariant,
     TypeBadgeSize
 } from "typings/custom";
 import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
@@ -20,9 +21,16 @@ import {
     getContentTypeColorVariables
 } from "dxUtils/contentTypes";
 
+// Opt-in solid status variants (status-success/-warning/-error).
+export const STATUS_BADGE_VARIANTS: StatusBadgeVariant[] = [
+    "status-success",
+    "status-warning",
+    "status-error"
+];
+
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
-    @api variant: Brand | ContentType = "default";
+    @api variant: Brand | ContentType | StatusBadgeVariant = "default";
     @api color?: Color;
     @api dark?: false;
 
@@ -87,11 +95,24 @@ export default class TypeBadge extends LightningElement {
         return isContentType(this.variant);
     }
 
+    private get isStatus(): boolean {
+        return STATUS_BADGE_VARIANTS.includes(
+            this.variant as StatusBadgeVariant
+        );
+    }
+
     private get className(): string {
-        return cx("dx-badge", `size-${this.size}`);
+        return cx(
+            "dx-badge",
+            `size-${this.size}`,
+            this.isStatus && this.variant
+        );
     }
 
     private get style(): string {
+        if (this.isStatus) {
+            return "";
+        }
         if (this.dark) {
             return buildStyleColorVariables({
                 background: "--dx-g-purple-vibrant-40",

package/src/modules/dxHelpers/typeBadge/typeBadge.css

@@ -26,6 +26,28 @@
     --height: var(--dx-g-spacing-mlg);
 }
 
+.dx-badge.status-success,
+.dx-badge.status-warning,
+.dx-badge.status-error {
+    /* No spacing token maps to 10px; status badges need this exact padding. */
+    --horizontal-spacing: 10px;
+}
+
+.dx-badge.status-success {
+    --color: var(--sds-g-gray-1);
+    --background: var(--dx-g-green-vibrant-50);
+}
+
+.dx-badge.status-warning {
+    --color: var(--dx-g-gray-15);
+    --background: var(--dx-g-yellow-vibrant-80);
+}
+
+.dx-badge.status-error {
+    --color: var(--sds-g-gray-1);
+    --background: var(--dx-g-red-vibrant-40);
+}
+
 svg,
 dx-icon {
     margin-right: var(--dx-g-spacing-sm);

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.