lightning-base-components 1.20.2-alpha → 1.21.1-alpha

package/src/lightning/datatable/__examples__/withColResizing/withColResizing.html

@@ -0,0 +1,47 @@
+<template>
+    <p>Datatable with resize-column disabled</p>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        resize-column-disabled>
+    </lightning-datatable>
+
+    <p>Datatable with min and max column widths. Resize step: {resizeStep} </p>
+    <lightning-button
+        label="Increase resize step"
+        class="increaseResizeStep"
+        onclick={increaseResizeStep}>
+    </lightning-button>
+    <lightning-button
+        label="Decrease resize step"
+        class="decreaseResizeStep"
+        onclick={decreaseResizeStep}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        min-column-width="100"
+        max-column-width="300"
+        resize-step={resizeStep}>
+    </lightning-datatable>
+
+    <p>Datatable with column-widths-mode='{mode}'</p>
+    <lightning-button
+        label="Change Widths Mode"
+        class="changeWidthsMode"
+        onclick={changeWidthsMode}>
+    </lightning-button>
+    <lightning-button
+        label="Add Column"
+        column="addColumn"
+        onclick={addColumn}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        column-widths-mode={mode}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withColResizing/withColResizing.js

@@ -0,0 +1,42 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-col-resizing></datatable-with-col-resizing> to the lwr-playground to see table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithResize extends LightningElement {
+    data = [];
+    columns = columns;
+    mode = 'fixed';
+    resizeStep = 10;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 25 });
+    }
+
+    changeWidthsMode() {
+        this.mode = this.mode === 'fixed' ? 'auto' : 'fixed';
+    }
+
+    increaseResizeStep() {
+        this.resizeStep += 10;
+    }
+
+    decreaseResizeStep() {
+        this.resizeStep =
+            this.resizeStep > 10 ? (this.resizeStep -= 10) : this.resizeStep;
+    }
+
+    addColumn() {
+        const cols = Array.from(this.columns);
+        cols.push({ label: 'ID', fieldName: 'id' });
+        this.columns = cols;
+    }
+}

package/src/lightning/datatable/__examples__/withErrors/generateData.js

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withErrors/withErrors.html

@@ -0,0 +1,13 @@
+<template>
+    <lightning-button
+        label="Trigger error"
+        class="triggerError"
+        onclick={triggerError}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        errors={errors}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withErrors/withErrors.js

@@ -0,0 +1,44 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-errors></datatable-with-errors> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name', editable: true },
+    { label: 'Website', fieldName: 'website', type: 'url', editable: true },
+    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: true },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: true },
+];
+
+export default class DatatableWithError extends LightningElement {
+    data = [];
+    columns = columns;
+    errors = {};
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
+    }
+
+    triggerError() {
+        this.errors = {
+            rows: {
+                1: {
+                    title: 'We found 2 errors.',
+                    messages: [
+                        'Enter a valid name',
+                        'Verify the phone number and try again.',
+                    ],
+                    fieldNames: ['name', 'phone'],
+                },
+            },
+            table: {
+                title: 'Your entry cannot be saved. Fix the errors and try again.',
+                messages: [
+                    'Row 1 name must be valid text',
+                    'Row 1 phone number is invalid',
+                ],
+            },
+        };
+    }
+}

package/src/lightning/datatable/__examples__/withInfiniteLoading/withInfiniteLoading.html

@@ -6,7 +6,8 @@
             data={data}
             columns={columns}
             enable-infinite-loading
-            onloadmore={handleLoadMore}>
+            onloadmore={handleLoadMore}
+            load-more-offset={loadMoreOffset}>
         </lightning-datatable>
     </div>
     <p>{loadMoreStatus}</p>

package/src/lightning/datatable/__examples__/withInfiniteLoading/withInfiniteLoading.js

@@ -14,6 +14,7 @@ export default class DatatableWithInfiniteLoading extends LightningElement {
     columns = columns;
     loadMoreStatus;
     totalNumberOfRows = 250;
+    loadMoreOffset = 20;
 
     // eslint-disable-next-line @lwc/lwc/no-async-await
     async connectedCallback() {

package/src/lightning/datatable/__examples__/withInlineEdit/withInlineEdit.html

@@ -6,6 +6,7 @@
                 show-row-number-column
                 row-number-offset={rowOffset}
                 suppress-bottom-bar
+                draft-values={draftValues}
                 columns={columns}>
         </lightning-datatable>
     </div>

package/src/lightning/datatable/__examples__/withInlineEdit/withInlineEdit.js

@@ -13,6 +13,7 @@ export default class DatatableWithInlineEdit extends LightningElement {
     data = [];
     columns = columns;
     rowOffset = 0;
+    draftValues = [];
 
     connectedCallback() {
         this.data = generateData({ amountOfRecords: 100 });

package/src/lightning/datatable/__examples__/withRowSelection/generateData.js

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withRowSelection/withRowSelection.html

@@ -0,0 +1,21 @@
+<template>
+    <p>Max row selection value: {maxRowSelection}</p>
+    <lightning-button
+        label="Increase max row selection"
+        class="increaseMaxRowSelection"
+        onclick={increaseMaxRowSelection}>
+    </lightning-button>
+    <lightning-button
+        label="Decrease max row selection"
+        class="decreaseMaxRowSelection"
+        onclick={decreaseMaxRowSelection}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        columns={columns}
+        data={data}
+        selected-rows={selectedRows}
+        row-number-offset="0"
+        max-row-selection={maxRowSelection}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withRowSelection/withRowSelection.js

@@ -0,0 +1,34 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-row-selection></datatable-with-row-selection> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithRowSelection extends LightningElement {
+    data = [];
+    columns = columns;
+    selectedRows = ['1', '2', '4'];
+    maxRowSelection = 4;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
+    }
+
+    increaseMaxRowSelection() {
+        this.maxRowSelection += 1;
+    }
+
+    decreaseMaxRowSelection() {
+        this.maxRowSelection =
+            this.maxRowSelection > 0
+                ? (this.maxRowSelection -= 1)
+                : this.maxRowSelection;
+    }
+}

package/src/lightning/datatable/__examples__/withTextWrapping/generateData.js

@@ -0,0 +1,16 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            name: `Name (${index})`,
+            description:
+                'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withTextWrapping/withTextWrapping.html

@@ -0,0 +1,14 @@
+<template>
+    <lightning-button
+        label="Change text wrapping max lines"
+        class="changeTextWrappingMaxLines"
+        onclick={changeTextWrappingMaxLines}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        columns={columns}
+        data={data}
+        hide-checkbox-column
+        wrap-text-max-lines={wrapTextMaxLines}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withTextWrapping/withTextWrapping.js

@@ -0,0 +1,31 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-text-wrapping></datatable-with-text-wrapping> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    {
+        label: 'Description',
+        fieldName: 'description',
+        wrapText: true,
+    },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatablewithTextWrapping extends LightningElement {
+    data = [];
+    columns = columns;
+    wrapTextMaxLines;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 25 });
+    }
+
+    changeTextWrappingMaxLines() {
+        this.wrapTextMaxLines = 3;
+    }
+}

package/src/lightning/datatable/__examples__/withVirtualization/generateData.js

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withVirtualization/withVirtualization.html

@@ -0,0 +1,12 @@
+<template>
+    <div style="height:100vh;">
+        <lightning-datatable
+            data-render-mode="role-based"
+            key-field="id"
+            data={data}
+            columns={columns}
+            render-mode="role-based"
+            render-config={renderConfig}>
+        </lightning-datatable>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/withVirtualization/withVirtualization.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-virtualization></datatable-with-virtualization> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithVirtualization extends LightningElement {
+    data = [];
+    columns = columns;
+    renderConfig = {
+        virtualize: 'vertical',
+        bufferSize: 10,
+        fixedHeight: true,
+    };
+
+    connectedCallback() {
+        const data = generateData({ amountOfRecords: 100 });
+        this.data = data;
+    }
+}

package/src/lightning/datatable/__examples__/withoutTableHeader/generateData.js

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withoutTableHeader/withoutTableHeader.html

@@ -0,0 +1,10 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            data={data}
+            columns={columns}
+            hide-table-header>
+        </lightning-datatable>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/withoutTableHeader/withoutTableHeader.js

@@ -0,0 +1,22 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-without-table-header></datatable-without-table-header> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithoutTableHeader extends LightningElement {
+    data = [];
+    columns = columns;
+
+    connectedCallback() {
+        const data = generateData({ amountOfRecords: 100 });
+        this.data = data;
+    }
+}

package/src/lightning/dualListbox/dualListbox.html

@@ -34,10 +34,10 @@
                 </div>
                 <div class="slds-dueling-list__column">
                     <lightning-button-icon icon-name="utility:right" variant="container" onclick={handleRightButtonClick} disabled={moveButtonsDisabled}
-                        title={addButtonLabel} alternative-text={addButtonLabel}>
+                        title={addButtonLabel} alternative-text={addButtonLabel} tooltip={addButtonDescription}>
                     </lightning-button-icon>
                     <lightning-button-icon icon-name="utility:left" variant="container" onclick={handleLeftButtonClick} disabled={moveButtonsDisabled}
-                        title={removeButtonLabel} alternative-text={removeButtonLabel}>
+                        title={removeButtonLabel} alternative-text={removeButtonLabel} tooltip={removeButtonDescription}>
                     </lightning-button-icon>
                 </div>
                 <div class="slds-dueling-list__column slds-dueling-list__column_responsive">

package/src/lightning/dualListbox/dualListbox.js

@@ -13,9 +13,11 @@ import labelRequiredError from '@salesforce/label/LightningDualListbox.requiredE
 import labelRequiredOptionError from '@salesforce/label/LightningDualListbox.requiredOptionError';
 import labelUpButtonAssistiveText from '@salesforce/label/LightningDualListbox.upButtonAssistiveText';
 import labelMoveSelectionToAssistiveText from '@salesforce/label/LightningDualListbox.moveSelectionToAssistiveText';
+import labelMoveToAssistiveText from '@salesforce/label/LightningDualListbox.moveToAssistiveText';
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
+import labelVerticallyMovedOptionsText from '@salesforce/label/LightningDualListbox.verticallyMovedOptions';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
@@ -50,10 +52,12 @@ const i18n = {
     requiredOptionError: labelRequiredOptionError,
     upButtonAssistiveText: labelUpButtonAssistiveText,
     moveSelectionToAssistiveText: labelMoveSelectionToAssistiveText,
+    moveToAssistiveText: labelMoveToAssistiveText,
     loadingText: labelLoadingText,
     movedOptionsSingular: labelMovedOptionsSingular,
     movedOptionsPlural: labelMovedOptionsPlural,
     helpTextAlternativeText: labelHelpTextAlternativeText,
+    verticallyMovedOptionsText: labelVerticallyMovedOptionsText,
 };
 
 /**
@@ -584,12 +588,25 @@ export default class LightningDualListbox extends LightningElement {
      * @type {string}
      * @default Move selection to {selectedLabel}
      */
+    get addButtonDescription() {
+        return this.getRightButtonAssistiveText();
+    }
+
+    getRightButtonAssistiveLabel() {
+        return formatLabel(i18n.moveToAssistiveText, this.selectedLabel);
+    }
+
+    /**
+     * Label for add button.
+     * @type {string}
+     * @default Move to {selectedLabel}
+     */
     @api
     get addButtonLabel() {
         if (this._addButtonLabel) {
             return this._addButtonLabel;
         }
-        return this.getRightButtonAssistiveText();
+        return this.getRightButtonAssistiveLabel();
     }
 
     set addButtonLabel(value) {
@@ -600,6 +617,19 @@ export default class LightningDualListbox extends LightningElement {
         return formatLabel(i18n.moveSelectionToAssistiveText, this.sourceLabel);
     }
 
+    /**
+     * Label for remove button.
+     * @type {string}
+     * @default "Move Selection to {sourceLabel}"
+     */
+    get removeButtonDescription() {
+        return this.getLeftButtonAssistiveText();
+    }
+
+    getLeftButtonAssistiveLabel() {
+        return formatLabel(i18n.moveToAssistiveText, this.sourceLabel);
+    }
+
     /**
      * Label for remove button.
      * @type {string}
@@ -610,7 +640,7 @@ export default class LightningDualListbox extends LightningElement {
         if (this._removeButtonLabel) {
             return this._removeButtonLabel;
         }
-        return this.getLeftButtonAssistiveText();
+        return this.getLeftButtonAssistiveLabel();
     }
 
     set removeButtonLabel(value) {
@@ -817,6 +847,7 @@ export default class LightningDualListbox extends LightningElement {
         this.updateFocusableOption(this.selectedList, toMove[0]);
         this.optionToFocus = null;
         this.dispatchChangeEvent(values);
+        this.selectedUpDownMovedOptions();
     }
 
     selectAllFromLastSelectedToOption(option, all) {
@@ -1098,4 +1129,27 @@ export default class LightningDualListbox extends LightningElement {
     get helptextAlternativeText() {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }
+
+    selectedUpDownMovedOptions() {
+        let strMessage = [];
+        for (let i = 0; i < this.computedSelectedList.length; i++) {
+            const highlightedOption = this.highlightedOptions.indexOf(
+                this.computedSelectedList[i].value
+            );
+            if (highlightedOption !== -1) {
+                strMessage.push(
+                    formatLabel(
+                        i18n.verticallyMovedOptionsText,
+                        this.computedSelectedList[i].label,
+                        i + 1
+                    )
+                );
+            }
+        }
+        if (strMessage.length === 0) {
+            this._messageToDisplay = '';
+        } else {
+            this._messageToDisplay = strMessage.join(', ');
+        }
+    }
 }

package/src/lightning/menuDivider/menuDivider.js

@@ -10,6 +10,7 @@ export default class LightningMenuDivider extends LightningElement {
 
     connectedCallback() {
         this.setAttribute('role', 'separator');
+        this.setAttribute('aria-hidden', 'true');
     }
 
     /**

package/src/lightning/pill/__docs__/pill.md

@@ -80,7 +80,9 @@ Clicking the remove button on the pill fires the `remove` event and then the `cl
 
 When an `href` value is present, clicking the text label navigates to a link, but clicking the icon or avatar doesn’t. To prevent your browser from navigating to a link when you click a pill's label, call `event.preventDefault()` in the `onclick` handler.
 
-To disable a pill's link, set `variant="plain"`, which removes the anchor element.
+When an `href` value is present, the default variant is `link`. If no `href` is present, the default variant is `plain`.
+
+To disable a pill's link, set `variant="plain"`, which removes the anchor element. The `plain` variant renders the pill without a link and ignores the `href` attribute.
 
 This example hides a pill when the remove button is clicked.
 
@@ -192,7 +194,9 @@ When using `lightning-avatar`, use the `alternative-text` attribute to describe
 
 When using `lightning-icon`, use the `alternative-text` attribute to describe the icon. For example, specify "Account" instead of "Pill icon". This description is used as assistive text on the pill.
 
-Press the Tab key to focus on a pill. To remove a pill, press the Delete or Backspace key on the pill when it receives focus. Alternatively, press the Enter key when you tab to the remove button. You can define your own behavior to remove the pill from view, such as using the `onremove` handler shown in **Interacting with Pills**. Press the Enter key to navigate to a link on a pill.
+Press the Tab key to move focus to a pill with a link, and tab again to move focus to the remove button. To remove a pill, press the Enter key or space bar when the focus is on the remove button. You can define your own behavior to remove the pill from view, such as using the `onremove` handler shown in **Interacting with Pills**. To navigate to the target of a link on a pill, press the Enter key when the focus is on the pill.
+
+If a pill doesn't have a link, the only focusable item is the remove button.
 
 #### Custom Events