@salesforcedevs/dx-components 0.0.0-alpha.3 → 0.0.0-alpha.30

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -41,6 +41,7 @@
 
 .nav-menu.state-closed {
     opacity: 0;
+    visibility: hidden;
     transform: translateY(-16px);
     pointer-events: none;
 }

package/src/modules/dx/headerSearch/headerSearch.html

@@ -20,6 +20,7 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
+                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     size="override"
                     type="search"
@@ -51,6 +52,7 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
+                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -69,6 +69,7 @@ export default class HeaderSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
+            case "input-blur":
                 this.closeDropdown();
                 break;
             default:

package/src/modules/dx/hr/hr.css

@@ -13,7 +13,7 @@ h2 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
-    text-transform: uppercase;
+    text-transform: capitalize;
     letter-spacing: 0;
     line-height: 18px;
 }
@@ -22,7 +22,6 @@ p::before,
 h2::before,
 p::after,
 h2::after {
-    transform: translateY(-2px); /* offset for display font ghost padding */
     content: "";
     flex: 1 1;
     border-bottom: 2px solid var(--dx-g-gray-95);
@@ -42,7 +41,7 @@ h2::after {
 dx-button {
     display: flex;
     width: 100%;
-    text-transform: uppercase;
+    text-transform: capitalize;
     padding: 0 var(--dx-c-hr-padding-horizontal);
 }
 

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -17,7 +17,6 @@ img {
 }
 
 span {
-    margin-top: 3px;
     white-space: nowrap;
 }
 

package/src/modules/dx/input/input.ts

@@ -186,6 +186,8 @@ export default class Input extends LightningElement {
         if (this.validityOnBlur) {
             this.reportValidity();
         }
+
+        this.dispatchEvent(new CustomEvent("blur", { detail: "input-blur" }));
     }
 
     onInputChange(e: InputEvent) {

package/src/modules/dx/logo/logo.css

@@ -23,7 +23,6 @@ a:hover {
 }
 
 .logo-link > span {
-    margin-top: 3px;
     color: var(--dx-c-logo-label-color);
 }
 

package/src/modules/dx/metadataBadge/metadataBadge.css

@@ -0,0 +1,41 @@
+@import "dxHelpers/reset";
+
+.badge {
+    --background: var(--dx-g-cloud-blue-natural-90);
+    --border-radius: var(--dx-g-spacing-xs);
+    --color: var(--dx-g-blue-vibrant-20);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    color: var(--dx-c-metadata-badge-color, var(--color));
+    background: var(--dx-c-metadata-badge-background, var(--background));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    padding: 0 var(--horizontal-spacing);
+    border-radius: var(--border-radius);
+    font-family: var(--dx-g-font-display);
+    font-size: 10px;
+    text-align: center;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.badge.size-small {
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-xs);
+
+    font-size: 8px;
+    letter-spacing: 0.5px;
+}
+
+@media screen and (max-width: 768px) {
+    .badge:not(.size-small) {
+        height: var(--dx-g-spacing-lg);
+        padding: 0 var(--dx-g-spacing-sm);
+        font-size: var(--dx-g-text-2xs);
+    }
+}

package/src/modules/dx/metadataBadge/metadataBadge.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style}>
+        <span>{value}</span>
+    </div>
+</template>

package/src/modules/dx/metadataBadge/metadataBadge.ts

@@ -0,0 +1,24 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Color, TypeBadgeSize } from "typings/custom";
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+
+export default class MetadataBadge extends LightningElement {
+    @api size: TypeBadgeSize = "default";
+    @api color?: Color;
+    @api value!: string;
+
+    private get className(): string {
+        return cx("badge", `size-${this.size}`);
+    }
+
+    private get style(): string {
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            if (variables) {
+                return buildStyleColorVariables(variables);
+            }
+        }
+        return "";
+    }
+}

package/src/modules/dx/modal/modal.css

@@ -32,3 +32,9 @@
     width: 100%;
     z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
 }
+
+@media screen and (max-width: 768px) {
+    .modal-drawer_container.modal-drawer_active {
+        pointer-events: all;
+    }
+}

package/src/modules/dx/modal/modal.html

@@ -1,10 +1,10 @@
 <template>
-    <div class={containerClass}>
+    <div class={containerClass} tabindex="0" role="dialog">
         <slot></slot>
     </div>
     <div
         if:true={open}
         class="modal-drawer_overlay"
-        onclick={handleCloseModal}
+        onclick={handleToggleModal}
     ></div>
 </template>

package/src/modules/dx/modal/modal.ts

@@ -20,7 +20,30 @@ export default class Modal extends LightningElement {
         );
     }
 
-    handleCloseModal() {
+    renderedCallback(): void {
+        if (this._open) {
+            this.focusFirstElement();
+        }
+    }
+
+    connectedCallback(): void {
+        this.template.addEventListener(
+            "keydown",
+            this.handleKeyDown.bind(this)
+        );
+    }
+
+    focusFirstElement(): void {
+        this.template.querySelector("div")!.focus();
+    }
+
+    handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleToggleModal();
+        }
+    }
+
+    handleToggleModal() {
         this._open = !this._open;
         this.dispatchEvent(new CustomEvent("togglemodal"));
     }

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -1,11 +1,11 @@
 <template>
     <div class={containerClass}>
         <slot></slot>
-        <dx-button onclick={handleCloseModal}>Done</dx-button>
+        <dx-button onclick={handleToggleModal}>Done</dx-button>
     </div>
     <div
         if:true={open}
         class="modal-drawer_overlay"
-        onclick={handleCloseModal}
+        onclick={handleToggleModal}
     ></div>
 </template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -20,7 +20,13 @@ export default class ModalDrawer extends LightningElement {
         );
     }
 
-    handleCloseModal() {
+    handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleToggleModal();
+        }
+    }
+
+    handleToggleModal() {
         this._open = !this._open;
         this.dispatchEvent(new CustomEvent("clickclose"));
     }

package/src/modules/dx/pagination/pagination.css

@@ -27,8 +27,7 @@
 }
 
 .dx-pagination-pages button {
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-md);
     border-radius: var(--dx-g-spacing-lg);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);

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

@@ -8,6 +8,7 @@
     --dx-c-section-padding-right: var(--dx-c-section-padding-horizontal);
     --dx-c-section-padding-top: var(--dx-c-section-padding-vertical);
     --dx-c-section-padding-bottom: var(--dx-c-section-padding-vertical);
+    --dx-c-section-heading-margin-bottom: var(--dx-g-spacing-2xl);
 }
 
 .section {
@@ -58,10 +59,18 @@
     max-width: 800px;
 }
 
+.dx-text-heading-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);
+    letter-spacing: var(--dx-c-section-heading-letter-spacing, -0.4px);
+    line-height: var(--dx-c-section-heading-line-height, 40px);
+}
+
 .text {
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--dx-g-spacing-2xl);
+    margin-bottom: var(--dx-c-section-heading-margin-bottom);
     z-index: 100;
 }
 

package/src/modules/dx/section/section.ts

@@ -5,7 +5,7 @@ import { toDxColor } from "dxUtils/css";
 export default class Section extends LightningElement {
     @api backgroundColor: string = "transparent";
     @api dark: boolean = false;
-    @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
+    @api headingLevel: "1" | "2" | "3" | "4" | "5" | "custom" = "3";
     @api label?: string;
     @api subtitle?: string;
     @api textAlign: "center" | "left" = "left";

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -18,6 +18,7 @@
             value={value}
             onchange={onInputChange}
             onfocus={onInputFocus}
+            onblur={onDropdownRequestClose}
             onclear={onInputClear}
             shortcut-key="j"
             clearable

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -422,6 +422,7 @@ export default class SidebarSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
+            case "input-blur":
                 this.dropdownRequestedOpen = false;
                 break;
             default:

package/src/modules/dx/tab/tab.css

@@ -38,10 +38,6 @@ a {
     margin: 0 var(--horizontal-spacing);
 }
 
-.nav-list-item > span {
-    margin-top: var(--dx-g-spacing-xs);
-}
-
 button.nav-list-item_default > dx-icon {
     margin-left: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/tabPanel/tabPanel.css

@@ -10,10 +10,7 @@
 }
 
 .tabpanel-active {
-    display: flex;
-    margin-top: var(--dx-c-tab-panel-margin-top);
-    gap: var(--dx-c-tab-panel-gap);
-    flex-wrap: wrap;
+    display: block;
 }
 
 @media screen and (max-width: 640px) {

package/src/modules/dx/tabPanelItem/tabPanelItem.css

@@ -1,9 +1,5 @@
 @import "dxHelpers/reset";
 
-button:focus {
-    outline: unset;
-}
-
 .tab {
     color: var(--dx-g-blue-vibrant-20);
     font-family: var(--dx-g-font-display);

package/src/modules/dx/tabPanelItem/tabPanelItem.html

@@ -5,10 +5,10 @@
         id={tabId}
         onclick={onClick}
         class={className}
-        tabindex={activeTabIndex}
         aria-controls={panelId}
         aria-label="Tab button"
         aria-selected={active}
+        tabindex={index}
     >
         <slot></slot>
     </button>

package/src/modules/dx/tabPanelList/tabPanelList.css

@@ -1,5 +1,9 @@
+:host {
+    --dx-c-tab-panel-list-horizontal-padding: var(--dx-g-spacing-3xl);
+}
+
 .tablist-container {
-    padding: 0 var(--dx-g-spacing-3xl);
+    padding: 0 var(--dx-c-tab-panel-list-horizontal-padding);
 }
 
 .tablist {
@@ -29,9 +33,3 @@ dx-popover {
 .hidden {
     display: none;
 }
-
-@media screen and (max-width: 1024px) {
-    .tablist-container {
-        padding: 0 var(--dx-g-spacing-lg);
-    }
-}

package/src/modules/dx/treeItem/treeItem.html

@@ -9,6 +9,7 @@
             is-selected={isSelected}
             oniconclick={onIconClick}
             show-arrow={isParent}
+            target={target}
         ></dx-tree-tile>
     </a>
     <img

package/src/modules/dx/treeTile/treeTile.css

@@ -145,33 +145,33 @@
     --indentation: calc(20 * var(--base-indentation));
 }
 
-dx-type-badge {
-    --dx-c-type-badge-text-width: 21px;
+dx-metadata-badge {
+    --dx-c-metadata-badge-text-width: 21px;
 }
 
-dx-type-badge.get {
-    --dx-c-type-badge-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-type-badge-background: var(--dx-g-blue-vibrant-90);
+dx-metadata-badge.get {
+    --dx-c-metadata-badge-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-metadata-badge-background: var(--dx-g-blue-vibrant-90);
 }
 
-dx-type-badge.put {
-    --dx-c-type-badge-color: var(--dx-g-yellow-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-yellow-vibrant-90);
+dx-metadata-badge.put {
+    --dx-c-metadata-badge-color: var(--dx-g-yellow-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-yellow-vibrant-90);
 }
 
-dx-type-badge.post {
-    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
+dx-metadata-badge.post {
+    --dx-c-metadata-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-green-vibrant-90);
 }
 
-dx-type-badge.patch {
-    --dx-c-type-badge-color: var(--dx-g-teal-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-teal-vibrant-90);
+dx-metadata-badge.patch {
+    --dx-c-metadata-badge-color: var(--dx-g-teal-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-teal-vibrant-90);
 }
 
-dx-type-badge.delete {
-    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-hot-orange-vibrant-90);
+dx-metadata-badge.delete {
+    --dx-c-metadata-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-hot-orange-vibrant-90);
 }
 
 a {

package/src/modules/dx/treeTile/treeTile.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={tileClass}>
+    <a href={href} class={tileClass} target={target}>
         <div class="flex indentation" aria-level={tileAriaLevel}>
             <span
                 class="tile-label sidebar-item-truncate-text"
@@ -16,12 +16,13 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
-            <dx-type-badge
+            <dx-metadata-badge
                 if:true={showMethod}
-                class={badgeClass}
+                class="flex tile-icon"
                 size="small"
                 value={methodText}
-            ></dx-type-badge>
+                color={metadataBadgeColor}
+            ></dx-metadata-badge>
         </div>
     </a>
 </template>

package/src/modules/dx/treeTile/treeTile.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { InternalTreeNode } from "typings/custom";
+import { Color, InternalTreeNode } from "typings/custom";
 
 const methodTextMap: {
     [key: string]: string;
@@ -12,6 +12,16 @@ const methodTextMap: {
     delete: "DELE"
 };
 
+const metadataBadgeColorMap: {
+    [key: string]: Color;
+} = {
+    get: "blue",
+    put: "yellow",
+    post: "green",
+    patch: "teal",
+    delete: "red"
+};
+
 export default class TreeTile extends LightningElement {
     @api isRoot = false;
     @api treeNode!: InternalTreeNode;
@@ -20,6 +30,7 @@ export default class TreeTile extends LightningElement {
     @api isSelected = false;
     @api href!: string;
     @api showArrow = false;
+    @api target!: string;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;
@@ -29,8 +40,11 @@ export default class TreeTile extends LightningElement {
         return this.isRoot ? "small" : "xsmall";
     }
 
-    private get badgeClass() {
-        return cx("flex", "tile-icon", this.treeNode.method);
+    private get metadataBadgeColor(): string | undefined {
+        if (this.treeNode.method) {
+            return metadataBadgeColorMap[this.treeNode.method];
+        }
+        return undefined;
     }
 
     private get showMethod() {

package/src/modules/dx/typeBadge/typeBadge.css

@@ -1,33 +1,6 @@
 @import "dxHelpers/reset";
 
-.typebadge {
-    align-items: center;
-    background: var(--dx-c-type-badge-background, var(--background));
-    border-radius: var(--dx-c-type-badge-border-radius, var(--border-radius));
-    color: var(--dx-c-type-badge-color, var(--color));
-    display: flex;
-    justify-content: center;
-    height: var(--dx-c-type-badge-height, var(--height));
-    text-align: center;
-    white-space: nowrap;
-    width: min-content;
-}
-
-.typebadge.typebadge_metadata {
-    --background: var(--dx-g-cloud-blue-natural-90);
-    --border-radius: var(--dx-g-spacing-xs);
-    --color: var(--dx-g-blue-vibrant-20);
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-family: var(--dx-g-font-display);
-    font-size: 10px;
-    letter-spacing: 0.6px;
-    text-transform: var(--dx-c-type-badge-text-transform, uppercase);
-    padding: 0 var(--horizontal-spacing);
-}
-
-.typebadge.typebadge_content-type {
+.badge {
     --background: var(--sds-g-gray-3);
     --border-radius: var(--dx-g-spacing-smd);
     --color: var(--sds-g-gray-10);
@@ -35,40 +8,26 @@
     --horizontal-spacing: var(--dx-g-spacing-smd);
     --vertical-spacing: var(--dx-g-spacing-xs);
 
+    color: var(--dx-c-type-badge-color, var(--color));
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    text-align: center;
+    white-space: nowrap;
     font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-xs);
+    font-size: 10px;
     font-weight: var(--dx-g-font-bold);
     padding: var(--vertical-spacing) var(--horizontal-spacing);
 }
 
-.typebadge.typebadge_content-type.size-small {
+.badge.size-small {
     --height: var(--dx-g-spacing-mlg);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-size: 10px;
-}
-
-.typebadge.typebadge_metadata.size-small {
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-xs);
-
-    font-size: 8px;
-    letter-spacing: 0.5px;
-}
-
-.typebadge.typebadge_metadata span {
-    transform: translateY(2px);
-    width: var(--dx-c-type-badge-text-width, unset);
-}
-
-.typebadge.typebadge_metadata.size-small span {
-    transform: translateY(1px);
 }
 
-@media screen and (max-width: 768px) {
-    .typebadge.typebadge_metadata:not(.size-small) {
-        height: var(--dx-g-spacing-lg);
-        padding: 0 var(--dx-g-spacing-sm);
-        font-size: var(--dx-g-text-2xs);
-    }
+dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/typeBadge/typeBadge.html

@@ -1,5 +1,11 @@
 <template>
     <div class={className} style={style}>
+        <dx-icon
+            if:true={iconSymbol}
+            symbol={iconSymbol}
+            sprite={iconSprite}
+            size="xsmall"
+        ></dx-icon>
         <span>{value}</span>
     </div>
 </template>