lightning-base-components 1.13.10-alpha → 1.14.4-alpha

package/src/lightning/formattedDateTime/__examples__/time/time.html

@@ -5,7 +5,7 @@
         <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" second="2-digit"></lightning-formatted-date-time></p>
         <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" time-zone="UTC"
                                         time-zone-name="short"></lightning-formatted-date-time></p>
-        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" second="2-digit" hour12="false"
+        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" second="2-digit" hour12={ampm}
                                         time-zone-name="long"></lightning-formatted-date-time></p>
     </div>
 </template>

package/src/lightning/formattedDateTime/__examples__/time/time.js

@@ -1,3 +1,5 @@
 import { LightningElement } from 'lwc';
 
-export default class FormattedDateTimeTime extends LightningElement {}
+export default class FormattedDateTimeTime extends LightningElement {
+    ampm = false;
+}

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -92,6 +92,7 @@ export default class LightningFormattedDateTime extends LightningElement {
 
     /**
      * Determines whether time is displayed as 12-hour. If false, time displays as 24-hour. The default setting is determined by the user's locale.
+     * Set the value using a variable. If set to any string directly, the component interprets its value as true.
      * @type {boolean}
      *
      */

package/src/lightning/input/input.html

@@ -1,5 +1,4 @@
 <template>
-    <span data-aria class="slds-assistive-text"></span>
     <template if:true={isTypeSimple}>
         <template if:false={hasExternalLabel}>
             <label class={computedLabelClass} for="input">
@@ -203,7 +202,6 @@
         </div>
     </template>
 
-
     <template if:true={isTypeColor}>
         <div class="slds-color-picker">
             <div class="slds-form-element slds-color-picker__summary">
@@ -214,6 +212,7 @@
                         </template>
                         {label}
                     </label>
+                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
                 </template>
                 <div class="slds-form-element__control">
                     <lightning-primitive-colorpicker-button
@@ -240,9 +239,6 @@
                             oninput={handleInput}>
                     </div>
                 </div>
-                <template if:false={hasExternalLabel}>
-                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
-                </template>
             </div>
         </div>
     </template>

package/src/lightning/input/input.js

@@ -18,9 +18,9 @@ import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     classListMutation,
-    ContentMutation,
     getRealDOMId,
     isSafari,
+    isNativeComponent,
     isNotUndefinedOrNull,
     isUndefinedOrNull,
     normalizeAriaAttribute,
@@ -31,6 +31,7 @@ import {
     decorateInputForDragon,
     setDecoratedDragonInputValueWithoutEvent,
 } from 'lightning/utilsPrivate';
+import AriaObserver from 'lightning/ariaObserver';
 import { normalizeInput } from './normalize';
 import {
     normalizeDate,
@@ -76,7 +77,7 @@ const i18n = {
 
 const ARIA_CONTROLS = 'aria-controls';
 const ARIA_LABEL = 'aria-label';
-const ARIA_LABELEDBY = 'aria-labelledby';
+const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 
 /*
@@ -306,13 +307,11 @@ export default class LightningInput extends LightningElement {
 
     constructor() {
         super();
-        this.ariaObserver = new ContentMutation(this);
+        this.ariaObserver = new AriaObserver(this);
 
         // Native Shadow Root will return [native code].
         // Our synthetic method will return the function source.
-        this.isNative = this.template.querySelector
-            .toString()
-            .match(/\[native code\]/);
+        this.isNative = isNativeComponent(this);
 
         // The selection cache allows us an input to remember what text was selected
         // in cases where we change the text on blur or in browsers (Safari) that
@@ -322,12 +321,12 @@ export default class LightningInput extends LightningElement {
 
     connectedCallback() {
         if (!this.ariaObserver) {
-            this.ariaObserver = new ContentMutation(this);
+            this.ariaObserver = new AriaObserver(this);
         }
         // Manually track connected state because this.template.isConnected can be false
         // when input is created using createElement and inserted into dom manually.
         // i.e. create an input element and pass it to showCustomOverlay
-        // Remove this state and the one in ContentMutation once the issue is fixed.
+        // Remove this state and the one in AriaObserver once the issue is fixed.
         // PR: https://github.com/salesforce/lwc/pull/1798
         this.isConnected = true;
 
@@ -523,12 +522,11 @@ export default class LightningInput extends LightningElement {
 
     set ariaControls(references) {
         this._ariaControls = references;
-        this.ariaObserver.link(
-            'input',
-            'aria-controls',
-            references,
-            '[data-aria]'
-        );
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: ARIA_CONTROLS,
+            ids: references,
+        });
     }
 
     /**
@@ -539,8 +537,7 @@ export default class LightningInput extends LightningElement {
     get ariaLabelledBy() {
         // native version returns the auto linked value
         if (this.isNative) {
-            const ariaValues =
-                this._inputElement.getAttribute('aria-labelledby');
+            const ariaValues = this._inputElement.getAttribute(ARIA_LABELLEDBY);
             return filterNonAutoLink(ariaValues);
         }
         return this._ariaLabelledBy;
@@ -548,12 +545,11 @@ export default class LightningInput extends LightningElement {
 
     set ariaLabelledBy(references) {
         this._ariaLabelledBy = references;
-        this.ariaObserver.link(
-            'input',
-            'aria-labelledby',
-            references,
-            '[data-aria]'
-        );
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: ARIA_LABELLEDBY,
+            ids: references,
+        });
     }
 
     /**
@@ -565,7 +561,7 @@ export default class LightningInput extends LightningElement {
         if (this.isNative) {
             // in native case return the linked value
             const ariaValues =
-                this._inputElement.getAttribute('aria-describedby');
+                this._inputElement.getAttribute(ARIA_DESCRIBEDBY);
             return filterNonAutoLink(ariaValues);
         }
         return this._ariaDescribedBy;
@@ -573,12 +569,11 @@ export default class LightningInput extends LightningElement {
 
     set ariaDescribedBy(references) {
         this._ariaDescribedBy = references;
-        this.ariaObserver.link(
-            'input',
-            'aria-describedby',
-            references,
-            '[data-aria]'
-        );
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: ARIA_DESCRIBEDBY,
+            ids: references,
+        });
     }
 
     /**
@@ -2037,32 +2032,58 @@ export default class LightningInput extends LightningElement {
         return result;
     }
 
+    _updateInputA11y(elem) {
+        synchronizeAttrs(elem, {
+            [ARIA_LABELLEDBY]: this.computedAriaLabelledBy,
+            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
+            [ARIA_CONTROLS]: this.computedAriaControls,
+            [ARIA_LABEL]: this.computedAriaLabel,
+        });
+    }
+
+    _updateDateOrTimePickerA11y(elem) {
+        synchronizeAttrs(elem, {
+            ariaLabelledByElement: this.ariaLabelledBy,
+            ariaDescribedByElements: this.ariaDescribedBy,
+            ariaControlsElement: this.ariaControls,
+            [ARIA_LABEL]: this.computedAriaLabel,
+        });
+    }
+
+    _updateDateTimePickerA11y(elem) {
+        synchronizeAttrs(elem, {
+            // datepicker aria attributes
+            dateAriaLabelledBy: this.dateAriaLabelledBy,
+            dateAriaDescribedBy: this.dateAriaDescribedBy,
+            dateAriaControls: this.dateAriaControls,
+            dateAriaLabel: this.dateAriaLabel,
+            // timepicker aria attributes
+            timeAriaLabelledBy: this.timeAriaLabelledBy,
+            timeAriaDescribedBy: this.timeAriaDescribedBy,
+            timeAriaControls: this.timeAriaControls,
+            timeAriaLabel: this.timeAriaLabel,
+        });
+    }
+
     _synchronizeA11y() {
+        // each of these templates are mutually exclusive and are selected
+        // depending on the [type] of input.
         const input = this.template.querySelector('input');
         const datepicker = this.template.querySelector('lightning-datepicker');
         const timepicker = this.template.querySelector('lightning-timepicker');
-
+        const datetimepicker = this.template.querySelector(
+            'lightning-datetimepicker'
+        );
+        // determine which template type is present,
+        // and update a11y props accordingly
         if (input) {
-            synchronizeAttrs(input, {
-                [ARIA_LABELEDBY]: this.computedAriaLabelledBy,
-                [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
-                [ARIA_CONTROLS]: this.computedAriaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateInputA11y(input);
         } else if (datepicker) {
-            synchronizeAttrs(datepicker, {
-                ariaLabelledByElement: this.ariaLabelledBy,
-                ariaDescribedByElements: this.ariaDescribedBy,
-                ariaControlsElement: this.ariaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateDateOrTimePickerA11y(datepicker);
         } else if (timepicker) {
-            synchronizeAttrs(timepicker, {
-                ariaLabelledByElement: this.ariaLabelledBy,
-                ariaDescribedByElements: this.ariaDescribedBy,
-                ariaControlsElement: this.ariaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateDateOrTimePickerA11y(timepicker);
+        } else if (datetimepicker) {
+            this._updateDateTimePickerA11y(datetimepicker);
         }
     }
 }

package/src/lightning/inputUtils/validity.js

@@ -7,6 +7,7 @@ import labelTooLong from '@salesforce/label/LightningErrorMessage.validityTooLon
 import labelTooShort from '@salesforce/label/LightningErrorMessage.validityTooShort';
 import labelTypeMismatch from '@salesforce/label/LightningErrorMessage.validityTypeMismatch';
 import labelValueMissing from '@salesforce/label/LightningErrorMessage.validityValueMissing';
+import labelSelectAtleastOneValue from '@salesforce/label/LightningErrorMessage.validitySelectAtleastOne';
 import { assert } from 'lightning/utilsPrivate';
 
 const constraintsSortedByPriority = [
@@ -20,6 +21,7 @@ const constraintsSortedByPriority = [
     'tooShort',
     'typeMismatch',
     'valueMissing',
+    'selectAtleastOneValue',
 ];
 
 const defaultLabels = {
@@ -33,6 +35,7 @@ const defaultLabels = {
     tooShort: labelTooShort,
     typeMismatch: labelTypeMismatch,
     valueMissing: labelValueMissing,
+    selectAtleastOneValue: labelSelectAtleastOneValue,
 };
 
 function resolveBestMatch(validity) {
@@ -103,6 +106,12 @@ function newValidityState(constraintsProvider) {
         get badInput() {
             return computeConstraint(constraintsProvider, 'badInput');
         }
+        get selectAtleastOneValue() {
+            return computeConstraint(
+                constraintsProvider,
+                'validitySelectAtleastOneValue'
+            );
+        }
 
         get valid() {
             return !(
@@ -115,7 +124,8 @@ function newValidityState(constraintsProvider) {
                 this.rangeOverflow ||
                 this.stepMismatch ||
                 this.customError ||
-                this.badInput
+                this.badInput ||
+                this.selectAtleastOneValue
             );
         }
     }
@@ -200,6 +210,7 @@ export class FieldConstraintApi {
             tooLong: this.inputComponent.messageWhenTooLong,
             typeMismatch: this.inputComponent.messageWhenTypeMismatch,
             valueMissing: this.inputComponent.messageWhenValueMissing,
+            selectAtleastOneValue: this.inputComponent.messageWhenValueMissing,
         });
     }
 

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -14,6 +14,7 @@ selections when filtering a list, such as from a multi-select picklist.
 To specify the pills, set the `items` attribute to an array of values in your component's JavaScript. 
 
 By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line. 
+For information about changing the behavior, see **Managing Pill Layout in the Container**.
 
 This example creates three pills: a text-only pill, a pill with an avatar, and
 a pill with an icon.
@@ -70,7 +71,7 @@ To create a pill with an avatar, use the following attributes.
 To create a pill with an icon, use the following attributes.
 
 -   `type`: The media type. Use `icon`.
--   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format '\utility:down\' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used in this component.
+-   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used for the `iconName`.
 -   `alternativeText`: The alternative text used to describe the icon. Describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
 
 `lightning-pill-container` provides two variants: `bare` and `standard` (default). They are visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
@@ -135,9 +136,12 @@ set to false by default, which makes all pills display and wrap to multiple line
 - `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they are wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
 
 If all pills aren't displayed, the component shows a text button indicating how many more pills there are.
+For example, if there are five more pills that aren’t displayed, the text button shows `+5 more`. The text button fires the `focus` event when you click it.
 
 To display a long list of pills as collapsed, set `is-collapsible` to true and optionally set `is-expanded` to false. Otherwise, pills are displayed expanded.
 
+##### Expand and Collapse Pills Programmatically
+
 Use `is-collapsible` and `is-expanded` to programmatically expand and collapse the pills.
 
 This example sets `is-collapsible` and uses a button to change the value of `is-expanded`.
@@ -175,6 +179,46 @@ export default class PillContainerCanCollapse extends LightningElement {
     ];
 }
 ```
+##### Display All Pills With the `+n more` Button
+
+If all pills aren't displayed, the component shows a text button labeled `+n more` to indicate more pills can be displayed. By default, `lightning-pill-container` doesn’t handle the `focus` event that’s fired when you click the button. You can handle the event to display more pills or write logic to do something else when the button is clicked.
+
+This example sets the pills to be collapsible but not expanded and handles the focus event.
+
+```html
+<template>
+    <div style="width: 600px">
+            <lightning-pill-container
+                items={items}
+                is-collapsible={collapsible}
+	            is-expanded={expanded}
+                onfocus={handlePillExpansion}
+            >
+            </lightning-pill-container>
+    </div>
+  </template>
+  ```
+
+The list of pills is initially collapsed. When there are too many pills to be displayed, the text button labeled `+n more` displays. The handler for the `focus` event enables all the pills to display.
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class PillContainerMoreButtonExpands extends LightningElement {
+    collapsible = true;
+	expanded = false;
+
+handlePillExpansion(){
+    this.expanded = true;
+}
+
+    items = [
+        { 
+        //define the pills
+        }
+    ];
+}
+```
 
 #### Component Styling
 

package/src/lightning/primitiveCellActions/primitiveCellActions.js

@@ -21,28 +21,33 @@ const i18n = {
     showActions: labelShowActions,
 };
 
+/**
+ * A cell-level action.
+ */
 export default class PrimitiveCellActions extends LightningElement {
-    static delegatesFocus = true;
-
-    @api rowKeyValue;
-    @api colKeyValue;
-    @api rowActions;
-
+    // Tracked objects
     @track containerRect;
     @track _actions = [];
 
+    // Private variables
+    static delegatesFocus = true;
     _isLoadingActions;
     _menuAlignment = DEFAULT_MENU_ALIGNMENT;
     _internalTabIndex = false;
 
-    connectedCallback() {
-        this._connected = true;
-    }
+    /************************** PUBLIC ATTRIBUTES ***************************/
 
-    disconnectedCallback() {
-        this._connected = false;
-    }
+    @api rowKeyValue;
+    @api colKeyValue;
+    @api rowActions;
 
+    /**
+     * Defines the current menu alignment
+     * See `VALID_MENU_ALIGNMENT` for valid menu alignment values
+     * See `DEFAULT_MENU_ALIGNMENT` for the default menu alignment
+     *
+     * @type {string}
+     */
     @api
     get menuAlignment() {
         return this._menuAlignment;
@@ -55,6 +60,11 @@ export default class PrimitiveCellActions extends LightningElement {
         });
     }
 
+    /************************** PUBLIC METHODS ***************************/
+
+    /**
+     * Sets focus on a lightning-button-menu
+     */
     @api
     focus() {
         if (this._connected) {
@@ -62,6 +72,9 @@ export default class PrimitiveCellActions extends LightningElement {
         }
     }
 
+    /**
+     * Clicks a lightning-button-menu
+     */
     @api
     click() {
         if (this._connected) {
@@ -73,18 +86,42 @@ export default class PrimitiveCellActions extends LightningElement {
         }
     }
 
+    /************************** PRIVATE GETTERS **************************/
+
+    /**
+     * Returns the computed menu alignment value
+     *
+     * @return {string} Current computed menu alignment
+     */
     get computedMenuAlignment() {
         return this.menuAlignment;
     }
 
+    /**
+     * Returns the button alternative text in the appropriate language
+     *
+     * @return {string} Language-specific button alternative text
+     */
     get buttonAlternateText() {
         return `${i18n.showActions}`;
     }
 
+    /**
+     * Returns the spinner alternative text in the appropriate language
+     *
+     * @return {string} Language-specific spinner alternative text
+     */
     get spinnerAlternateText() {
         return `${i18n.loadingActions}`;
     }
 
+    /************************ EVENT DISPATCHERS **************************/
+
+    /**
+     * Handles selecting an action
+     *
+     * @param {Event} event
+     */
     handleActionSelect(event) {
         this.dispatchEvent(
             new CustomEvent('privatecellactiontriggered', {
@@ -100,6 +137,9 @@ export default class PrimitiveCellActions extends LightningElement {
         );
     }
 
+    /**
+     * Handles the opening of an action menu
+     */
     handleMenuOpen() {
         this.elementRect = this.template
             .querySelector('lightning-button-menu')
@@ -135,6 +175,23 @@ export default class PrimitiveCellActions extends LightningElement {
         }
     }
 
+    /************************** LIFECYCLE HOOKS **************************/
+
+    connectedCallback() {
+        this._connected = true;
+    }
+
+    disconnectedCallback() {
+        this._connected = false;
+    }
+
+    /************************* HELPER FUNCTIONS **************************/
+
+    /**
+     * Resets loading state when all actions have been loaded
+     *
+     * @param {object} actions - Actions displayed in the menu
+     */
     finishLoadingActions(actions) {
         this._isLoadingActions = false;
         this._actions = actions;

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html

@@ -215,18 +215,20 @@
 
             <!-- row number -->
             <template if:true={isRowNumber}>
-                 <lightning-primitive-datatable-tooltip data-navigation="enable"
-                                                        data-action-triggers="enter,space"
-                                                        class={rowNumberErrorClass}
-                                                        size="xx-small"
-                                                        header={typeAttribute0.title}
-                                                        content={typeAttribute0.messages}
-                                                        variant='error'
-                                                        internal-tab-index={internalTabIndex}
-                                                        alternative-text={typeAttribute0.alternativeText}>
+                <template if:true={_rowHasError}>
+                    <lightning-primitive-datatable-tooltip data-navigation="enable"
+                                                           data-action-triggers="enter,space"
+                                                           class="slds-m-horizontal_xxx-small"
+                                                           size="xx-small"
+                                                           header={typeAttribute0.title}
+                                                           content={typeAttribute0.messages}
+                                                           variant='error'
+                                                           internal-tab-index={internalTabIndex}
+                                                           alternative-text={typeAttribute0.alternativeText}>
 
-                 </lightning-primitive-datatable-tooltip>
-                <span class="slds-row-number slds-text-body_small slds-text-color_weak"></span>
+                    </lightning-primitive-datatable-tooltip>
+                </template>
+                <span class="slds-row-number slds-text-body_small slds-text-color_weak" style={computedRowNumberStyle}></span>
             </template>
 
             <!-- text -->

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -8,6 +8,9 @@ import labelEditHasError from '@salesforce/label/LightningDatatable.editHasError
 import labelTrue from '@salesforce/label/LightningDatatable.true';
 import labelFalse from '@salesforce/label/LightningDatatable.false';
 
+// Same constant (TOOLTIP_ALLOWANCE) as used in lightning/datatable/rowNumber.js
+// If making change to this, make sure to modify in rowNumber.js as well
+const TOOLTIP_ALLOWANCE = 20;
 const i18n = {
     edit: labelEdit,
     editHasError: labelEditHasError,
@@ -58,6 +61,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     @api wrapTextMaxLines;
 
     _wrapText = false;
+    _rowHasError = false;
 
     @api
     get wrapText() {
@@ -153,7 +157,13 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get isRowNumber() {
-        return this.isType('rowNumber');
+        if (this.isType('rowNumber')) {
+            const error = this.typeAttribute0;
+            this._rowHasError = error && error.title && error.messages;
+            return true;
+        }
+
+        return false;
     }
 
     get isAction() {
@@ -285,13 +295,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             .toString();
     }
 
-    get rowNumberErrorClass() {
-        const classes = classSet('slds-m-horizontal_xxx-small');
-        const error = this.typeAttribute0;
-        if (error) {
-            classes.add({ 'slds-hidden': !error.title && !error.messages });
-        }
-        return classes.toString();
+    get computedRowNumberStyle() {
+        return this._rowHasError ? '' : `padding-left: ${TOOLTIP_ALLOWANCE}px;`;
     }
 
     get editIconAssistiveText() {