lightning-base-components 1.13.9-alpha → 1.14.3-alpha

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() {

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.html

@@ -3,19 +3,21 @@
         if:true={visible}
         class="slds-popover slds-popover_edit"
         role="dialog"
+        aria-label={dialogAriaLabel}
         tabindex="-1"
         onblur={handleTypeElemBlur}
         onfocus={handleTypeElemFocus}
         onkeydown={handleCellKeydown}
-        style={computedStyle}
-    >
+        style={computedStyle}>
+
         <span class="inline-edit-form-start" tabindex="0" onfocus={handleFormStartFocus}></span>
         <div class="slds-popover__body">
             <form onsubmit={handleEditFormSubmit} novalidate>
+                <!-- Renders the required indicator -->
                 <lightning-primitive-datatable-iedit-input-wrapper
                     required={required}
-                    class="slds-grid slds-p-left_xx-small"
-                >
+                    class="slds-grid slds-p-left_xx-small">
+                    <!-- Renders the appropriate input type in the inline edit panel -->
                     <lightning-primitive-datatable-iedit-type-factory
                         required={required}
                         class="dt-type-edit-factory slds-col"
@@ -24,10 +26,11 @@
                         edited-value={editedValue}
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
-                        key={inputKey}
-                    ></lightning-primitive-datatable-iedit-type-factory>
+                        key={inputKey}>
+                    </lightning-primitive-datatable-iedit-type-factory>
                 </lightning-primitive-datatable-iedit-input-wrapper>
                 <template if:true={isMassEditEnabled}>
+                    <!-- Checkbox to select in order to mass edit multiple rows -->
                     <lightning-input
                         data-mass-selection="true"
                         type="checkbox"
@@ -35,32 +38,32 @@
                         label={massEditCheckboxLabel}
                         onchange={handleMassCheckboxChange}
                         onblur={handleTypeElemBlur}
-                        onfocus={handleTypeElemFocus}
-                    ></lightning-input>
+                        onfocus={handleTypeElemFocus}>
+                    </lightning-input>
                 </template>
                 <template if:false={isMassEditEnabled}>
                     <button type="submit" aria-hidden="true" tabindex="-1" class="slds-hide" value="save"></button>
                 </template>
             </form>
         </div>
+        <!-- If in mass edit mode, render 'Cancel' and 'Apply' buttons -->
         <template if:true={isMassEditEnabled}>
             <div class="slds-popover__footer">
                 <div class="slds-grid slds-grid_align-end">
                     <lightning-button
-                        label={cancelLabel}
+                        label={i18n.cancel}
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
-                        onclick={cancelEdition}
-                    ></lightning-button>
+                        onclick={cancelEditing}>
+                    </lightning-button>
                     <lightning-button
-                        label={applyLabel}
+                        label={i18n.apply}
                         style="margin-left: .25rem"
                         variant="brand"
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
                         data-form-last-element="true"
-                        onclick={processSubmission}
-                    >
+                        onclick={processSubmission}>
                     </lightning-button>
                 </div>
             </div>