lightning-base-components 1.13.6-alpha → 1.14.1-alpha

package/src/lightning/datatable/__docs__/datatable.md

@@ -200,9 +200,10 @@ aspects of your columns.
 | fieldName          | string  | Required. The name that binds the columns attributes to the associated data. Each columns attribute must correspond to an item in the data array.                                                                                                                                     |
 | fixedWidth         | integer | Specifies the width of a column in pixels and makes the column non-resizable.If both `fixedWidth` and `initialWidth` values are provided, `initialWidth` is ignored.                                                                                                                  |
 | hideDefaultActions | boolean | Specifies whether to hide the default header actions on a column. The default is false. For more information, see **Creating Header Actions**.                                                                                                                                        |
-| iconName           | string  | The Lightning Design System name of the icon. Names are written in the format standard:opportunity. The icon is appended to the left of the header label.                                                                                                                             |
+| hideLabel          | boolean | Specifies whether to hide the label on a column. The default is false. For more information, see **Displaying an Icon Instead of a Column Label**.                                                                                                                                    |
+| iconName           | string  | The Lightning Design System name of the icon. Names are written in the format standard:opportunity. The icon is appended to the left of the header label. If `hideLabel` is provided, only the icon displays in the column header.                                                    |
 | initialWidth       | integer | The width of the column when it's initialized, which must be within the `min-column-width` and` max-column-width` values, or within 50px and 1000px if they are not provided.                                                                                                         |
-| label              | string  | Required. The text label displayed in the column header.                                                                                                                                                                                                                              |
+| label              | string  | Required. The text label displayed in the column header. If `hideLabel` and `iconName` are set, the label is used as hover text for the icon and as the value of `aria-label`.                                                                                                        |
 | sortable           | boolean | Specifies whether the column can be sorted. The default is false.                                                                                                                                                                                                                     |
 | type               | string  | Required. The data type to be used for data formatting. For more information, see **Formatting with Data Types**.                                                                                                                                                                     |
 | typeAttributes     | object  | Provides custom formatting with component attributes for the data type. For example, currency-code for the currency type. For more information, see **Formatting with Data Types**.                                                                                                   |
@@ -410,6 +411,26 @@ The `action` type aligns to the center and cannot be overridden by the `alignmen
 
 To override the alignment of the `action` type, consider using custom types and provide your own markup. See [Create a Custom Data Type](docs/component-library/documentation/lwc/lwc.data_table_custom_types).
 
+#### Displaying an Icon Instead of a Column Label
+
+To display an icon instead of a label in the column header, specify the properties `iconName` and `hideLabel` in the column definition. Specify `iconName` as a [utility icon](https://www.lightningdesignsystem.com/icons/#utility).
+
+```javascript
+const columns = [
+    {
+        label: 'Ordering',
+        fieldName: 'id',
+        type: 'orderingButtons',
+        fixedWidth: 90,
+        iconName: 'utility:trending',
+        hideLabel: true,
+    },
+    // other column data
+];
+```
+
+To support assistive technologies, set the `label` property for the column even though the label is hidden. Use standard header text that you'd use without an icon. The label text is used to set values for the icon's `title` and `alternativeText` attributes. The text is displayed as hover text. If the column has header controls the label text is used in `aria-label` for the header.
+
 #### Appending an Icon to Column Data
 
 To append an icon to your data output, use `cellAttributes` and pass in these
@@ -480,10 +501,13 @@ when users scroll to the end of the table. To enable infinite scrolling, specify
 `enable-infinite-loading` and provide an event handler using
 `onloadmore`. By default, data loading is triggered when you scroll down to
 20px from the bottom of the table, but the offset can be changed using the
-`load-more-offset` attribute.
+`load-more-offset` attribute. Place the table in a container with a defined height
+to establish the bottom of the table. This limit enables the datatable to calculate
+when to load more and prevents infinite looping.
 
-This example loads 50 more rows from the database when you reach the end of
-the table until there are no more data to load.
+This example places the datatable in a container with a height of 500px. The table
+loads 50 more rows from the database when you reach the end of the table until
+there are no more data to load.
 
 ```html
 <template>
@@ -844,9 +868,9 @@ Resizing a column fires the `resize` event. For more information, See the **Cust
 ```html
 <lightning-datatable
     key-field="id"
-    data={data}
-    columns={columns}
-    onresize={handleResize}
+    data="{data}"
+    columns="{columns}"
+    onresize="{handleResize}"
 >
 </lightning-datatable>
 ```
@@ -1106,8 +1130,8 @@ This example displays three lines of text and hides the rest; the text on line 3
 
 ```html
 <lightning-datatable
-    data={data}
-    columns={columns}
+    data="{data}"
+    columns="{columns}"
     key-field="id"
     wrap-text-max-lines="3"
 >
@@ -1149,11 +1173,14 @@ Set the attribute in `lightning-datatable` in your template.
 Change the ARIA label dynamically using the `ariaLabel` property.
 
 ```javascript
-const myLightningDataTableElement = this.template.querySelector('lightning-datatable');
-myLightningDataTableElement.ariaLabel = 'Account Details by Revenue for EMEA Region';
+const myLightningDataTableElement = this.template.querySelector(
+    'lightning-datatable'
+);
+myLightningDataTableElement.ariaLabel =
+    'Account Details by Revenue for EMEA Region';
 ```
 
-The `aria-label` attribute doesn't support empty strings. If you set `aria-label=""` in the HTML or `.ariaLabel = ""` in JavaScript, the table's `aria-label` 
+The `aria-label` attribute doesn't support empty strings. If you set `aria-label=""` in the HTML or `.ariaLabel = ""` in JavaScript, the table's `aria-label`
 attribute is hidden, not rendered with an empty string. An empty label string can confuse screen readers.
 
 ##### Provide an Accessible Caption for the Table

package/src/lightning/datatable/columnWidthManager.js

@@ -13,7 +13,7 @@ import {
 import {
     getColumnWidthFromDef,
     getDomWidth,
-    getWidthStyle,
+    buildCSSWidthStyle,
 } from './widthManagerShared';
 import { isRTL } from 'lightning/utilsPrivate';
 
@@ -35,7 +35,7 @@ export function computeColumnWidths(adjustedWidths, columnDefs, widthsData) {
         const newWidth = columnWidths[index];
         widthsData.columnWidths[index] = newWidth;
         columnDef.columnWidth = newWidth;
-        columnDef.style = getWidthStyle(newWidth);
+        columnDef.style = buildCSSWidthStyle(newWidth);
 
         // In RTL, we need to explicitly position the column headers.
         // We do this by providing the offset (in pixels) from the start of the table.
@@ -272,7 +272,7 @@ export class ColumnWidthManager {
             // can resize from dom when table is visible
             // otherwise only when ResizeObserver is available in browser
             return (
-                isTableRenderedVisible(root) || this._resizeObserverAvailable
+                this._resizeObserverAvailable || isTableRenderedVisible(root)
             );
         }
         return true;
@@ -312,7 +312,11 @@ export class ColumnWidthManager {
                 return [];
             },
             getTableElementWidth() {
-                const tableElement = root.querySelector(TABLE_SEL);
+                // TODO: Figure out a clean way to retrieve and use the correct selectors
+                // Currently outside scope of this work. Should be addressed in W-8540110
+                const tableElement =
+                    root.querySelector(TABLE_SEL) ||
+                    root.querySelector('[role="grid"]');
                 return getDomWidth(tableElement);
             },
         };

package/src/lightning/datatable/columns-shared.js

@@ -1,10 +1,11 @@
-export function isCustomerColumn(column) {
-    return column.internal !== true;
-}
-
-export function getColumns(state) {
-    return state.columns;
-}
+/**
+ * This file exists in order to get around circular dependencies.
+ * For ex. the `columns.js` file has a dependency on `sort.js`,
+ * which also has a dependency on `columns.js` for `getColumnName()`.
+ *
+ * We split out some of the functions that could cause circular dependencies with
+ * `column.js` into the `*-shared.js` files. `inlineEdit-shared.js` is another.
+ */
 
 export function getColumnName(column) {
     return column.columnKey || column.fieldName;

package/src/lightning/datatable/columns.js

@@ -7,11 +7,7 @@ import {
 } from './rowNumber';
 import { isTreeType, isValidTypeForTree } from './types';
 import { updateColumnSortingState } from './sort';
-import { generateColKeyValue } from './keys';
 import rowActionsDefaultAriaLabel from '@salesforce/label/LightningDatatable.rowActionsDefaultAriaLabel';
-import { getColumns, isCustomerColumn } from './columns-shared';
-
-export { getColumns, isCustomerColumn } from './columns-shared';
 
 const i18n = {
     rowActionsDefaultAriaLabel,
@@ -27,6 +23,14 @@ export function hasColumns(state) {
     return getColumns(state).length > 0;
 }
 
+export function isCustomerColumn(column) {
+    return column.internal !== true;
+}
+
+export function getColumns(state) {
+    return state.columns;
+}
+
 export const SELECTABLE_ROW_CHECKBOX = 'SELECTABLE_CHECKBOX';
 
 const SELECTABLE_COLUMN = {
@@ -219,6 +223,19 @@ export function getCellAttributesValues(column) {
     return {};
 }
 
+/**
+ * Generates a unique column key value.
+ *
+ * @param {object} columnMetadata - the object for an specific column metadata
+ * @param {int} index - optionally, the index of the column.
+ * @returns {string} It generate the column key value based on the column field name and type.
+ */
+export function generateColKeyValue(columnMetadata, index) {
+    const { columnKey, fieldName, type } = columnMetadata;
+    const prefix = columnKey || fieldName || index;
+    return `${prefix}-${type}-${index}`;
+}
+
 /**
  * Return the index in dt.columns (user definition) related to colKeyValue.
  *      -1 if no column with that key exist or if its internal.
@@ -243,6 +260,23 @@ export function getUserColumnIndex(state, colKeyValue) {
     return stateColumnIndex - internalColumns;
 }
 
+/**
+ * It generate headerIndexes based in the current metadata
+ * headerIndexes represent the position of the header(column)
+ * based on the unique colKeyValue
+ *
+ * These indexes are set in the state object - `state.headerIndexes`
+ *
+ * @param {object} columns - the current normalized column metadata
+ * @returns {object} headerIndexes e.g. { 'name-text': 0, 'amount-number': 1 }
+ */
+export const generateHeaderIndexes = function (columns) {
+    return columns.reduce((prev, col, index) => {
+        prev[generateColKeyValue(col, index)] = index;
+        return prev;
+    }, {});
+};
+
 /**
  * Return the index in state.columns (internal definition) related to colKeyValue.
  *