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

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js

@@ -10,24 +10,28 @@ const i18n = {
     wrapText: labelWrapText,
 };
 
+/**
+ * A header-level action.
+ */
 export default class PrimitiveHeaderActions extends LightningElement {
-    static delegatesFocus = true;
-    @api colKeyValue;
-
+    // Tracked objects
     @track containerRect;
     @track _internalActions = [];
     @track _customerActions = [];
+
+    // Private variables
+    static delegatesFocus = true;
     _actionMenuAlignment;
 
-    @api
-    focus() {
-        const btnMenu = this.template.querySelector('lightning-button-menu');
+    /************************** PUBLIC ATTRIBUTES ***************************/
 
-        if (btnMenu) {
-            btnMenu.focus();
-        }
-    }
+    @api colKeyValue;
 
+    /**
+     * Defines the actions on a header cell
+     *
+     * @type {Object}
+     */
     @api
     get actions() {
         return this._actions;
@@ -38,49 +42,60 @@ export default class PrimitiveHeaderActions extends LightningElement {
         this.updateActions();
     }
 
-    get i18n() {
-        return i18n;
-    }
-
-    updateActions() {
-        const actionTypeReducer = (type) => (actions, action) => {
-            const overrides = { _type: type, _action: action };
-            actions.push(Object.assign({}, action, overrides));
+    /************************** PUBLIC METHODS ***************************/
 
-            return actions;
-        };
+    /**
+     * Sets focus on a lightning-button-menu
+     */
+    @api
+    focus() {
+        const btnMenu = this.template.querySelector('lightning-button-menu');
 
-        this._internalActions = this.getActionsByType('internalActions').reduce(
-            actionTypeReducer('internal'),
-            []
-        );
+        if (btnMenu) {
+            btnMenu.focus();
+        }
+    }
 
-        this._customerActions = this.getActionsByType('customerActions').reduce(
-            actionTypeReducer('customer'),
-            []
-        );
+    /************************** PRIVATE GETTERS **************************/
 
-        // ToDo: W-8389508 Refactor so menu is outside of header
-        this._actionMenuAlignment =
-            this._actions.menuAlignment &&
-            this._actions.menuAlignment.replace('auto-', '');
+    /**
+     * Returns the internationalization definition object
+     *
+     * @return {Object} The i18n definition object
+     */
+    get i18n() {
+        return i18n;
     }
 
+    /**
+     * Determines whether or not a header has actions
+     *
+     * @return {Boolean}
+     */
     get hasActions() {
         return (
             this._internalActions.length > 0 || this._customerActions.length > 0
         );
     }
+
+    /**
+     * Determines whether or not a header has an action divider
+     *
+     * @return {Boolean}
+     */
     get hasActionsDivider() {
         return (
             this._internalActions.length > 0 && this._customerActions.length > 0
         );
     }
 
-    getActionsByType(type) {
-        return Array.isArray(this._actions[type]) ? this._actions[type] : [];
-    }
+    /************************ EVENT DISPATCHERS **************************/
 
+    /**
+     * Handles opening a menu
+     *
+     * @param {Event} event
+     */
     handleMenuOpen(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -107,6 +122,9 @@ export default class PrimitiveHeaderActions extends LightningElement {
         );
     }
 
+    /**
+     * Handles closing a menu
+     */
     handleMenuClose() {
         this.dispatchEvent(
             new CustomEvent('privatecellheaderactionmenuclosed', {
@@ -117,8 +135,13 @@ export default class PrimitiveHeaderActions extends LightningElement {
         );
     }
 
-    handleActionSelect(evt) {
-        const action = evt.detail.value;
+    /**
+     * Handles selecting an action
+     *
+     * @param {Event} event
+     */
+    handleActionSelect(event) {
+        const action = event.detail.value;
 
         this.dispatchEvent(
             new CustomEvent('privatecellheaderactiontriggered', {
@@ -133,4 +156,43 @@ export default class PrimitiveHeaderActions extends LightningElement {
             })
         );
     }
+
+    /************************* HELPER FUNCTIONS **************************/
+
+    /**
+     * Updates the actions object
+     */
+    updateActions() {
+        const actionTypeReducer = (type) => (actions, action) => {
+            const overrides = { _type: type, _action: action };
+            actions.push(Object.assign({}, action, overrides));
+
+            return actions;
+        };
+
+        this._internalActions = this.getActionsByType('internalActions').reduce(
+            actionTypeReducer('internal'),
+            []
+        );
+
+        this._customerActions = this.getActionsByType('customerActions').reduce(
+            actionTypeReducer('customer'),
+            []
+        );
+
+        // TODO: W-8389508 Refactor so menu is outside of header
+        this._actionMenuAlignment =
+            this._actions.menuAlignment &&
+            this._actions.menuAlignment.replace('auto-', '');
+    }
+
+    /**
+     * Returns actions by action type
+     *
+     * @param {String} type The action type to filter by
+     * @return {Array} An array of actions that match the provided type
+     */
+    getActionsByType(type) {
+        return Array.isArray(this._actions[type]) ? this._actions[type] : [];
+    }
 }

package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html

@@ -1,8 +1,7 @@
 <template>
-    <div
-        class={computedClass}
-        style={columnStyles}
-    >
+    <div class={computedClass} style={columnStyles}>
+
+        <!-- Header Content -->
         <span class="slds-th__action">
             <template if:true={def.iconName}>
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
@@ -17,6 +16,7 @@
                 <span class="slds-truncate" if:false={def.label} title={def.ariaLabel}></span>
             </template>
 
+            <!-- Header Actions -->
             <template if:true={hasActions}>
                 <lightning-primitive-header-actions
                     col-key-value={def.colKeyValue}
@@ -26,6 +26,7 @@
                 ></lightning-primitive-header-actions>
             </template>
 
+            <!-- Resize Handler -->
             <template if:true={isResizable}>
                 <lightning-primitive-resize-handler
                      value={columnWidth}

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -181,44 +181,51 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     }
 
     /**
-     * Determines if sort direction is set to ascending
+     * Computes an option name
      *
-     * @return {boolean} Whether the sort direction is ascending
+     * @return {string} The computed option name
      */
-    get isAscSorted() {
-        return this.sortedDirection === 'asc';
+    get computedOptionName() {
+        return `${this.dtContextId}-options`;
     }
 
     /**
-     * Determines if sort direction is set to descending
+     * Determines if the header has actions available
      *
-     * @return {boolean} Whether the sort direction is descending
+     * @return {boolean} Whether the header has available actions
      */
-    get isDescSorted() {
-        return this.sortedDirection === 'desc';
+    get hasActions() {
+        return (
+            this.actions.customerActions.length > 0 ||
+            this.actions.internalActions.length > 0
+        );
     }
 
     /**
-     * Returns the sort order label in the appropriate language
+     * Returns the header's aria role
      *
-     * @return {string} Language-specific sort order label
+     * @return {string|boolean} The aria role for the header
      */
-    get sortedOrderLabel() {
-        if (this.sorted) {
-            return this.sortedDirection === 'desc'
-                ? i18n.sortDesc
-                : i18n.sortAsc;
-        }
-        return i18n.sortNone;
+    get headerRole() {
+        return this.isResizable || this.sortable ? 'button' : false;
     }
 
     /**
-     * Determines if the header is selectable
+     * Determines if sort direction is set to ascending
      *
-     * @return {boolean} Whether the header is selectable
+     * @return {boolean} Whether the sort direction is ascending
      */
-    get isSelectableHeader() {
-        return this.def.type === 'SELECTABLE_CHECKBOX';
+    get isAscSorted() {
+        return this.sortedDirection === 'asc';
+    }
+
+    /**
+     * Determines if sort direction is set to descending
+     *
+     * @return {boolean} Whether the sort direction is descending
+     */
+    get isDescSorted() {
+        return this.sortedDirection === 'desc';
     }
 
     /**
@@ -239,6 +246,15 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         return this.resizable && this.def.resizable !== false;
     }
 
+    /**
+     * Determines if the header is selectable
+     *
+     * @return {boolean} Whether the header is selectable
+     */
+    get isSelectableHeader() {
+        return this.def.type === 'SELECTABLE_CHECKBOX';
+    }
+
     /**
      * Determines if the header is sortable
      *
@@ -257,15 +273,6 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         return i18n;
     }
 
-    /**
-     * Returns the header's aria role
-     *
-     * @return {string|boolean} The aria role for the header
-     */
-    get headerRole() {
-        return this.isResizable || this.sortable ? 'button' : false;
-    }
-
     /**
      * Returns the header's resize step
      *
@@ -276,24 +283,17 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     }
 
     /**
-     * Computes an option name
-     *
-     * @return {string} The computed option name
-     */
-    get computedOptionName() {
-        return `${this.dtContextId}-options`;
-    }
-
-    /**
-     * Determines if the header has actions available
+     * Returns the sort order label in the appropriate language
      *
-     * @return {boolean} Whether the header has available actions
+     * @return {string} Language-specific sort order label
      */
-    get hasActions() {
-        return (
-            this.actions.customerActions.length > 0 ||
-            this.actions.internalActions.length > 0
-        );
+    get sortedOrderLabel() {
+        if (this.sorted) {
+            return this.sortedDirection === 'desc'
+                ? i18n.sortDesc
+                : i18n.sortAsc;
+        }
+        return i18n.sortNone;
     }
 
     /************************** LIFECYCLE HOOKS **************************/

package/src/lightning/primitiveHeaderFactory/selectableHeader.html

@@ -1,30 +1,32 @@
 <template>
-    <div class="slds-th__action slds-th__action_form slds-cell-fixed"
-         style={columnStyles}>
+    <!-- Header Content -->
+    <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <template if:true={showCheckbox}>
-                 <span class="slds-checkbox">
-                    <input
-                        type="checkbox"
-                        class="datatable-select-all"
-                        name={computedOptionName}
-                        id="lgt-dt-header-factory-id"
-                        onclick={handleSelectAllRows}
-                        tabindex={internalTabIndex}
-                        data-navigation="enable"
-                        disabled={def.isBulkSelectionDisabled}
-                    >
-                    <label class="slds-checkbox__label" for="lgt-dt-header-factory-id">
-                        <span class="slds-checkbox_faux"></span>
-                        <span class="slds-form-element__label slds-assistive-text">
-                            {i18n.selectAll}
-                        </span>
-                    </label>
-                 </span>
+            <span class="slds-checkbox">
+                
+                <!-- Selectable Checkbox -->
+                <input
+                    type="checkbox"
+                    class="datatable-select-all"
+                    name={computedOptionName}
+                    id="lgt-dt-header-factory-id"
+                    onclick={handleSelectAllRows}
+                    tabindex={internalTabIndex}
+                    data-navigation="enable"
+                    disabled={def.isBulkSelectionDisabled}>
+
+                <label class="slds-checkbox__label" for="lgt-dt-header-factory-id">
+                    <span class="slds-checkbox_faux"></span>
+                    <span class="slds-form-element__label slds-assistive-text">
+                        {i18n.selectAll}
+                    </span>
+                </label>
+            </span>
         </template>
         <template if:false={showCheckbox}>
-                 <span id="column-group-header" class="slds-assistive-text" data-column-header>
-                     {i18n.chooseARow}
-                 </span>
+            <span id="column-group-header" class="slds-assistive-text" data-column-header>
+                {i18n.chooseARow}
+            </span>
         </template>
     </div>
 </template>

package/src/lightning/primitiveHeaderFactory/sortableHeader.html

@@ -1,19 +1,19 @@
 <template>
-    <span
-        class={computedClass}
-        tabindex={internalTabIndex}
-        style={columnStyles}
-    >
+    <!-- Header Content -->
+    <span class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
+        
         <a href="javascript:void(0);"
            class={computedSortClass}
            role={headerRole}
            tabindex={internalTabIndex}
            data-navigation="enable"
            onclick={handleSortingClick}
-           style={columnStyles} data-action-triggers="enter">
+           style={columnStyles}
+           data-action-triggers="enter">
 
             <span class="slds-assistive-text">{i18n.sort}</span>
 
+            <!-- Icon to display to the left/start of the header text -->
             <template if:true={def.iconName}>
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
@@ -21,17 +21,18 @@
                         <span class="slds-truncate">{def.label}</span>
                     </template>
 
+                    <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"
                          svg-class="slds-icon slds-icon-text-default slds-is-sortable__icon"
                          icon-name="utility:arrowdown"
                          size="x-small">
                     </lightning-primitive-icon>
-
                 </div>
             </template>
             <template if:false={def.iconName}>
                 <span class="slds-truncate" title={def.label}>{def.label}</span>
+                <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"
                          svg-class="slds-icon slds-icon-text-default slds-is-sortable__icon"
@@ -41,17 +42,20 @@
             </template>
         </a>
 
+        <!-- Aria Live Region to announce sorting order -->
         <span class="slds-assistive-text" aria-live="polite" aria-atomic="true">{sortedOrderLabel}</span>
 
+        <!-- Header Actions -->
         <template if:true={hasActions}>
             <lightning-primitive-header-actions
                 col-key-value={def.colKeyValue}
                 actions={actions}
                 tabindex={internalTabIndex}
-                data-navigation="enable"
-            ></lightning-primitive-header-actions>
+                data-navigation="enable">
+            </lightning-primitive-header-actions>
         </template>
 
+        <!-- Resize Handler -->
         <template if:true={isResizable}>
             <lightning-primitive-resize-handler
                  value={columnWidth}

package/src/lightning/progressIndicator/progressIndicator.js

@@ -53,7 +53,7 @@ export default class LightningProgressIndicator extends LightningElement {
     set currentStep(value) {
         this.privateCurrentStep = value;
         if (this.privateRendered) {
-            this.updateSteps();
+            this.updateSteps(value);
         }
     }
 
@@ -100,18 +100,16 @@ export default class LightningProgressIndicator extends LightningElement {
         const currentStepIndex = getCurrentStepIndex(steps, currentStep);
 
         let activeStepIndex = -1;
-
-        // Set activeStep index to activeStep if provided.
+        // Set activeStepIndex to activeStep if provided.
         // This happens when focus is updated by user using arrow keys or clicking a progress step.
         // When component re-renders, active step is not passed from renderedCallback or handleSlotChange
         // In this scenario, use the privateActiveStepIndex to maintain the activeStep.
         // privateActiveStepInde will have the active step before the re-render
-        // In case of initial render, privateActiveStepIndex is null. Use privateCurrentStep as activeStepIndex for fallback.
+        // In case of initial render, privateActiveStepIndex is undefined. Use privateCurrentStep as activeStepIndex for fallback.
         // activeStep is needed to set active class and proper tabIndex for the progress step
-
         if (activeStep) {
             activeStepIndex = getStepIndex(steps, activeStep);
-        } else if (this.privateActiveStepIndex) {
+        } else if (this.privateActiveStepIndex !== undefined) {
             activeStepIndex = this.privateActiveStepIndex;
         } else {
             activeStepIndex = getStepIndex(steps, this.privateCurrentStep);

package/src/lightning/progressStep/progressStep.js

@@ -31,6 +31,8 @@ export default class LightningProgressStep extends LightningElement {
      */
     @api value;
 
+    _privateLabel;
+
     @track state = {};
 
     updateInternal(newStatus, newType, newIndex, newActive, shouldFocus) {
@@ -47,6 +49,7 @@ export default class LightningProgressStep extends LightningElement {
         this.state.type = newType;
         this.state.index = newIndex;
         this.state.active = newActive;
+        this.initializeTooltip();
     }
     /**
      * Text to display as the name or tooltip for the step.
@@ -54,30 +57,12 @@ export default class LightningProgressStep extends LightningElement {
      */
     @api
     set label(value) {
-        if (this._tooltip) {
-            this._tooltip.value = value;
-        } else if (value && !this.isPath) {
-            // Note that because the tooltip target is a child element it may not be present in the
-            // dom during initial rendering.
-            this._tooltip = new Tooltip(value, {
-                root: this,
-                target: () => this.template.querySelector('button'),
-                type: TooltipType.Toggle,
-                align: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Bottom,
-                },
-                targetAlign: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Top,
-                },
-            });
-            this._tooltip.initialize();
-        }
+        this._privateLabel = value;
+        this.initializeTooltip();
     }
 
     get label() {
-        return this._tooltip ? this._tooltip.value : undefined;
+        return this._privateLabel;
     }
 
     computeClassSet(type, status, isActive) {
@@ -87,7 +72,8 @@ export default class LightningProgressStep extends LightningElement {
             'slds-is-completed': !isPath && status === 'completed',
             'slds-has-error': !isPath && status === 'error',
             'slds-is-active':
-                isActive === true || (type === 'base' && status === 'current'),
+                (isPath && isActive === true) ||
+                (type === 'base' && status === 'current'),
             'slds-path__item': isPath,
             'slds-is-complete': isPath && status === 'completed',
             'slds-is-current':
@@ -239,4 +225,27 @@ export default class LightningProgressStep extends LightningElement {
         }
         return base;
     }
+
+    initializeTooltip() {
+        if (this._tooltip) {
+            this._tooltip.value = this._privateLabel;
+        } else if (this._privateLabel && this.state.type && !this.isPath) {
+            // Note that because the tooltip target is a child element it may not be present in the
+            // dom during initial rendering.
+            this._tooltip = new Tooltip(this._privateLabel, {
+                root: this,
+                target: () => this.template.querySelector('button'),
+                type: TooltipType.Toggle,
+                align: {
+                    horizontal: Direction.Center,
+                    vertical: Direction.Bottom,
+                },
+                targetAlign: {
+                    horizontal: Direction.Center,
+                    vertical: Direction.Top,
+                },
+            });
+            this._tooltip.initialize();
+        }
+    }
 }

package/src/lightning/staticMap/staticMap.html

@@ -6,6 +6,7 @@
                     oniframeload={handleIframeLoad}
                     width={width}
                     height={height}
+                    title={mapTitle}
                     frame-style={mapStyle}>
         </lightning-primitive-iframe>
         <div class="slds-iframe-cover"></div>