@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

package/src/modules/dx/select/select.html

@@ -1,60 +1,61 @@
 <template>
-    <label class={computedLabelClass} for="select">
-        {label}
-        <template if:true={required}>
-            <abbr>*</abbr>
-        </template>
-    </label>
-
-    <div class="slds-form-element__control">
-        <div class="slds-select_container">
-            <select
-                autocomplete={autocomplete}
-                class={selectClass}
-                disabled={disabled}
-                id="select"
-                multiple={multiple}
-                name={name}
-                onblur={handleBlur}
-                onchange={handleChange}
-                onfocus={handleFocus}
-                required={required}
-                accesskey={accessKey}
-                size={size}
-            >
-                <template if:true={placeholder}>
-                    <option if:false={value} value="" disabled>
-                        {placeholder}
-                    </option>
+    <div class={containerClass}>
+        <label class="form-element_label" for="select">
+            {label}
+            <template if:true={required}>
+                <abbr>*</abbr>
+            </template>
+        </label>
+        <div class="form-element_control">
+            <div class="select_container">
+                <template if:true={loading}>
+                    <dx-spinner size="x-small" variant="base"></dx-spinner>
                 </template>
-                <template for:each={options} for:item="option">
-                    <template if:true={option.disabled}>
-                        <option
-                            disabled
-                            key={option.value}
-                            value={option.value}
-                        >
-                            {option.label}
-                        </option>
+                <select
+                    autocomplete={autocomplete}
+                    class={selectClass}
+                    disabled={disabled}
+                    id="select"
+                    name={name}
+                    onblur={handleBlur}
+                    onchange={handleChange}
+                    onfocus={handleFocus}
+                    required={required}
+                    accesskey={accessKey}
+                    size={size}
+                >
+                    <template if:true={placeholder}>
+                        <option value="" disabled>{placeholder}</option>
                     </template>
-                    <template if:false={option.disabled}>
-                        <option key={option.value} value={option.value}>
-                            {option.label}
-                        </option>
+
+                    <template for:each={options} for:item="option">
+                        <template if:true={option.disabled}>
+                            <option
+                                disabled
+                                key={option.value}
+                                value={option.value}
+                            >
+                                {option.label}
+                            </option>
+                        </template>
+                        <template if:false={option.disabled}>
+                            <option key={option.value} value={option.value}>
+                                {option.label}
+                            </option>
+                        </template>
                     </template>
-                </template>
-            </select>
+                </select>
+            </div>
         </div>
+        <template if:true={helpMessage}>
+            <div
+                aria-live="assertive"
+                class="form-element_help"
+                data-help-message
+                id="help-message"
+            >
+                {helpMessage}
+            </div>
+        </template>
     </div>
-
-    <template if:true={_helpMessage}>
-        <div
-            aria-live="assertive"
-            class="slds-form-element__help"
-            data-help-message
-            id="help-message"
-        >
-            {_helpMessage}
-        </div>
-    </template>
 </template>

package/src/modules/dx/select/select.ts

@@ -1,23 +1,166 @@
 import cx from "classnames";
-import { api } from "lwc";
-import LightningSelect from "lightning/select";
-import { toJson } from "utils/normalizers";
+import { LightningElement, api } from "lwc";
+import { SelectOption } from "typings/custom";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+import { reflectBooleanAttribute } from "dxUtils/lwc";
 
-export default class Select extends LightningSelect {
+export const DEFAULT_MISSING_MESSAGE = "This field is required";
+
+export default class Select extends LightningElement {
+    @api accessKey!: string;
+    @api autocomplete?: string;
+    @api label?: string;
+    @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
     @api placeholder?: string;
+    @api size?: string;
+    @api loading = false;
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    @api
+    get options() {
+        return this._options;
+    }
+
+    set options(value) {
+        this._options = toJson(value);
+    }
+
+    @api
+    get required() {
+        return this._required;
+    }
+
+    set required(value) {
+        this._required = normalizeBoolean(value);
+        reflectBooleanAttribute(
+            this as unknown as LightningElement,
+            "required",
+            value
+        );
+    }
 
     @api
-    get jsonOptions() {
-        return this.options;
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+        this.updateSelectValue();
+    }
+
+    @api
+    get name() {
+        return this._name;
+    }
+
+    set name(name) {
+        this._name = name;
+        this.setAttribute("name", name); // reflect to HTML
+    }
+
+    _disabled = false;
+    _size = "";
+    _required = false;
+    _options: Array<SelectOption> = [];
+    _value: string = "";
+    _name?: string;
+    _selectElement: HTMLSelectElement | null = null;
+    helpMessage?: string = "";
+
+    renderedCallback(): void {
+        this.updateSelectValue();
     }
 
-    set jsonOptions(value) {
-        this.options = toJson(value);
+    get containerClass() {
+        return cx("form-element", this.hasError && "has-error");
+    }
+
+    get hasError(): boolean {
+        return !!this.helpMessage;
     }
 
     get selectClass() {
-        return cx("slds-select", {
-            placeholder: !this.value
+        return cx("select-element", {
+            "select-element_placeholder": this.placeholder && !this.value
         });
     }
+
+    get selectElement() {
+        if (!this._selectElement) {
+            this._selectElement =
+                this.template.querySelector<HTMLSelectElement>("select");
+        }
+        return this._selectElement;
+    }
+
+    get isRequiredButEmpty() {
+        return this.required && !this.value;
+    }
+
+    @api
+    blur(): void {
+        if (this.selectElement) {
+            this.selectElement.blur();
+        }
+    }
+
+    @api
+    focus(): void {
+        if (this.selectElement) {
+            this.selectElement.focus();
+        }
+    }
+
+    @api
+    reportValidity(): boolean {
+        const isInvalid = this.isRequiredButEmpty;
+        this.helpMessage = isInvalid
+            ? this.messageWhenValueMissing || DEFAULT_MISSING_MESSAGE
+            : "";
+        return !isInvalid;
+    }
+
+    @api checkValidity(): boolean {
+        return !this.isRequiredButEmpty;
+    }
+
+    handleBlur(): void {
+        this.reportValidity();
+        this.dispatchEvent(new CustomEvent("blur"));
+    }
+
+    handleChange(event: Event & { target: HTMLSelectElement }): void {
+        const { value } = event.target;
+        this._value = value;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: { value }
+            })
+        );
+    }
+
+    handleFocus(): void {
+        this.helpMessage = "";
+        this.dispatchEvent(new CustomEvent("focus"));
+    }
+
+    // We have to do it programmatically because value binding doesn't work apparently.
+    updateSelectValue(): void {
+        if (!this._value && !this.placeholder) {
+            return;
+        }
+
+        if (this.selectElement) {
+            this.selectElement.value = this._value;
+        }
+    }
 }

package/src/modules/dx/sidebar/sidebar.css

@@ -1,158 +1,72 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-:host {
-    --dx-c-sidebar-width: 275px;
-    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-background: white;
-    --dx-c-sidebar-button-border: white;
-    --dx-c-sidebar-button-color-hover: white;
-    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
-    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-}
-
-dx-tree:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.header {
-    box-sizing: content-box;
-    display: flex;
-    line-height: var(--dx-g-spacing-xl);
-    margin-bottom: 12px;
-}
-
-.padding-horizontal {
-    padding-left: var(--dx-g-spacing-md);
-    padding-right: var(--dx-g-spacing-md);
-}
-
-.header-title {
-    line-height: inherit;
-}
+@import "dxHelpers/commonSidebar";
 
-.header-toggle-button {
-    position: absolute;
-    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
-
-    --dx-c-button-opacity: 0;
-    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
-    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
-    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
-    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
-    --dx-c-button-custom-background-hover: var(
-        --dx-c-sidebar-button-background-hover
-    );
-    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
-}
-
-.header-toggle-icon {
-    margin: auto 0 auto auto;
-    color: var(--dx-g-blue-vibrant-30);
-}
-
-.header-toggle-icon dx-icon {
-    transition: var(--dx-g-transition-transform-2x);
-}
-
-.container.collapsed {
-    width: var(--dx-g-spacing-xl);
-}
-
-.collapsed .header-toggle-button {
-    transform: rotate(180deg);
-}
-
-.container {
-    background-color: var(--dx-g-gray-95);
-    display: flex;
-    flex-direction: column;
-    height: var(--dx-c-sidebar-height);
-    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
-}
-
-.container:not(.container-mobile) {
-    --border-color: var(--dx-g-gray-95);
-    --left-spacing: calc(
-        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
-    );
-
-    border-right: 2px solid var(--border-color);
-    min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
-    position: relative;
-}
-
-.collapsed.container:not(.container-mobile) {
-    background-color: transparent;
-}
+dx-empty-state {
+    --dx-c-empty-state-background-alt: var(--sds-g-gray-1);
+    --dx-c-empty-state-image-width: 400px;
+    --dx-c-font-title-alt-size: 18px;
+    --dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
+    --dx-c-font-body-alt-size: var(--dx-g-text-xs);
+    --dx-c-font-body-alt-margin-top: 0;
+    --dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
+    --dx-c-font-suggestion-alt-size: 10px;
 
-.collapsed.container:not(.container-border-active) {
-    --border-color: transparent;
+    display: none;
 }
 
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
+.sidebar-content {
+    overflow-y: auto;
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
 }
 
-.container.container-border-active {
-    --border-color: var(--dx-c-sidebar-button-color);
+.loading-skeleton {
+    margin-top: var(--dx-g-spacing-md);
 }
 
-.container.container-mobile {
-    width: 100%;
+.search-empty.container dx-empty-state {
+    display: block;
 }
 
-.container.container-mobile .header {
-    cursor: pointer;
-    line-height: var(--dx-g-spacing-2xl);
+.user-searching.container .sidebar-content-tree {
+    display: none;
 }
 
-.container.container-mobile:not(.collapsed) .header {
-    background-color: #dddbda;
+.show-tree.container .sidebar-content-search {
+    display: none;
 }
 
-.container.container-mobile .header-title {
-    color: var(--dx-g-gray-10);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
+.container.collapsed .sidebar-header,
+.container.collapsed .sidebar-content {
+    display: none;
 }
 
-.container.container-mobile.collapsed {
-    height: unset;
-    padding-bottom: 0;
-}
+.header-toggle-icon dx-button {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 
-.container.container-mobile.collapsed .header {
-    margin-bottom: 0;
+    width: 10px;
 }
 
-.container.container-mobile.collapsed .header-toggle-icon dx-icon {
-    transform: rotateZ(-90deg);
+.header-toggle-icon dx-button[aria-expanded="true"] {
+    --dx-c-button-secondary-color-hover: transparent;
 }
 
-.sidebar-content {
-    overflow-y: auto;
+.header-toggle-icon dx-button[aria-expanded="true"]:hover {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
 
-.search {
-    padding-bottom: var(--dx-g-spacing-md);
-}
+.results-heading {
+    --dx-g-text-body-color: var(--sds-g-gray-14);
 
-.search-box {
-    --dx-c-input-width: 100%;
+    margin-bottom: var(--dx-g-spacing-sm);
+    padding-top: var(--dx-g-spacing-smd);
+    font-weight: var(--dx-g-font-bold);
 }
 
-.truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+@media (max-width: 768px) {
+    :host {
+        width: 100%;
+    }
 
-dx-empty-state {
-    --dx-c-empty-state-background: var(--sds-g-gray-2);
-    --dx-c-empty-state-image-width: 400px;
+    .loading-skeleton {
+        width: 100%;
+    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -1,70 +1,134 @@
 <template>
-    <div class={containerClass}>
+    <div class={containerClass} part="container">
         <div
-            if:true={mobile}
+            lwc:if={mobile}
             class="header padding-horizontal"
             onclick={onToggleClick}
         >
             <span class="header-title truncate">{headerMobile}</span>
             <div class="header-toggle-icon">
-                <dx-icon
+                <dx-button
                     aria-expanded={expanded}
-                    aria-label="icon"
-                    sprite="utility"
-                    symbol="chevrondown"
-                ></dx-icon>
+                    aria-label="toggle menu"
+                    type="button"
+                    variant="tertiary"
+                >
+                    <dx-icon
+                        sprite="utility"
+                        symbol={menuSymbol}
+                        color="blue-vibrant-50"
+                        size="medium"
+                    ></dx-icon>
+                </dx-button>
             </div>
         </div>
-
-        <dx-button
-            if:false={mobile}
-            aria-expanded={expanded}
-            aria-label="icon"
-            class="header-toggle-button"
-            icon-symbol="close_panel"
-            variant="custom"
-            onclick={onToggleClick}
-            onmouseenter={onToggleMouseEnter}
-            onmouseleave={onToggleMouseLeave}
-        ></dx-button>
-
-        <template if:true={expanded}>
-            <div class="padding-horizontal">
-                <div class="header" if:false={mobile}>
-                    <h2 class="dx-text-heading-4 header-title">{header}</h2>
-                    <slot name="header"></slot>
-                </div>
-                <div class="search">
-                    <dx-input
-                        class="search-box"
-                        type="search"
-                        placeholder="Search this list..."
-                        role="search"
-                        aria-label="Content Search"
-                        icon-symbol="search"
-                        size="small"
-                        value={searchText}
-                        onchange={onSearchChange}
-                        shortcut-key="j"
-                    ></dx-input>
+        <div class="sidebar-header" show-shadow={showBoxShadow}>
+            <div class="header padding-horizontal" lwc:if={isDesktop}>
+                <div class="header-wrapper">
+                    <!-- To-Do: Move the devCenter as a new component and use it here, as devCenter is also used in Sidebar now -->
+                    <div lwc:if={devCenter} class="link-row">
+                        <a href={devCenter.link}>
+                            <dx-icon symbol="back"></dx-icon>
+                            <dx-icon
+                                class="brand-icon"
+                                lwc:if={devCenter.icon}
+                                sprite="salesforcebrand"
+                                symbol={brand}
+                                size="large"
+                            ></dx-icon>
+                            <span class="subtitle dx-text-body-4">
+                                {devCenter.title}
+                            </span>
+                        </a>
+                    </div>
+                    <h2 class="dx-text-display-6 header-title">{header}</h2>
                 </div>
             </div>
-            <div class="sidebar-content" if:true={anyResultMatch}>
-                <dx-tree
-                    for:each={filteredTrees}
-                    for:item="tree"
-                    key={tree.key}
-                    tree-root={tree.tree}
-                    onselect={onSelect}
-                    value={value}
-                ></dx-tree>
+            <div class="search padding-horizontal">
+                <dx-sidebar-search
+                    onchange={onSearchChange}
+                    onloading={onSearchLoading}
+                    coveo-organization-id={coveoOrganizationId}
+                    coveo-public-access-token={coveoPublicAccessToken}
+                    coveo-search-hub={coveoSearchHub}
+                    coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ></dx-sidebar-search>
             </div>
+            <slot name="version-picker"></slot>
+            <h2
+                class="results-heading dx-text-body-3 padding-horizontal"
+                lwc:if={showResultsHeading}
+            >
+                Results
+            </h2>
+        </div>
+        <div
+            class="sidebar-content sidebar-content-search"
+            onscroll={onSidebarSearchContentScroll}
+        >
+            <img
+                lwc:if={isSearchLoading}
+                class="loading-skeleton padding-horizontal"
+                src="https://a.sfdcstatic.com/developer-website/images/sidebar-loading.svg"
+                alt="loading"
+            />
+            <template
+                lwc:if={showSearchResults}
+                for:each={searchResults}
+                for:item="result"
+            >
+                <dx-sidebar-search-result
+                    description-highlights={result.excerptHighlights}
+                    description={result.excerpt}
+                    href={result.href}
+                    key={result.uniqueId}
+                    selected={result.selected}
+                    title-highlights={result.titleHighlights}
+                    header={result.title}
+                    select={result.select}
+                ></dx-sidebar-search-result>
+            </template>
             <dx-empty-state
+                variant="alt"
                 class="padding-horizontal"
+                header="No Results"
+                body={emptyStateBody}
+                suggestions={emptyStateSuggestions}
                 size="small"
-                title="No Results"
-                if:false={anyResultMatch}
             ></dx-empty-state>
+        </div>
+        <div class={sidebarContentClass} onscroll={handleScroll}>
+            <dx-tree
+                for:each={trees}
+                for:item="tree"
+                key={tree.key}
+                tree-root={tree.tree}
+                onselect={onSelect}
+                value={value}
+                onfocus={onItemsFocused}
+                onselecteditemrendered={onSelectedItemRendered}
+            ></dx-tree>
+        </div>
+        <template lwc:if={mobile}>
+            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    onlangchange={onToggleClick}
+                ></dx-sidebar-footer-nav>
+            </div>
+        </template>
+        <template lwc:else>
+            <div lwc:if={hasSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></dx-sidebar-footer-nav>
+            </div>
         </template>
     </div>
 </template>