lightning-base-components 1.18.1-alpha → 1.18.2-alpha

package/src/lightning/combobox/combobox.js

@@ -1,13 +1,15 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
-    normalizeBoolean,
+    classListMutation,
     normalizeArray,
+    normalizeBoolean,
+    reflectAttribute,
     synchronizeAttrs,
-    classListMutation,
 } from 'lightning/utilsPrivate';
 import {
     isEmptyString,
@@ -26,7 +28,7 @@ const i18n = {
  * A widget that provides an input field that is readonly,
  * accompanied by a dropdown list of selectable options.
  */
-export default class LightningCombobox extends LightningElement {
+export default class LightningCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _ariaLabelledBy = '';
@@ -93,6 +95,7 @@ export default class LightningCombobox extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();
@@ -181,6 +184,7 @@ export default class LightningCombobox extends LightningElement {
     set variant(value) {
         this._variant = normalizeVariant(value);
         this.updateClassList();
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     /**
@@ -325,6 +329,15 @@ export default class LightningCombobox extends LightningElement {
     @api
     reportValidity() {
         return this._constraint.reportValidity((message) => {
+            // manage invalid attribute on the base combobox
+            // this is done to allow css to target invalid base-combobox state
+            // we may want to update the logic in base combobox to handle this
+            // more generally once more usages like grouped, lookupaddress etc. are migrated
+            reflectAttribute(
+                this.template.querySelector('lightning-base-combobox'),
+                'invalid',
+                !this.checkValidity()
+            );
             this._helpMessage = message;
         });
     }
@@ -362,6 +375,10 @@ export default class LightningCombobox extends LightningElement {
         baseCombobox.inputDescribedByElements = this.computedAriaDescribedBy;
     }
 
+    get templateRootNode() {
+        return this.template.host.getRootNode();
+    }
+
     get i18n() {
         return i18n;
     }

package/src/lightning/combobox/combobox.slds.css

@@ -0,0 +1,13 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  /**
+   * Invalid State
+   */
+  :host([data-render-mode="shadow"][invalid]) [part~='combobox'] {
+    --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+    --slds-c-inputtext-sizing-border: var(--sds-g-sizing-border-1, 1px);
+  }
+}

package/src/lightning/combobox/form-element.slds.css

@@ -0,0 +1,281 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+  @supports (--styling-hooks: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* FORM ELEMENT: BASE */
+    :host([data-render-mode="shadow"]) .slds-form-element {
+        position: relative;
+        min-width: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--sds-g-color-neutral-base-30, #444444);
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .slds-form-element__helper {
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        align-self: center;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+        font-weight: var(--sds-g-font-weight-4, 400);
+        color: var(--sds-g-color-neutral-base-10, #181818);
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+        vertical-align: bottom;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+        padding: 0;
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        padding-inline-start: 0;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
+    }
+
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+          float: left;
+          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+          float: left;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          margin-inline-start: 33%;
+          clear: none; /* Reset clear: left when switching to horizontal form layout */
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+            width: auto;
+            max-width: 100%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
+}

package/src/lightning/configProvider/defaultConfig.js

@@ -1,4 +1,5 @@
 import localizationService from './defaultLocalizationConfig';
+import { isCSR } from 'lightning/utilsPrivate';
 
 function getConfigFromAura($A) {
     return {
@@ -34,7 +35,7 @@ function createStandAloneConfig() {
 }
 
 export function getDefaultConfig() {
-    return window.$A !== undefined && window.$A.localizationService
+    return isCSR && window.$A !== undefined && window.$A.localizationService
         ? getConfigFromAura(window.$A)
         : createStandAloneConfig();
 }

package/src/lightning/datepicker/datepicker.css

@@ -0,0 +1,3 @@
+/* @import 'lightning/sldsCommon';
+@import './input-text.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/datepicker/datepicker.html

@@ -1,7 +1,7 @@
 <template>
-    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1" role="group">
+    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1" role="group" part="input-text">
         <template if:false={hasExternalLabel}>
-            <label class={computedLabelClass} for="input">
+            <label class={computedLabelClass} for="input" part="label">
                 <template if:true={required}>
                     <abbr class="slds-required" title={i18n.required}>*</abbr>
                 </template>
@@ -12,8 +12,9 @@
         <template if:true={isRangeMessageVisible}>
             <span id="range-message" data-range-message class="slds-assistive-text">{rangeMessage}</span>
         </template>
-        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
+        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right" part="input-container">
             <input type="text" id="input" class="slds-input"
+            part="input"
                     name={name}
                     value={displayValue}
                     placeholder={placeholder}
@@ -55,7 +56,9 @@
         </div>
     </div>
 
-
+    <template if:true={errorMessage}>
         <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{errorMessage}</div>
+    </template>
+
 
 </template>

package/src/lightning/datepicker/datepicker.js

@@ -7,7 +7,7 @@ import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicke
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, track, api } from 'lwc';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeISODate,
     parseFormattedDate,
@@ -27,6 +27,7 @@ import {
     getRealDOMId,
     isIE11,
     computeAriaInvalid,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import {
     generateUniqueId,
@@ -37,6 +38,7 @@ import {
     handleKeyDownOnDatePickerIcon,
     handleBasicKeyDownBehaviour,
 } from './keyboard';
+import AriaObserver from 'lightning/ariaObserver';
 
 const i18n = {
     invalidDate: labelInvalidDate,
@@ -94,6 +96,15 @@ export default class LightningDatePicker extends LightningElement {
 
     @api messageWhenValueMissing;
 
+    @api
+    get rootAriaNode() {
+        return this.ariaObserver.root;
+    }
+
+    set rootAriaNode(root) {
+        this.ariaObserver.root = root;
+    }
+
     @api
     get min() {
         return this._min;
@@ -181,7 +192,12 @@ export default class LightningDatePicker extends LightningElement {
 
     set ariaLabelledByElement(el) {
         this._ariaLabelledBy = el;
-        this.synchronizeA11y();
+
+        this.ariaObserver.connect({
+            attribute: ARIA_LABELLEDBY,
+            targetSelector: 'input',
+            relatedNodeIds: getRealDOMId(this._ariaLabelledBy),
+        });
     }
 
     @api
@@ -191,7 +207,12 @@ export default class LightningDatePicker extends LightningElement {
 
     set ariaControlsElement(el) {
         this._ariaControls = el;
-        this.synchronizeA11y();
+
+        this.ariaObserver.connect({
+            attribute: ARIA_CONTROLS,
+            targetSelector: 'input',
+            relatedNodeIds: getRealDOMId(this.ariaControlsElement),
+        });
     }
 
     @api
@@ -205,7 +226,7 @@ export default class LightningDatePicker extends LightningElement {
         } else {
             this._ariaDescribedBy = [el];
         }
-        this.synchronizeA11y();
+        this.connectAriaDescribedBy();
     }
 
     @api
@@ -213,12 +234,14 @@ export default class LightningDatePicker extends LightningElement {
         return this._ariaDescribedBy;
     }
 
-    get ariaLabelledbyId() {
-        return getRealDOMId(this._ariaLabelledBy);
+    @api
+    get ariaErrorMessageElement() {
+        return this._ariaErrorMessageElement;
     }
 
-    get ariaControlsId() {
-        return getRealDOMId(this.ariaControlsElement);
+    set ariaErrorMessageElement(element) {
+        this._ariaErrorMessageElement = element;
+        this.connectAriaDescribedBy();
     }
 
     synchronizeA11y() {
@@ -228,9 +251,6 @@ export default class LightningDatePicker extends LightningElement {
         }
 
         synchronizeAttrs(input, {
-            [ARIA_LABELLEDBY]: this.ariaLabelledbyId,
-            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedby,
-            [ARIA_CONTROLS]: this.ariaControlsId,
             [ARIA_LABEL]: this._ariaLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
         });
@@ -242,6 +262,11 @@ export default class LightningDatePicker extends LightningElement {
         );
         calendarButton.ariaDescribedBy =
             this.computedDatepickerButtonAriaDescribedby;
+
+        if (this.isConnected) {
+            this.connectAriaDescribedBy();
+            this.ariaObserver.sync();
+        }
     }
 
     renderedCallback() {
@@ -265,6 +290,7 @@ export default class LightningDatePicker extends LightningElement {
     }
     set disabled(value) {
         this._disabled = normalizeBoolean(value);
+        reflectAttribute(this, 'disabled', this._disabled);
     }
 
     @api
@@ -273,6 +299,7 @@ export default class LightningDatePicker extends LightningElement {
     }
     set readOnly(value) {
         this._readonly = normalizeBoolean(value);
+        reflectAttribute(this, 'readonly', this._readonly);
     }
 
     @api
@@ -299,6 +326,7 @@ export default class LightningDatePicker extends LightningElement {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
+        reflectAttribute(this, 'variant', value);
     }
 
     @api
@@ -349,6 +377,7 @@ export default class LightningDatePicker extends LightningElement {
     constructor() {
         super();
         this.uniqueId = generateUniqueId();
+        this.ariaObserver = new AriaObserver(this);
     }
 
     connectedCallback() {
@@ -359,6 +388,10 @@ export default class LightningDatePicker extends LightningElement {
 
     disconnectedCallback() {
         this.connected = false;
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
     }
 
     get i18n() {
@@ -375,9 +408,12 @@ export default class LightningDatePicker extends LightningElement {
             .toString();
     }
 
-    get computedUniqueErrorMessageElementId() {
-        const el = this.template.querySelector('[data-error-message]');
-        return getRealDOMId(el);
+    get errorMessageElement() {
+        return this.template.querySelector('[data-error-message]');
+    }
+
+    get rangeMessageElement() {
+        return this.template.querySelector('[data-range-message]');
     }
 
     get computedUniqueRangeMessageElementId() {
@@ -410,18 +446,24 @@ export default class LightningDatePicker extends LightningElement {
         return this.disabled || this.readOnly;
     }
 
-    get computedAriaDescribedby() {
-        const ariaValues = [];
+    get ariaErrorMessageElements() {
+        const elements = [this.ariaErrorMessageElement];
 
         if (this.errorMessage) {
-            ariaValues.push(this.computedUniqueErrorMessageElementId);
+            elements.push(this.errorMessageElement);
         }
 
         // To inform user of valid date ranges that are set via min/max attributes
         if (this.isRangeMessageVisible) {
-            ariaValues.push(this.computedUniqueRangeMessageElementId);
+            elements.push(this.rangeMessageElement);
         }
 
+        return elements;
+    }
+
+    get computedAriaDescribedby() {
+        const ariaValues = [];
+
         this._ariaDescribedBy.forEach((item) => {
             const id = getRealDOMId(item);
             if (id) {
@@ -432,6 +474,15 @@ export default class LightningDatePicker extends LightningElement {
         return normalizeAriaAttribute(ariaValues);
     }
 
+    connectAriaDescribedBy() {
+        this.ariaObserver.connect({
+            attribute: ARIA_DESCRIBEDBY,
+            targetSelector: 'input',
+            relatedNodeIds: this.computedAriaDescribedby,
+            relatedNodes: this.ariaErrorMessageElements,
+        });
+    }
+
     get computedDatepickerButtonAriaDescribedby() {
         if (this.isRangeMessageVisible) {
             return this.computedUniqueRangeMessageElementId;
@@ -604,7 +655,10 @@ export default class LightningDatePicker extends LightningElement {
     startPositioning() {
         if (!this._relationship) {
             this._relationship = startPositioning(this, {
-                target: () => this.template.querySelector('input'),
+                target: () =>
+                    this.template.querySelector(
+                        'div.slds-form-element__control'
+                    ),
                 element: () =>
                     this.template
                         .querySelector('lightning-calendar')