@salesforcedevs/dx-components 1.40.1 → 1.40.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.40.1",
+    "version": "1.40.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "e14396ab322a7cec69a1ebf180adbf8ac2902c3b"
+    "gitHead": "c8c3bb1003d40a55fdd5733c7891dcca3931fb24"
 }

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

@@ -132,12 +132,62 @@
     width: var(--dx-c-slot-empty-width, 52px);
 }
 
+/*
+ * Renders a primary/secondary/tertiary button as an icon-only square while
+ * keeping a slotted label in the DOM for screen readers. The square width
+ * reuses --dx-c-slot-empty-width so callers can tune it the same way as the
+ * slot-empty path. position: relative anchors the visually-hidden label.
+ */
+.button.variant_primary.icon-only,
+.button.variant_secondary.icon-only,
+.button.variant_tertiary.icon-only {
+    position: relative;
+    padding: 0;
+}
+
+.button.size-large.icon-only {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-3xl));
+}
+
+.button.size-small.icon-only {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
+}
+
+.button.size-hero.icon-only {
+    width: var(--dx-c-slot-empty-width, 52px);
+}
+
+/*
+ * Visually hide the slotted label but keep it accessible. Scoped to the
+ * content span (not the loading-message span) so the loading state still
+ * reads out.
+ */
+.button.icon-only > span[part="content"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* The hidden label leaves no visible text, so drop the icon gap. */
+.button.icon-only.icon-right > *:nth-child(2),
+.button.icon-only.icon-left > *:nth-child(2) {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 /* primary */
 
 .button.variant_primary {
     color: white;
     background: var(--dx-c-button-primary-color);
-    border: 1px solid var(--dx-c-button-primary-color);
+    border: var(--dx-c-button-border-width, 1px) solid
+        var(--dx-c-button-primary-color);
 }
 
 .button.variant_primary:hover,
@@ -159,7 +209,8 @@
 .button.variant_secondary,
 .button.variant_quaternary {
     color: var(--dx-c-button-secondary-color);
-    border: 1px solid var(--dx-c-button-secondary-color);
+    border: var(--dx-c-button-border-width, var(--dx-g-spacing-2xs)) solid
+        var(--dx-c-button-secondary-color);
 }
 
 .button.variant_secondary:hover,
@@ -175,7 +226,7 @@
 .button.variant_inline,
 .button.variant_inline-inherit {
     color: var(--dx-c-button-inline-color);
-    border: 1px solid transparent;
+    border: var(--dx-c-button-border-width, 1px) solid transparent;
 }
 
 .button.variant_inline.light-text {
@@ -221,7 +272,8 @@
 .button.variant_icon-only:hover.state-disabled {
     color: var(--dx-c-button-custom-color);
     background: var(--dx-c-button-custom-background);
-    border: 1px solid var(--dx-c-button-custom-border);
+    border: var(--dx-c-button-border-width, 1px) solid
+        var(--dx-c-button-custom-border);
 }
 
 .button.variant_custom:hover,

package/src/modules/dx/button/button.ts

@@ -22,6 +22,7 @@ export default class Button extends LightningElement {
     @api loading: boolean = false;
     @api size: ButtonSize = "small";
     @api variant: ButtonVariant = "primary";
+    @api iconOnly: boolean = false;
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
     @api form: string | undefined;
@@ -61,6 +62,7 @@ export default class Button extends LightningElement {
             `variant_${this.variant}`,
             {
                 "slot-empty": !isIconOnly && !this.loading && this.isSlotEmpty,
+                "icon-only": this.iconOnly,
                 "state-disabled": this.disabled,
                 "state-loading": this.loading,
                 "style-icon": !!this.iconSymbol,

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

@@ -1,6 +1,6 @@
 @import "dxHelpers/reset";
 
-.menu-nested::part(content) {
+.menu-nested:not(.menu-fit-content)::part(content) {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
 }
@@ -14,6 +14,32 @@
     display: none;
 }
 
+.menu-fit-content {
+    --dx-c-popover-width: max-content;
+    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+}
+
+.menu-fit-content .menu_list {
+    width: 100%;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content.menu-nested .menu_option:not(:first-child) {
+    border-top: var(--border);
+    margin-top: 0;
+    padding-top: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content .menu_heading {
+    margin: 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-sans);
+    line-height: var(--dx-g-spacing-mlg);
+    text-transform: none;
+    color: var(--dx-g-gray-10);
+}
+
 @media screen and (max-width: 1000px) {
     .menu-nested .menu_option:not(:first-child) {
         border-top: var(--border);
@@ -52,7 +78,7 @@
 }
 
 .menu_option {
-    --border: 1px solid var(--dx-g-blue-natural-90);
+    --border: 1px solid var(--dx-g-gray-80);
 
     display: flex;
     flex-direction: column;
@@ -70,7 +96,6 @@
     font-size: var(--dx-g-text-sm);
     font-weight: bold;
     text-transform: uppercase;
-    letter-spacing: 1px;
     margin: var(--dx-g-spacing-sm);
 }
 

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

@@ -2,15 +2,16 @@
     <dx-popover
         aria-label={ariaLabel}
         class={className}
-        full-width={fullWidth}
+        full-width={effectiveFullWidth}
         offset={offset}
         onclose={onClose}
+        onopen={onOpen}
         open-on-hover={openOnHover}
         open={open}
         page-padding={pagePadding}
         placement={placement}
         small={small}
-        width={width}
+        width={effectiveWidth}
     >
         <slot slot="control"></slot>
         <div
@@ -33,6 +34,7 @@
                     option={option}
                     nav-item-label={navItemLabel}
                     variant={variant}
+                    width-mode={widthMode}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -52,6 +54,7 @@
                             onselect={onOptionClick}
                             option={suboption}
                             nav-item-label={navItemLabel}
+                            width-mode={widthMode}
                         ></dx-dropdown-option>
                     </template>
                     <dx-button

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,29 @@ export default class Dropdown extends LightningElement {
         return this.areOptionsEmpty ? null : "menu";
     }
 
+    private get isFitContent() {
+        return this.widthMode === "fit-content";
+    }
+
+    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;
         return cx(
             this.isNested && "menu-nested",
-            this.isNested && this.options.length >= 2 && "menu-nested-2-col",
+            this.isNested &&
+                this.options.length >= 2 &&
+                !fitContent &&
+                "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
-            this.areOptionsEmpty && "menu-hidden"
+            this.areOptionsEmpty && "menu-hidden",
+            fitContent && "menu-fit-content"
         );
     }
 
@@ -166,6 +185,11 @@ export default class Dropdown extends LightningElement {
 
     private onClose(): void {
         this._focusedValue = null;
+        this.dispatchEvent(new CustomEvent("close"));
+    }
+
+    private onOpen(): void {
+        this.dispatchEvent(new CustomEvent("open"));
     }
 
     private focusDefaultOption() {

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

@@ -1,8 +1,8 @@
 @import "dxHelpers/reset";
 
 .indented-shape {
-    --background: rgb(170 203 255);
-    --wide: 2px;
+    --background: var(--dx-g-cloud-blue-vibrant-80);
+    --wide: var(--dx-g-spacing-2xs);
 
     background-color: var(--background);
     height: var(--wide);
@@ -27,22 +27,23 @@
     width: 100%;
     padding: var(--dx-g-spacing-sm);
     font-size: var(--dx-g-text-sm);
-    border-radius: var(--dx-g-spacing-xs);
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
 }
 
-.option:focus {
-    box-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-50);
-}
-
 .option:active {
     background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
-.option:not(.option-active):hover {
-    background: var(--dx-g-gray-95);
+.option:not(.option-active):hover,
+.option:not(.option-active):focus-visible {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.option:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
+        inset 0 0 0 4px white;
 }
 
 .option-active {
@@ -101,6 +102,46 @@
     padding-bottom: var(--dx-g-spacing-xs);
 }
 
+.option-fit-content {
+    min-width: 0;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
+}
+
+.option-fit-content .option_details {
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+    min-width: 0;
+    flex: 1;
+}
+
+.option-fit-content .option_description {
+    margin-top: 0;
+}
+
+.option-fit-content .option_label {
+    display: block;
+    color: var(--dx-g-gray-10);
+    font-weight: var(--dx-g-font-normal);
+    line-height: var(--dx-g-spacing-lg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100vw - var(--dx-g-spacing-lg) * 4);
+}
+
+.option-fit-content.option-active .option_label {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.option-fit-content .option_icon {
+    --dx-c-icon-size: var(--dx-g-icon-size-md);
+    --dx-c-icon-color: var(--dx-g-gray-50);
+
+    order: 1;
+    margin-right: 0;
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
 .option-indented:not([data-index="0"]) {
     --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
     --shape-width: 8px;

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -15,7 +15,7 @@
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
             if:true={option.iconSymbol}
-            size="large"
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -45,7 +45,7 @@
             sprite={option.iconSprite}
             color={option.iconColor}
             if:true={option.iconSymbol}
-            size="large"
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -3,7 +3,9 @@ import cx from "classnames";
 import {
     OptionWithNested,
     AnalyticsPayload,
-    DropdownVariant
+    DropdownVariant,
+    DropdownWidthMode,
+    IconSize
 } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
@@ -16,6 +18,7 @@ export default class DropdownOption extends LightningElement {
     @api analyticsPayload?: AnalyticsPayload | undefined;
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
+    @api widthMode: DropdownWidthMode = "fixed";
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -29,7 +32,8 @@ export default class DropdownOption extends LightningElement {
         return cx(
             "option",
             this.active && "option-active",
-            this.variant && `option-${this.variant}`
+            this.variant && `option-${this.variant}`,
+            this.widthMode === "fit-content" && "option-fit-content"
         );
     }
 
@@ -37,6 +41,10 @@ export default class DropdownOption extends LightningElement {
         return this.variant === "indented" && this.indexPosition >= 1;
     }
 
+    private get optionIconSize(): IconSize {
+        return this.widthMode === "fit-content" ? "override" : "large";
+    }
+
     private onClick(e: PointerEvent) {
         this.dispatchEvent(
             new CustomEvent("select", { detail: this.keyValue })

package/src/modules/dx/popover/popover.css

@@ -23,7 +23,7 @@
     border: var(--popover-border);
     box-shadow: var(--dx-g-box-shadow-lg);
     border-radius: var(--popover-border-radius);
-    width: 168px;
+    width: var(--dx-c-popover-width, 168px);
     max-width: calc(100vw - var(--dx-g-spacing-lg));
     max-height: 65vh;
     padding: var(--popover-padding);
@@ -44,6 +44,14 @@
     transform: var(--popover-container-open-transform);
 }
 
+/* Adjust transform for top placement */
+.popover-container[data-placement-side="top"].popover-container_open .popover {
+    transform: var(
+        --popover-container-open-transform-up,
+        var(--popover-container-open-transform)
+    );
+}
+
 .popover-overridewidth {
     max-width: unset;
 }

package/src/modules/dx/popover/popover.ts

@@ -80,7 +80,11 @@ export default class Popover extends LightningElement {
             this.control.setAttribute("aria-expanded", "true");
 
             if (this.popover) {
-                this.autoUpdateCleanup = autoUpdate(this.control, this.popover, this.setPosition);
+                this.autoUpdateCleanup = autoUpdate(
+                    this.control,
+                    this.popover,
+                    this.setPosition
+                );
             }
 
             this.dispatchEvent(new CustomEvent("open"));
@@ -337,6 +341,12 @@ export default class Popover extends LightningElement {
                     top: `${y}px`
                 });
 
+                // Expose the final placement side after any flip
+                popoverEl.setAttribute(
+                    "data-placement-side",
+                    placement.split("-")[0]
+                );
+
                 if (this.arrow && middlewareData.arrow) {
                     const { x: arrowX, y: arrowY } = middlewareData.arrow;
                     const popoverPlacementSide = placement.split("-")[0] as

package/src/modules/dx/section/section.css

@@ -65,9 +65,15 @@
 }
 
 .dx-text-display-custom {
-    color: var(--dx-c-section-heading-font-color, --dx-g-text-heading-color);
-    font-family: var(--dx-c-section-heading-font-family, --dx-g-font-display);
-    font-size: var(--dx-c-section-heading-font-size, --dx-g-text-3xl);
+    color: var(
+        --dx-c-section-heading-font-color,
+        var(--dx-g-text-heading-color)
+    );
+    font-family: var(
+        --dx-c-section-heading-font-family,
+        var(--dx-g-font-display)
+    );
+    font-size: var(--dx-c-section-heading-font-size, var(--dx-g-text-3xl));
     letter-spacing: var(--dx-c-section-heading-letter-spacing, -0.4px);
     line-height: var(--dx-c-section-heading-line-height, 40px);
 }

package/src/modules/dx/select/select.css

@@ -1,5 +1,7 @@
 :host {
     display: block;
+
+    --dx-c-select-border: 1px solid var(--dx-g-gray-50);
 }
 
 :host(:focus-visible) {
@@ -122,7 +124,7 @@ select {
 .select-element {
     height: calc(1.875rem + (1px * 2));
     width: 100%;
-    border: 1px solid #dddbda;
+    border: var(--dx-c-select-border);
     border-radius: 0.25rem;
     background-color: transparent;
     transition: border 0.1s linear, background-color 0.1s linear;

package/src/modules/dx/tooltip/tooltip.css

@@ -8,6 +8,12 @@
     display: inherit;
 }
 
+[aria-label][role~="tooltip"].is-suppressed:is(:hover, :focus)::before,
+[aria-label][role~="tooltip"].is-suppressed:is(:hover, :focus)::after {
+    opacity: 0;
+    pointer-events: none;
+}
+
 [role~="tooltip"][data-microtip-position|="bottom"]::before {
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
         no-repeat;

package/src/modules/dx/tooltip/tooltip.html

@@ -1,5 +1,10 @@
 <template>
-    <div data-microtip-position={placement} role="tooltip" aria-label={label}>
+    <div
+        class={tooltipClass}
+        data-microtip-position={placement}
+        role="tooltip"
+        aria-label={label}
+    >
         <slot></slot>
     </div>
 </template>

package/src/modules/dx/tooltip/tooltip.ts

@@ -1,6 +1,21 @@
 import { LightningElement, api } from "lwc";
+import cx from "classnames";
 
 export default class Tooltip extends LightningElement {
     @api placement?: String = "top";
     @api label: string = "";
+
+    // When true, the tooltip is shown regardless of hover/focus. Lets a
+    // consumer flash it programmatically
+    @api visible: boolean = false;
+
+    // Suppresses the tooltip while the trigger is hovered or focused e.g when a menu is open
+    @api suppressed: boolean = false;
+
+    get tooltipClass(): string {
+        return cx({
+            "is-visible": this.visible,
+            "is-suppressed": this.suppressed && !this.visible
+        });
+    }
 }

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -18,8 +18,7 @@ const VALID_BRANDS = [
     "revenue",
     "sales",
     "service",
-    "success",
-    "einstein"
+    "success"
 ];
 
 export const ANALYTICS_INFO = {

package/src/modules/dxConstants/brands/brands.ts

@@ -13,6 +13,5 @@ export const BRANDS = [
     "industries",
     "learning",
     "service",
-    "analytics",
-    "einstein"
+    "analytics"
 ] as Brand[];