lightning-base-components 1.16.6-alpha → 1.16.8-alpha

package/src/lightning/carousel/carousel.css

@@ -1,6 +1,7 @@
 slot {
     /* W-6709264: Workaround for IE11/Edge to prevent slot items from stacking vertically. */
     display: flex;
+
     /* W-7665481: Workaround for above when space is limited in other browsers. */
     max-width: 100%;
 }

package/src/lightning/carousel/carousel.html

@@ -30,12 +30,13 @@
                     >
                         <a
                             id={paginationItem.id}
+                            href="#"
                             class={paginationItem.className}
-                            href="javascript:void(0);"
                             role="tab"
                             tabindex={paginationItem.tabIndex}
                             aria-selected={paginationItem.ariaSelected}
                             title={paginationItem.tabTitle}
+                            onclick={onItemLinkSelect}
                         >
                             <span class="slds-assistive-text">{paginationItem.tabTitle}</span>
                         </a>

package/src/lightning/carousel/carousel.js

@@ -322,6 +322,13 @@ export default class LightningCarousel extends LightningElement {
         }
     }
 
+    /**
+     * prevent browser default when clicking on anchor tag with href '#'
+     */
+    onItemLinkSelect(event) {
+        event.preventDefault();
+    }
+
     /**
      * Unselects the current active item on the carousel.
      */

package/src/lightning/combobox/combobox.css

@@ -7,9 +7,9 @@
      Should be removed once SLDS has added support for this (@W-9240038)
 */
 :host.slds-has-error {
-    --slds-c-input-color-border:#ea001e;
-    --slds-c-input-shadow:#ea001e 0 0 0 1px inset;
-    --slds-c-input-color-background:var(--slds-c-input-color-background, var(--sds-c-input-color-background, white));
-    --slds-c-input-text-color:var(--slds-c-input-text-color, var(--sds-c-input-text-color), #74747);
+    --slds-c-input-color-border: var(--slds-g-color-error-base-40, #ea001e);
+    --slds-c-input-shadow: var(--slds-g-color-error-base-40, #ea001e) 0 0 0 1px inset;
+    --slds-c-input-color-background: var(--slds-c-input-color-background, var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #fff)));
+    --slds-c-input-text-color: var(--slds-c-input-text-color, var(--sds-c-input-text-color, var(--slds-g-color-neutral-base-10, #747474)));
 }
 

package/src/lightning/confirm/__examples__disabled/basic/basic.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/datatable/datatable.js

@@ -148,6 +148,7 @@ import {
     resetTableHeight,
     findFirstVisibleIndex,
 } from './virtualization';
+import { EVENTS as FORMATTED_LOOKUP_EVENTS } from 'lightning/formattedLookup';
 
 import { hasTreeDataType } from './tree';
 import { setErrors, getTableError, getErrors } from './errors';
@@ -883,7 +884,7 @@ export default class LightningDatatable extends LightningElement {
     get computedCheckboxColumnHeaderId() {
         return this.checkboxColumnHeaderElement
             ? this.checkboxColumnHeaderElement.computedColumnHeaderId
-            : null;
+            : '';
     }
 
     get computedAriaLiveClassForNavMode() {
@@ -1540,6 +1541,49 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    /**
+     * @event LightningDatatable#onprivatelookupitempicked We need to augment the original event LightningFormattedLookup#onprivatelookupitempicked
+     * @type {object}
+     * @property {string} recordId
+     * @property {number} rowIndex
+     * @property {string} rowKeyValue
+     */
+
+    /**
+     * Handles the `privatelookupitempicked` event from the lightning-formatted-lookup or force-lookup
+     * `lightning-primitive-datatable-status-bar` and fires the augmented `privatelookupitempicked` custom event
+     *
+     * @param {CustomEvent} event - `privatelookupitempicked`
+     * @fires LightningDatatable#onprivatelookupitempicked
+     */
+    handlePrivateLookupItemPicked(event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        const { currentTarget } = event;
+        const { recordId } = event.detail;
+        const { rowIndex, rowKeyValue } =
+            this.computeRowLookupItemPickedInformation(currentTarget);
+
+        this.dispatchEvent(
+            // We will the below Eslint rule as we use a constant to apply the name of the event
+            // eslint-disable-next-line lightning-global/no-custom-event-identifier-arguments
+            new CustomEvent(
+                FORMATTED_LOOKUP_EVENTS.PrivateLookupItemPickedEvent.NAME, // Reuse the same event's name for homogenous usage
+                {
+                    composed: true,
+                    cancelable: true,
+                    bubbles: true,
+                    detail: {
+                        recordId,
+                        rowIndex,
+                        rowKeyValue,
+                    },
+                }
+            )
+        );
+    }
+
     /************************ EVENT DISPATCHERS **************************/
 
     fireSelectedRowsChange(selectedRows, config) {
@@ -1738,4 +1782,15 @@ export default class LightningDatatable extends LightningElement {
             }
         }
     }
+
+    /**
+     * @returns { rowIndex: number, rowKeyValue: string } Compute the information to use to generate the lookupItemPicked event based on the row where the event comes from
+     */
+    computeRowLookupItemPickedInformation(currentTarget) {
+        const rowIndex =
+            Number.parseInt(currentTarget.dataset.rowNumber, 10) - 1; // Row number always start to 1, so we convert it to be able to use it for an array
+        const rowKeyValue = currentTarget.dataset.rowKeyValue;
+
+        return { rowIndex, rowKeyValue };
+    }
 }

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

@@ -51,7 +51,7 @@
 
 [role="rowheader"].slds-has-focus,
 [role="rowheader"]:focus {
-    -webkit-box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
+    box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
     box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
     outline: 0;
 }

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

@@ -123,6 +123,7 @@
                                     role="row"
                                     key={row.key}
                                     onkeydown={handleKeydownOnDataRow}
+                                    onprivatelookupitempicked={handlePrivateLookupItemPicked}
                                     data-row-key-value={row.key}
                                     aria-selected={row.ariaSelected}
                                     aria-level={row.level}

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

@@ -106,6 +106,7 @@
                                 <!-- Data Rows -->
                                 <tr class={row.classnames}
                                     onkeydown={handleKeydownOnDataRow}
+                                    onprivatelookupitempicked={handlePrivateLookupItemPicked}
                                     key={row.key}
                                     data-row-key-value={row.key}
                                     aria-selected={row.ariaSelected}

package/src/lightning/dualListbox/dualListbox.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './listbox.slds.css';
+
 :host {
     display: block;
 }

package/src/lightning/dualListbox/dualListbox.html

@@ -15,7 +15,7 @@
                     <span class="slds-form-element__label" id="source-list-label">{sourceLabel}</span>
                     <div class={computedListboxContainerClass} style={computedColumnStyle}>
                         <ul data-source-list id="source-list" aria-describedby="keyboard-interacton" aria-labelledby="source-list-label" aria-multiselectable="true"
-                            class="slds-listbox slds-listbox_vertical" role="listbox" aria-disabled={ariaDisabled}>
+                            class="slds-listbox slds-listbox_vertical" role="listbox" part="listbox" aria-disabled={ariaDisabled}>
                             <template for:each={computedSourceList} for:item="option" for:index="index">
                                 <li key={option.value} role="presentation" class="slds-listbox__item">
                                     <div class={option.classList} aria-selected={option.selected} role="option" tabindex={option.tabIndex} data-index={index}
@@ -44,7 +44,7 @@
                     <span class="slds-form-element__label" id="selected-list-label">{selectedLabel}</span>
                     <div class={computedListboxContainerClass} style={computedColumnStyle}>
                         <ul data-selected-list id="selected-list" aria-describedby="keyboard-interacton" aria-labelledby="selected-list-label" aria-multiselectable="true"
-                            class="slds-listbox slds-listbox_vertical" role="listbox" aria-disabled={ariaDisabled}>
+                            class="slds-listbox slds-listbox_vertical" role="listbox" part="listbox" aria-disabled={ariaDisabled}>
                             <template for:each={computedSelectedList} for:item="option" for:index="index">
                                 <li key={option.value} role="presentation" class="slds-listbox__item">
                                     <div class={option.classList} aria-selected={option.selected} role="option" tabindex={option.tabIndex} data-index={index}

package/src/lightning/dualListbox/listbox.slds.css

@@ -0,0 +1,267 @@
+
+ @supports (--styling-hooks: '') {
+   :host([data-render-mode="shadow"]) [part~='listbox'] {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     --_listbox-spacing-xxx-small: 0.125rem;
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Horizontal listbox - used for pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
+     display: inline-flex;
+     flex-wrap: wrap;
+     align-items: center;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+     display: flex;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline-start: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Vertical listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+     background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+     text-decoration: none;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
+     background-color: transparent;
+     cursor: default;
+   }
+
+   /* Modifies the listbox option if it contains an entity object */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+     padding-block: var(--sds-g-spacing-1, 0.25rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Modifies the listbox option if it contains a plain object or string */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+     cursor: pointer;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+     outline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+     color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+   }
+
+   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+
+   /* the _vertical variations only apply to combobox's */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   /* If the listbox option has metadata or secondary information that sits below its primary text */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+     margin-block-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+     display: inline-block;
+     vertical-align: middle;
+   }
+
+   /* Header for choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
+     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+     font-weight: 700;
+   }
+
+   /* Container for listbox option icon */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+     width: var(--sds-g-sizing-7, 1.5rem);
+     display: inline-flex;
+     align-content: center;
+     align-items: center;
+     justify-content: center;
+     color: var(--sds-g-color-neutral-base-50, #747474);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
+     color: currentColor;
+   }
+
+   /* The icon within a plain listbox that indicates if an option has been selected or not. */
+   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+     opacity: 0;
+     fill: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* Modifier that makes selected icon visible */
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+     opacity: 1;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+     color: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* The main text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
+     max-width: 100%;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     display: block;
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     margin-block-end: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* The metadata or secondary text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+     display: block;
+     margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+     color: var(--sds-g-color-neutral-base-30, #444444);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
+     color: currentColor;
+   }
+  
+   /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
+
+   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+
+   /* The container of pill selections found inside of a combobox group */
+   
+   /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
+     position: relative;
+     padding: 0;
+     padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) + var(--sds-g-spacing-3, 0.75rem));
+     height: 1.875rem;
+     overflow: hidden;
+   }
+
+   /* Expanded state of a selection group */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+     height: auto;
+     padding: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
+     padding-block-start: 0;
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-end: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-start: var(--_listbox-spacing-xxx-small);
+     padding-block-end: 0;
+     padding-inline: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Toggle button to show all of the pill selections */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+     position: absolute;
+     top: 50%;
+     transform: translateY(-50%);
+     right: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+     line-height: 1;
+   }
+
+   /* Media Object classes need to be pulled out for reusability */
+   :host([data-render-mode="shadow"]) .slds-media {
+     display: flex;
+     align-items: flex-start;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure {
+     flex-shrink: 0;
+     margin-inline-end: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+     min-width: var(--sds-g-sizing-10, 3rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__body {
+     flex: 1;
+     min-width: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
+   .slds-media__body> :last-child {
+     margin-block-end: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media-body-iefix {
+     flex-shrink: 0;
+     flex-basis: auto;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+     flex: 0 1 auto;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_center {
+     align-items: center;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+     margin-block: 0;
+     margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+     margin-inline-end: 0;
+   }
+
+   @media (max-width: 48em) {
+
+     :host([data-render-mode="shadow"]) .slds-media_responsive {
+       display: block;
+     }
+
+     :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
+       margin-block: 0;
+       margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+       margin-inline-end: 0;
+     }
+   }
+ }
+ 

package/src/lightning/formattedLookup/formattedLookup.js

@@ -3,6 +3,10 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { getLinkInfo } from 'lightning/routingService';
 import { PrivateLookupItemPickedEvent } from './events';
 
+export const EVENTS = {
+    PrivateLookupItemPickedEvent,
+};
+
 export default class LightningFormattedLookup extends LightningElement {
     /**
      * {string} The related name/record name to display

package/src/lightning/groupedCombobox/groupedCombobox.html

@@ -10,10 +10,10 @@
     <div class="slds-form-element__control">
         <div class={computedComboboxGroupClass}>
             <template if:true={computedHasFilter}>
-                <label data-filter-label class="slds-form-element__label slds-assistive-text">{filterLabel}</label>
-                <div class="slds-form-element">
-                    <div class="slds-form-element__control">
-                        <div class="slds-combobox_object-switcher slds-combobox-addon_start">
+                <div class="slds-combobox_object-switcher slds-combobox-addon_start">
+                    <div class="slds-form-element">
+                        <label data-filter-label class="slds-form-element__label slds-assistive-text">{filterLabel}</label>
+                        <div class="slds-form-element__control">
                             <lightning-base-combobox
                                 data-filter
                                 onready={handleFilterReady}

package/src/lightning/groupedCombobox/groupedCombobox.js

@@ -254,8 +254,6 @@ export default class LightningGroupedCombobox extends LightningElement {
 
     get computedComboboxGroupClass() {
         return classSet().add({
-            'slds-has-selection':
-                Array.isArray(this._pills) && this._pills.length > 0,
             'slds-combobox-group': this.computedHasFilter,
         });
     }
@@ -265,7 +263,11 @@ export default class LightningGroupedCombobox extends LightningElement {
     }
 
     get computedLookupComboboxClass() {
-        return this.computedHasFilter ? 'slds-combobox-addon_end' : '';
+        return classSet().add({
+            'slds-has-selection':
+                Array.isArray(this._pills) && this._pills.length > 0,
+            'slds-combobox-addon_end': this.computedHasFilter,
+        });
     }
 
     get _hasPills() {

package/src/lightning/helptext/__examples__/basic/basic.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/helptext/helptext.html

@@ -1,16 +1,12 @@
 <template>
-    <div class="slds-form-element__icon">
-        <button
-            type="button"
-            class={computedButtonClass}
-            part="button button-icon">
-            <lightning-primitive-icon
-                svg-class="slds-button__icon"
-                icon-name={iconName}
-                variant="bare">
-            </lightning-primitive-icon>
-            <span class="slds-assistive-text">{alternativeText}</span>
-            <span class="slds-assistive-text desc" id={describedByID} aria-hidden="true">{content}</span>
-        </button>
+    <div class="slds-form-element__icon" part="help-text">
+        <lightning-button-icon
+            icon-name={iconName}
+            icon-class={computedIconClass}
+            variant={computedButtonVariant}
+            alternative-text={alternativeText}
+            tooltip={content}
+            onprivatebuttoniconregister={handleButtonIconRegister}
+        ></lightning-button-icon>
     </div>
 </template>