@salesforcedevs/dx-components 1.40.5-topic-alpha.1 → 1.40.5-topic-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.40.5-topic-alpha.1",
+    "version": "1.40.5-topic-alpha.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -1,5 +1,11 @@
 @import "dxHelpers/reset";
 
+/* Options run edge to edge; the menu adds space above the first and below
+   the last. */
+dx-popover {
+    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+}
+
 .menu-nested:not(.menu-fit-content)::part(content) {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
@@ -14,30 +20,31 @@
     display: none;
 }
 
-/* Opt-in fit-content menu: hugs the labels (so it can be as narrow as the
-   shortest one) and stops at --dx-c-dropdown-menu-max-width. Defaults still
-   truncate; set --dx-c-dropdown-fit-white-space: normal to wrap instead. */
-.menu-fit-content::part(content) {
+/* fit-content and fit-end: the menu is as wide as its longest label. */
+.menu-fit-content {
+    --dx-c-popover-width: max-content;
+}
+
+/* fit-end also stops at --dx-c-dropdown-menu-max-width. Labels wrap only once
+   the menu reaches that width. */
+.menu-fit-end::part(content) {
     box-sizing: border-box;
-    width: max-content;
     max-width: var(
         --dx-c-dropdown-menu-max-width,
         calc(100vw - var(--dx-g-spacing-lg))
     );
 }
 
-.menu-fit-content {
-    --dx-c-dropdown-option-min-width: 0;
-    --dx-c-dropdown-option-label-display: block;
-    --dx-c-dropdown-option-white-space: var(
-        --dx-c-dropdown-fit-white-space,
-        nowrap
-    );
-    --dx-c-dropdown-option-overflow: var(--dx-c-dropdown-fit-overflow, hidden);
-    --dx-c-dropdown-option-text-overflow: var(
-        --dx-c-dropdown-fit-text-overflow,
-        ellipsis
-    );
+.menu-fit-content.menu-nested .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);
 }
 
 @media screen and (max-width: 1000px) {
@@ -91,12 +98,13 @@
 
 .menu_heading {
     display: block;
-    color: var(--dx-g-blue-vibrant-20);
-    font-family: var(--dx-g-font-display);
+    margin: 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    color: var(--dx-g-gray-10);
+    font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     font-weight: bold;
-    text-transform: uppercase;
-    margin: var(--dx-g-spacing-sm);
+    line-height: var(--dx-g-spacing-mlg);
 }
 
 .callout_link {
@@ -105,7 +113,7 @@
     display: block;
     padding-top: var(--dx-g-spacing-xl);
     margin-top: auto;
-    margin-left: var(--dx-g-spacing-sm);
+    margin-left: var(--dx-g-spacing-lg);
 }
 
 .empty {

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

@@ -35,6 +35,7 @@
                     nav-item-label={navItemLabel}
                     variant={variant}
                     width-mode={widthMode}
+                    show-icon={showOptionIcons}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -55,6 +56,7 @@
                             option={suboption}
                             nav-item-label={navItemLabel}
                             width-mode={widthMode}
+                            show-icon={showOptionIcons}
                         ></dx-dropdown-option>
                     </template>
                     <dx-button

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

@@ -39,6 +39,7 @@ export default class Dropdown extends LightningElement {
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
     @api widthMode: DropdownWidthMode = "fixed";
+    @api showOptionIcons?: boolean = false; // right-aligned option icons (opt-in)
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;
@@ -119,7 +120,8 @@ export default class Dropdown extends LightningElement {
                 "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
             this.areOptionsEmpty && "menu-hidden",
-            fitContent && "menu-fit-content"
+            fitContent && "menu-fit-content",
+            this.widthMode === "fit-end" && "menu-fit-end"
         );
     }
 

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

@@ -25,14 +25,12 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-
-    /* 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-c-dropdown-option-border-radius,
-        var(--dx-g-spacing-xs)
+    padding: var(
+        --dx-c-dropdown-option-padding,
+        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg)
     );
+    font-size: var(--dx-g-text-sm);
+    border-radius: var(--dx-c-dropdown-option-border-radius, 0);
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
@@ -62,27 +60,33 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+    flex: 1;
+    min-width: 0;
     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 {
     align-items: center;
     flex-direction: row;
+    gap: 0;
 }
 
 .option_label {
-    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-gray-10));
 
     /* 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-weight: var(
+        --dx-c-dropdown-option-font-weight,
+        var(--dx-g-font-normal)
+    );
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
+    line-height: var(--dx-g-spacing-lg);
 
     /* Opt-in truncation: consumers set --dx-c-dropdown-option-white-space:
        nowrap to truncate labels with an ellipsis instead of wrapping.
@@ -107,13 +111,17 @@
 
 .option_description {
     color: var(--dx-g-gray-30);
-    margin-top: var(--dx-g-spacing-xs);
     line-height: 18px;
 }
 
+/* Only rendered when the dropdown sets show-option-icons. */
 .option_icon {
-    margin-right: var(--dx-g-spacing-md);
+    --dx-c-icon-size: var(--dx-g-icon-size-md);
+    --dx-c-icon-color: var(--dx-g-gray-50);
+
+    order: 1;
     flex-shrink: 0;
+    margin-left: var(--dx-g-spacing-2xl);
 }
 
 .option-indented {
@@ -121,46 +129,19 @@
     padding-bottom: var(--dx-g-spacing-xs);
 }
 
+/* fit-content (toolbar): one line per label, truncated with an ellipsis. */
 .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

@@ -14,8 +14,8 @@
             class="option_icon"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
-            if:true={option.iconSymbol}
-            size={optionIconSize}
+            lwc:if={renderIcon}
+            size="override"
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -44,8 +44,8 @@
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
             color={option.iconColor}
-            if:true={option.iconSymbol}
-            size={optionIconSize}
+            lwc:if={renderIcon}
+            size="override"
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>

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

@@ -4,8 +4,7 @@ import {
     OptionWithNested,
     AnalyticsPayload,
     DropdownVariant,
-    DropdownWidthMode,
-    IconSize
+    DropdownWidthMode
 } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
@@ -19,6 +18,7 @@ export default class DropdownOption extends LightningElement {
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
     @api widthMode: DropdownWidthMode = "fixed";
+    @api showIcon: boolean = false;
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -41,8 +41,9 @@ export default class DropdownOption extends LightningElement {
         return this.variant === "indented" && this.indexPosition >= 1;
     }
 
-    private get optionIconSize(): IconSize {
-        return this.widthMode === "fit-content" ? "override" : "large";
+    // Icons are opt-in (right-aligned); without show-icon there is no icon or spacing.
+    private get renderIcon() {
+        return this.showIcon && !!this.option.iconSymbol;
     }
 
     private onClick(e: PointerEvent) {

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-sidebar-width: 337px;
+    --dx-c-sidebar-width: 336px;
     --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-background: white;
     --dx-c-sidebar-button-border: white;
@@ -11,7 +11,13 @@
     --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-    --doc-version-picker-width: 296px;
+
+    /* Width of the sidebar content (search field, version pickers): the
+       sidebar minus its 16px left and 24px right insets. 296px on desktop. */
+    --doc-version-picker-width: calc(
+        var(--dx-c-sidebar-width) - var(--dx-g-spacing-md) -
+            var(--dx-g-spacing-lg)
+    );
 }
 
 .header {