lightning-base-components 1.21.8-alpha → 1.22.1-alpha

package/src/lightning/buttonMenu/button.slds.css

@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -315,36 +315,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -396,7 +396,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/buttonMenu/buttonMenu.js

@@ -571,13 +571,15 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
             this.toggleMenuVisibility();
             this.focusOnButton();
         }
-
         event.stopPropagation();
-        this.dispatchSelect(event);
+        const cancelled = !this.dispatchSelect(event);
+        if (cancelled) {
+            event.preventDefault();
+        }
     }
 
     dispatchSelect(event) {
-        this.dispatchEvent(
+        return this.dispatchEvent(
             new CustomEvent('select', {
                 cancelable: true,
                 detail: {

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -32,6 +32,29 @@
       --slds-c-buttonstateful-shadow-focus,
       var(--slds-g-color-accent-2) 0 0 3px
     );
+
+    /* Pressed/Selected State */
+    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
+    --sds-c-button-color-background-pressed: transparent;
+  }
+
+  /* Hover state when button is pressed/selected */
+
+  :host([data-render-mode="shadow"]) .slds-button_stateful:hover {
+    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
+    --sds-c-button-text-color-pressed: var(--slds-s-button-color-hover);
+    --sds-c-button-color-border-pressed: var(--slds-g-color-border-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-is-selected-clicked {
+    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-1);
+    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-is-selected-clicked:focus {
+    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
+    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-3);
+    --sds-c-button-shadow-pressed: var(--slds-s-button-shadow-focus);
   }
 
   /* vertical alignment for icon and text */

package/src/lightning/buttonStateful/button.slds.css

@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -315,36 +315,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -396,7 +396,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/buttonStateful/buttonStateful.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/calendar/keyboard.js

@@ -1,4 +1,4 @@
-import { normalizeKeyValue } from 'lightning/utilsPrivate';
+import { normalizeKeyValue, isRTL } from 'lightning/utilsPrivate';
 
 export function handleKeyDownOnCalendar(event, date, calendarInterface) {
     const tdElement = event.target;
@@ -16,12 +16,20 @@ export function handleKeyDownOnCalendar(event, date, calendarInterface) {
             break;
         case 'ArrowRight':
             preventDefaultAndStopPropagation(event);
-            date.setDate(date.getDate() + 1);
+            if (isRTL()) {
+                date.setDate(date.getDate() - 1);
+            } else {
+                date.setDate(date.getDate() + 1);
+            }
             calendarInterface.focusDate(date);
             break;
         case 'ArrowLeft':
             preventDefaultAndStopPropagation(event);
-            date.setDate(date.getDate() - 1);
+            if (isRTL()) {
+                date.setDate(date.getDate() + 1);
+            } else {
+                date.setDate(date.getDate() - 1);
+            }
             calendarInterface.focusDate(date);
             break;
         case 'Enter':

package/src/lightning/combobox/combobox.js

@@ -388,7 +388,8 @@ export default class LightningCombobox extends LightningShadowBaseClass {
             'lightning-base-combobox'
         );
         baseCombobox.inputLabelledByElement = this.ariaLabelledBy;
-        baseCombobox.inputDescribedByElements = this.computedAriaDescribedBy;
+        baseCombobox.inputDescribedByElements = this.ariaDescribedBy;
+        baseCombobox.ariaErrorMessageElements = this.ariaErrorMessageElements;
     }
 
     get templateRootNode() {
@@ -409,19 +410,10 @@ export default class LightningCombobox extends LightningShadowBaseClass {
             .toString();
     }
 
-    get computedAriaDescribedBy() {
-        const describedByElements = [];
+    get ariaErrorMessageElements() {
+        if (!this._helpMessage) return null;
 
-        if (this._helpMessage) {
-            const helpText = this.template.querySelector('[data-help-text]');
-            describedByElements.push(helpText);
-        }
-
-        if (typeof this.ariaDescribedBy === 'string') {
-            describedByElements.push(this.ariaDescribedBy);
-        }
-
-        return describedByElements;
+        return this.template.querySelector('[data-help-text]');
     }
 
     handleSelect(event) {

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

@@ -17,7 +17,6 @@ export default class DatatableWithVirtualization extends LightningElement {
     renderConfig = {
         virtualize: 'vertical',
         bufferSize: 10,
-        fixedHeight: true,
     };
 
     connectedCallback() {

package/src/lightning/datatable/datatable.js

@@ -131,7 +131,6 @@ import {
 } from './sort';
 import {
     getGridContainerFromScrollerY,
-    getRowDataSelector,
     getScrollerX,
     getScrollerY,
     isLoadMore,
@@ -297,20 +296,18 @@ export default class LightningDatatable extends LightningElement {
         }
 
         // do necessary updates since rows have changed
-        if (this.hasValidKeyField) {
-            if (this.isConnected) {
-                this.updateRows();
-            }
-            if (isInfiniteLoading) {
-                addTableHeight(state, previousData, data);
-            } else {
-                // if data is new, reset all virtualization data
-                state.heightCache = {};
-                state.offsets = [0];
-                state.offsetRanges = [{ start: 0, end: 0 }];
-                state.firstVisibleIndex = 0;
-                state.tableHeight = state.rowHeight * state.rows.length;
-            }
+        if (this.hasValidKeyField && this.isConnected) {
+            this.updateRows();
+        }
+        if (isInfiniteLoading) {
+            addTableHeight(state, previousData, data);
+        } else {
+            // if data is new, reset all virtualization data
+            state.heightCache = {};
+            state.offsets = [0];
+            state.offsetRanges = [{ start: 0, end: 0 }];
+            state.firstVisibleIndex = 0;
+            state.tableHeight = state.rowHeight * state.rows.length;
         }
         if (_customerSelectedRows) {
             this.setSelectedRows(_customerSelectedRows);
@@ -609,7 +606,7 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * Enables and configures advanced rendering modes.
-     * It supports properties 'bufferSize', 'fixedHeight', and 'rowHeight'.
+     * It supports properties 'bufferSize' and 'rowHeight'.
      *
      * @type {RenderManagerConfig} value - config object for datatable rendering
      */
@@ -1216,6 +1213,10 @@ export default class LightningDatatable extends LightningElement {
                 ? divTemplate
                 : tableTemplate;
         if (templateToRender !== this._renderedTemplate) {
+            // if private types present, don't reset custom types since template
+            // change will trigger slotchange event without types actually changing
+            this._shouldResetCustomTypes =
+                !this._privateTypes.privateCustomTypes.size;
             const { _widthObserver } = this;
             if (_widthObserver) {
                 _widthObserver.disconnect();
@@ -1240,6 +1241,14 @@ export default class LightningDatatable extends LightningElement {
         if (!this._hasSetInitialCustomTypes) {
             this.setCustomTypes();
             this._hasSetInitialCustomTypes = true;
+            // Return here since a re-render will occur on auto width
+            // tables for column updates if custom types added
+            if (
+                this._privateTypes.privateCustomTypes.size &&
+                widthsData.columnWidthsMode === 'auto'
+            ) {
+                return;
+            }
         }
 
         // This keeps underlying table element up to date if the aria-* properties on this element is dynamically changed.
@@ -1425,8 +1434,8 @@ export default class LightningDatatable extends LightningElement {
         if (this._shouldResetCustomTypes) {
             this.setCustomTypes();
         } else {
-            // On first call, custom types have already been set
-            // in renderedCallback. Subsequent calls
+            // Event was triggered by the initial render or template change
+            // after already setting custom types, so we ignore this call
             this._shouldResetCustomTypes = true;
         }
     }
@@ -2064,28 +2073,8 @@ export default class LightningDatatable extends LightningElement {
         if (this.state.shouldResetHeights) {
             resetRowHeights(state);
             this.state.shouldResetHeights = false;
-        } else if (virtualizedRows && !state.fixedHeight) {
-            // if row heights aren't fixed, we need to update items
-            // in state to know where rows should be positioned
+        } else if (virtualizedRows) {
             handleVariableRowHeights(this.template, state, this.renderedRows);
-        } else if (virtualizedRows && state.fixedHeight) {
-            // if heights are fixed, we only need to check height of first row
-            const rowElement = this.template.querySelector(
-                getRowDataSelector(this.renderedRows[0].key)
-            );
-            // increase height by 1 since first rendered row is missing an extra 1px border
-            if (rowElement) {
-                const height = rowElement.getBoundingClientRect().height + 1;
-                if (state.rowHeight !== height) {
-                    state.rowHeight = height;
-                    state.tableHeight = state.rowHeight * state.rows.length;
-                    state.rows.forEach((row) => {
-                        row.style = `position:absolute;top:${
-                            row.rowIndex * height
-                        }px;`;
-                    });
-                }
-            }
         }
     }
 
@@ -2125,7 +2114,14 @@ export default class LightningDatatable extends LightningElement {
                         provider.getDataTypes()
                     );
                     this.updateColumns(this._rawColumns);
+                    this._columnWidthManager.handleColumnsChange(
+                        this.state.columns
+                    );
                 }
+            } else {
+                // If no assigned nodes, there will be no extra slotchange event
+                // We need to set this var so we don't ignore the call
+                this._shouldResetCustomTypes = true;
             }
         }
     }

package/src/lightning/datatable/keyboard.js

@@ -920,7 +920,7 @@ export function handlePrimitiveDatatableCellFocus(event) {
             cellElement.parentElement.dataset.rowKeyValue,
             cellElement.dataset.colKeyValue
         );
-        if (cell.mode === KEYBOARD_ACTION_MODE) {
+        if (cell.keyboardMode === KEYBOARD_ACTION_MODE) {
             // Tracked state change.
             setFocusToActionableElement(
                 cell,
@@ -933,12 +933,13 @@ export function handlePrimitiveDatatableCellFocus(event) {
 
 export function handlePrimitiveDatatableCellKeydown(event) {
     const { state } = this;
-    // Don't continue if clicking on a "lightning" element
+    const { target } = event;
+    // Don't continue if clicking on a cell factory
     // Or the outer td/th element and div equivalent
     const cellElement =
         state.renderModeInline &&
-        !event.target.shadowRoot &&
-        !event.target.getAttribute('role')
+        target.tagName !== 'LIGHTNING-PRIMITIVE-CELL-FACTORY' &&
+        !target.getAttribute('role')
             ? getCellElementFromEventTarget(event.target)
             : undefined;
 
@@ -948,18 +949,18 @@ export function handlePrimitiveDatatableCellKeydown(event) {
 
     const cellElementChild = getCellElementChild(cellElement);
     const cell = getCellByKeys(
-        this.state,
+        state,
         cellElement.parentElement.dataset.rowKeyValue,
         cellElement.dataset.colKeyValue
     );
-    const { mode } = cell;
+    const { keyboardMode } = cell;
     const { keyCode, shiftKey } = event;
 
     // if it is in Action mode, then traverse to the next or previous
     // focusable element.
     // if there is no focusable element, or reach outside of the range, then move to
     // previous or next cell.
-    if (mode === KEYBOARD_ACTION_MODE) {
+    if (keyboardMode === KEYBOARD_ACTION_MODE) {
         let passThroughEvent = keyCode !== keyCodes.shift;
         if (keyCode === keyCodes.left) {
             if (canMoveLeft(cell)) {
@@ -1013,7 +1014,7 @@ export function handlePrimitiveDatatableCellKeydown(event) {
         if (passThroughEvent) {
             fireCellKeydown(cell, cellElementChild, event);
         }
-    } else if (mode === KEYBOARD_NAVIGATION_MODE) {
+    } else if (keyboardMode === KEYBOARD_NAVIGATION_MODE) {
         // click the header, press enter, it does not go to action mode without this code.
         if (
             keyCode === keyCodes.left ||
@@ -1090,7 +1091,7 @@ function resetCurrentInputIndex(
     // it moves focus out of table
     if (
         incomingMode === KEYBOARD_ACTION_MODE &&
-        cell.mode === KEYBOARD_ACTION_MODE
+        cell.keyboardMode === KEYBOARD_ACTION_MODE
     ) {
         // Tracked state change.
         setFocusToActionableElement(
@@ -1127,7 +1128,7 @@ function setFocusToActionableElement(cell, cellElementChild, activeInputIndex) {
 function setMode(cell, cellElementChild, keyboardMode, info) {
     const normalizedInfo = info || { action: 'none' };
     // Tracked state changes.
-    cell.mode = keyboardMode;
+    cell.keyboardMode = keyboardMode;
     if (keyboardMode === KEYBOARD_ACTION_MODE) {
         cell.internalTabIndex = 0;
         // focus without changing tabIndex doesn't work W-6185168

package/src/lightning/datatable/renderManager.js

@@ -79,7 +79,6 @@ export class RenderManager {
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
-        state.fixedHeight = normalizeBoolean(config.fixedHeight);
         if (typeof rowHeight === 'number') {
             state.rowHeight = rowHeight;
             this.threshold = ROW_THRESHOLD * rowHeight;
@@ -149,7 +148,6 @@ export class RenderManager {
             bufferSize,
             renderedRowCount,
             rows,
-            fixedHeight,
             rowHeight,
             heightCache,
         } = state;
@@ -161,7 +159,7 @@ export class RenderManager {
 
         // if using variable heights, see if we can get more
         // accurate estimate based on known row heights
-        if (!fixedHeight && heightCache[firstVisibleKey]) {
+        if (heightCache[firstVisibleKey]) {
             let i = firstVisibleIndex;
             let currentHeight = 0;
             let knownRowHeight = rows[i] && heightCache[rows[i].key];

package/src/lightning/datatable/rows.js

@@ -404,13 +404,13 @@ export function updateCell(state, rowIndex, colIndex) {
         cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
     }
 
-    let cellClass = cell.class;
+    let cellClass = cell.class || '';
+    if (cell.hasTreeData && !cellClass) {
+        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
+    }
     if (cell.displayReadOnlyIcon || cell.editable) {
         cellClass += (cellClass.length ? ' ' : '') + CELL_EDIT_CLASS;
     }
-    if (cell.hasTreeData) {
-        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
-    }
     if (hasError) {
         cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
     }
@@ -423,7 +423,7 @@ export function updateCell(state, rowIndex, colIndex) {
     }
 
     cell.class = cellClass;
-    cell.style = computeCellStyles(cell, col, renderModeRoleBased);
+    cell.style = computeCellStyles(cell, col, renderModeRoleBased, cell.style);
 
     if (cell.isInlined) {
         updateInlineCell(cell);
@@ -442,14 +442,19 @@ export function updateCell(state, rowIndex, colIndex) {
  * @param {Object} types - instance of DatatableTypes from `./types.js`
  * @param {Object} col - column definition
  * @param {Boolean} renderModeRoleBased - render mode of datatable (div || table)
+ * @param {String} initValue - default value for cell styles
  * @returns {String} - styles to be set on the cell
  */
-function computeCellStyles(cell, col, renderModeRoleBased) {
-    let cellStyle = '';
+function computeCellStyles(cell, col, renderModeRoleBased, initValue = '') {
+    let cellStyle = initValue;
+    if (cellStyle && !cellStyle.endsWith(';')) {
+        cellStyle += ';';
+    }
+
     if (cell.isCustomBareLayout) {
         // When a custom type is not using the standard layout,
         // remove the padding that comes with the standard layout
-        cellStyle = 'padding: 0;';
+        cellStyle += 'padding: 0;';
     }
 
     // Width needs to be managed when rendering as divs
@@ -475,7 +480,9 @@ export function recomputeCellStyles(state) {
     state.rows.forEach((row) => {
         row.cells.forEach((cell, colIndex) => {
             const colData = columns[colIndex];
-            cell.style = computeCellStyles(cell, colData, true);
+            const cellAttrs = getCellAttributesValues(colData);
+            const style = resolveAttributeValue(cellAttrs.style, row) || '';
+            cell.style = computeCellStyles(cell, colData, true, style);
         });
     });
 }

package/src/lightning/datatable/state.js

@@ -74,7 +74,6 @@ export function getDefaultState() {
         rowHeight: 30.5,
         renderedRowCount: 0,
         firstVisibleIndex: 0, // first row that should be visible in viewport
-        fixedHeight: false, // by default, assume that not all rows are same height
         heightCache: {}, // cache of row heights
         offsets: [0],
         offsetRanges: [],

package/src/lightning/datatable/templates/div/div.html

@@ -996,14 +996,14 @@
                                     </template>
                                 </div>
                             </template>
-                            <!-- Loading Indicator -->
-                            <template if:true={isLoading}>
-                                <div>
-                                    <div colspan={state.columns.length} class="slds-is-relative">
-                                        <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
-                                    </div>
-                                </div>
-                            </template>
+                        </div>
+                    </template>
+                    <!-- Loading Indicator -->
+                    <template if:true={isLoading}>
+                        <div>
+                            <div colspan={state.columns.length} part="spinner" class="slds-is-relative">
+                                <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
+                            </div>
                         </div>
                     </template>
                 </div>

package/src/lightning/datatable/templates/div/div.lbc.synthetic.css

@@ -104,3 +104,10 @@ div[role='grid'][data-render-mode-inline='true']
     direction: ltr;
     unicode-bidi: embed;
 }
+
+/* Spinner */
+
+[part="spinner"] {
+    padding: var(--slds-g-sizing-2, 0.25rem) var(--slds-g-sizing-3, 0.5rem);
+    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1);
+}