@salesforcedevs/dx-components 1.3.5-lightdom-3 → 1.3.6-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.5-lightdom-3",
+    "version": "1.3.6-alpha.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -11,7 +11,7 @@
     },
     "dependencies": {
         "@coveo/headless": "^1.32.0",
-        "@floating-ui/dom": "^0.5.3",
+        "@floating-ui/dom": "^1.0.4",
         "@sfdocs-internal/wires": "^0.6.3",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",

package/src/modules/dx/brandThemeProvider/brandThemeProvider.html

@@ -1,4 +1,3 @@
-<template lwc:render-mode="light">
+<template>
     <slot></slot>
-    <div id="extra_brand_styles"></div>
 </template>

package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts

@@ -3,7 +3,7 @@ import brandCssVars from "./brandCssVars";
 import { Brand } from "typings/custom";
 
 export const toCss = (brand: Brand | null) => `
-    body, header, dx-card-small {
+  :host {
     ${brandCssVars.reduce(
         (acc, v) => `
           ${acc}
@@ -15,8 +15,6 @@ export const toCss = (brand: Brand | null) => `
 `;
 
 export default class BrandThemeProvider extends LightningElement {
-    static renderMode = "light";
-
     @api brand: Brand | null = null;
 
     private get css() {
@@ -32,18 +30,17 @@ export default class BrandThemeProvider extends LightningElement {
     }
 
     setBrandVars() {
-        let style = this.querySelector("style");
-
+        let style = this.template.querySelector("style");
         if (!style) {
             style = document.createElement("style");
-            this.querySelector("#extra_brand_styles")?.appendChild(style);
+            this.template.appendChild(style);
         }
 
-        if (style?.firstChild) {
+        if (style.firstChild) {
             style.removeChild(style.firstChild);
         }
 
         const css = document.createTextNode(this.css);
-        style?.appendChild(css);
+        style.appendChild(css);
     }
 }

package/src/modules/dx/button/{button.scoped.css → button.css}

@@ -1,3 +1,5 @@
+@import "dxHelpers/reset";
+
 :host {
     width: min-content;
     font-size: inherit;

package/src/modules/dx/button/button.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <button
         if:false={href}
         class={className}
@@ -7,9 +7,8 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading} class="button-content">
-            {buttonText}
-            <slot></slot>
+        <span if:false={loading}>
+            <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
             if:true={showIcon}
@@ -30,9 +29,8 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading} class="button-content">
-            {buttonText}
-            <slot></slot>
+        <span if:false={loading}>
+            <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
             if:true={showIcon}

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

@@ -5,12 +5,11 @@ import {
     ButtonVariant,
     IconSprite,
     IconSize,
-    IconSymbol
+    IconSymbol,
+    LightningSlotElement
 } from "typings/custom";
 
 export default class Button extends LightningElement {
-    static renderMode = "light";
-
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
     @api iconSize?: IconSize = "small";
@@ -24,7 +23,6 @@ export default class Button extends LightningElement {
     @api font: "display" | "sans" = "display";
     @api name?: string;
     @api value?: any;
-    @api buttonText?: string;
 
     // button props
     @api type: "submit" | "reset" | "button" = "button";
@@ -36,17 +34,13 @@ export default class Button extends LightningElement {
     @api rel: string | null = null;
 
     @api focus() {
-        const button = this.querySelector(".button");
+        const button = this.template.querySelector(".button");
         if (button) {
             button.focus();
         }
     }
 
-    _isSlotEmpty: boolean = true;
-
-    renderedCallback(): void {
-        this._isSlotEmpty = this.isSlotEmpty();
-    }
+    private isSlotEmpty: boolean = true;
 
     private get showIcon(): boolean {
         return !!this.iconSymbol && !this.loading;
@@ -61,16 +55,14 @@ export default class Button extends LightningElement {
             this.loading && "state-loading",
             `size-${this.size}`,
             !!this.iconSymbol && "style-icon",
-            this._isSlotEmpty && "slot-empty",
+            this.isSlotEmpty && "slot-empty",
             `font-${this.font}`,
             this.iconPosition === "right" ? "icon-right" : "icon-left"
         );
     }
 
-    private isSlotEmpty() {
-        return (
-            !this.querySelector(".button-content")?.childElementCount &&
-            !this.querySelector(".button-content")?.textContent
-        );
+    private onSlotChange(e: LightningSlotElement) {
+        const slot = e.target;
+        this.isSlotEmpty = slot.assignedElements().length !== 0;
     }
 }

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

@@ -1,5 +1,6 @@
-.menu-nested::part(content),
-.menu-nested .popover.popover-content {
+@import "dxHelpers/reset";
+
+.menu-nested::part(content) {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
 }
@@ -10,8 +11,7 @@
     flex-wrap: nowrap;
 }
 
-.menu-hidden::part(content),
-.menu-hidden .popover.popover-content {
+.menu-hidden::part(content) {
     display: none;
 }
 
@@ -24,8 +24,7 @@
 }
 
 @media screen and (min-width: 1000px) {
-    .menu-nested-2-col::part(content),
-    .menu-nested-2-col .popover.popover-content {
+    .menu-nested-2-col::part(content) {
         width: 592px;
     }
 

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

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <dx-popover
         aria-label={ariaLabel}
         class={className}
@@ -12,10 +12,7 @@
         small={small}
         width={width}
     >
-        <div slot="control">
-            <slot></slot>
-        </div>
-
+        <slot slot="control"></slot>
         <div
             class="menu_list"
             if:false={areOptionsEmpty}

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

@@ -20,8 +20,6 @@ interface DropdownOption extends OptionWithNested {
 }
 
 export default class Dropdown extends LightningElement {
-    static renderMode = "light";
-
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
     @api stayOpenAfterChange?: boolean = false;
@@ -100,7 +98,7 @@ export default class Dropdown extends LightningElement {
     }
 
     private get optionsElements() {
-        return this.querySelectorAll("dx-dropdown-option");
+        return this.template.querySelectorAll("dx-dropdown-option");
     }
 
     private get areOptionsEmpty() {
@@ -189,7 +187,7 @@ export default class Dropdown extends LightningElement {
 
     renderedCallback() {
         if (!this.popoverEl) {
-            this.popoverEl = this.querySelector("dx-popover");
+            this.popoverEl = this.template.querySelector("dx-popover");
         }
     }
 }

package/src/modules/dx/header/header.css

@@ -1 +1,99 @@
 @import "dxHelpers/commonHeader";
+
+:host {
+    --dx-c-header-search-width: 316px;
+    --dx-g-text-xs: 14px;
+}
+
+dx-header-mobile-nav-menu {
+    --dx-c-color-background: var(--dx-g-brand-current-color-background);
+    --dx-c-button-color-background-inactive: var(
+        --dx-g-brand-current-button-color-background-inactive
+    );
+    --dx-c-button-color-background-active: var(
+        --dx-g-brand-current-button-color-background-active
+    );
+    --dx-c-color: var(--dx-g-brand-current-color);
+    --dx-c-color-border: var(--dx-g-brand-current-color-border);
+    --dx-c-color-background-2: var(--dx-g-brand-current-color-background-2);
+    --dx-c-button-color-background-inactive-hover: var(
+        --dx-g-brand-current-button-color-background-inactive-hover
+    );
+    --dx-c-color-border-2: var(--dx-g-brand-current-color-border-2);
+}
+
+.header_l2_group-title {
+    margin-right: var(--dx-g-spacing-4xl);
+}
+
+.header_l2_group-nav_menu-ctas {
+    display: none;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    padding-right: var(--dx-g-spacing-sm);
+    height: 100%;
+}
+
+.header_l2_group-nav_menu-ctas::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: var(--dx-g-spacing-sm);
+    height: calc(100% - var(--dx-g-spacing-md));
+    width: 1px;
+    background: transparent;
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+header.has-navscrollshadow .header_l2_group-nav_menu-ctas::after {
+    background: var(--dx-g-brand-current-color-border);
+}
+
+.header_l2_group-nav_menu-button {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-secondary-color-hover: var(
+        --dx-g-brand-current-button-color-background-inactive
+    );
+}
+
+@media (max-width: 1024px) {
+    .header_l2 {
+        flex-wrap: wrap;
+        height: unset;
+        padding: 0;
+    }
+
+    .header_l2_group-title {
+        margin-right: 0;
+        padding: 12px var(--dx-g-page-padding-horizontal);
+    }
+
+    .header_l2_group {
+        width: 100%;
+    }
+
+    .header_l2_group-nav {
+        height: var(--dx-g-spacing-3xl);
+        padding: 0;
+        padding-left: var(--dx-g-spacing-sm);
+    }
+
+    .header_l2_group-nav_overflow {
+        margin-right: var(--dx-g-spacing-sm);
+    }
+
+    .header_version-dropdown {
+        margin-left: auto;
+    }
+
+    .has-nav-items .header_l2_group-title {
+        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
+    }
+}
+
+@media (max-width: 768px) {
+    .header_l2_group-nav > .header_l2_group-nav_menu-ctas {
+        display: flex;
+    }
+}

package/src/modules/dx/header/header.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>

package/src/modules/dx/header/header.ts

@@ -1,8 +1,6 @@
 import { HeaderBase } from "dxBaseElements/headerBase";
 
 export default class Header extends HeaderBase {
-    static renderMode = "light";
-
     private get showTbidLogin(): boolean {
         return this.showSignup;
     }

package/src/modules/dx/popover/{popover.scoped.css → popover.css}

@@ -1,3 +1,5 @@
+@import "dxHelpers/reset";
+
 :host {
     --popover-border-radius: var(
         --dx-c-popover-border-radius,

package/src/modules/dx/popover/popover.html

@@ -1,5 +1,5 @@
-<template lwc:render-mode="light">
-    <slot name="control"></slot>
+<template>
+    <slot name="control" onslotchange={onSlotChange}></slot>
     <div class={containerClassName}>
         <div class="popover-arrow" if:true={showArrow}></div>
         <div

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

@@ -1,5 +1,9 @@
 import { LightningElement, api } from "lwc";
-import { PopoverRequestCloseType, PopperPlacement } from "typings/custom";
+import {
+    LightningSlotElement,
+    PopoverRequestCloseType,
+    PopperPlacement
+} from "typings/custom";
 
 import { computePosition, flip, size, shift, arrow } from "@floating-ui/dom";
 import cx from "classnames";
@@ -19,8 +23,6 @@ const isEventOutsideElements = (
         );
 
 export default class Popover extends LightningElement {
-    static renderMode = "light";
-
     @api ariaLabel: string | null = null;
     @api offset?: "small" | "medium";
     @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
@@ -119,17 +121,14 @@ export default class Popover extends LightningElement {
 
     renderedCallback() {
         if (!this.popover) {
-            this.popover = this.querySelector(".popover-container");
+            this.popover = this.template.querySelector(".popover-container");
         }
-
         if (!this.popoverContent) {
-            this.popoverContent = this.querySelector(".popover");
+            this.popoverContent = this.template.querySelector(".popover");
         }
         if (!this.arrow && this.showArrow) {
-            this.arrow = this.querySelector(".popover-arrow");
+            this.arrow = this.template.querySelector(".popover-arrow");
         }
-
-        this.doWeirdControlStuff();
     }
 
     // GETTERS
@@ -137,7 +136,6 @@ export default class Popover extends LightningElement {
     private get className() {
         return cx(
             "popover",
-            "popover-content",
             this.offset && `popover-offset-${this.offset}`,
             this.small && "popover-small",
             this.width && "popover-overridewidth",
@@ -243,15 +241,25 @@ export default class Popover extends LightningElement {
         this.openPopover();
     };
 
-    private doWeirdControlStuff() {
-        const control = this.querySelector('[slot="control"]');
-
-        if (control) {
-            control.setAttribute("aria-haspopup", "true");
-            control.style.cursor = this.openOnHover ? "default" : "cursor";
-            this.control = control;
+    private onSlotChange(e: Event) {
+        const slot = e.target as LightningSlotElement;
+        const elements = slot.assignedElements();
+        const slotted = elements.length === 0 ? null : elements[0];
+        // allows dropdown/select to compose popover
+        const slotElement = (
+            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
+        ) as HTMLElement | null;
+        const isWorkToDo =
+            slotElement &&
+            (!this.control || !slotElement.isSameNode(this.control));
+
+        if (!isWorkToDo) {
+            return;
         }
 
+        slotElement.setAttribute("aria-haspopup", "true");
+        slotElement.style.cursor = this.openOnHover ? "default" : "cursor";
+        this.control = slotElement;
         this.addControlListeners();
         this.setPosition();
     }

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

@@ -149,8 +149,8 @@ export default class TypeBadge extends LightningElement {
     private get style(): string {
         if (this.dark) {
             return buildStyleColorVariables({
-                background: `--dx-g-${this.variantColorScope}-${this.variant}-color`,
-                color: `--dx-g-brand-default-color-background`
+                background: "--dx-g-purple-vibrant-40",
+                color: "--dx-g-brand-default-color-background"
             });
         }
         if (this.variantColorScope) {

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

@@ -33,7 +33,7 @@ dx-tree:not(:last-child) {
     line-height: inherit;
 }
 
-dx-button.header-toggle-button {
+.header-toggle-button {
     position: absolute;
     right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
 

package/src/modules/dxHelpers/reset/reset.css

@@ -488,6 +488,7 @@ h4,
 h5,
 h6 {
     font-size: inherit;
+    font-weight: inherit;
 }
 
 /**