lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/tabset/tabset.js

@@ -1,6 +1,13 @@
-import { LightningElement, api, track } from 'lwc';
-import { normalizeString, isHeadingLevelValid } from 'lightning/utilsPrivate';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import {
+    normalizeString,
+    isHeadingLevelValid,
+    normalizeBoolean,
+    isCSR,
+} from 'lightning/utilsPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
+import AriaObserver from 'lightning/ariaObserver';
 import { classSet } from 'lightning/utils';
 import labelTabs from '@salesforce/label/LightningTabs.defaultTabBarAriaLabel';
 
@@ -14,67 +21,79 @@ const tabClassPrefixByVariant = {
  * Represents a list of tabs.
  * @slot default Placeholder for lightning-tab.
  */
-export default class LightningTabset extends LightningElement {
+export default class LightningTabset extends LightningShadowBaseClass {
+    @track _tabHeaders = [];
+    _variant = 'standard';
+    // tabset heading private values
+    _headingLabel = null;
+    _headingVisible = false;
+    _headingLevel = 2;
+    // these headingLabel private variables are used to identify if this component
+    // requires a rerender based on a null headingLabel value change
+    _headingLabelRerender = false;
+    _headingLabelRemove = false;
+    _headingLabelAdd = false;
+    // additional private variables
+    _firstRender = true;
+    _rerender = false;
+    _tabBarElem = null;
+    defaultAriaLabel = labelTabs;
+
     /**
      * Displays tooltip text when the mouse moves over the tabset.
      * @type {string}
      */
     @api title;
 
-    @track _variant = 'standard';
-
-    @track _tabHeaders = [];
-
-    @api headingLabel;
-    @api headingVisible;
-
-    defaultAriaLabel = labelTabs;
-
-    _rerender = false;
-
-    connectedCallback() {
-        this._tabByValue = {};
-        this._connected = true;
-        this.addEventListener(
-            'privatetabregister',
-            this.handleTabRegister.bind(this)
-        );
-        this.addEventListener(
-            'privatetabdatachange',
-            this.handleTabDataChange.bind(this)
-        );
-    }
-
     /**
-     * in native shadow, must wait for this entire `tab-set` component to be rendered in order to
-     * successfully querySelect `tab-bar` from it, in methods such as _updateTabBarHeaders
-     * or _selectTab.
-     * using _rerender to trigger renderedCallback and execute these methods in here
-     * instead of the handleTabRegister method, where `tab-bar` is not querySelectable.
+     * Specifies text to use as custom assistive text for the tabset heading.
+     * The text is placed in a div element with role="heading" and aria-level="2".
+     * When heading-label isn't specified, the default assistive text is "Tabs" in
+     * a div element with aria-level="2".
+     * @type {string|null} - the value to set for the tabset heading
      */
-    renderedCallback() {
-        if (this._rerender && !this.template.synthetic) {
-            this._rerender = false;
-            this._updateTabBarHeaders(this._tabHeaders);
-            this._selectTab(this._activeTabValue);
+    @api
+    get headingLabel() {
+        return this._headingLabel ?? null;
+    }
+
+    set headingLabel(value) {
+        const labelIsPopulated = value && value.trim().length > 0;
+        const currentValue = this._headingLabel;
+        const nextValue = labelIsPopulated ? value : null;
+        this._headingLabel = nextValue;
+
+        // special case for when headingLabel is programatically set to null or a null
+        // headingLabel is set to a non-null value. See W-14708987 for more info.
+        if (!this._firstRender) {
+            this._headingLabelRemove = currentValue && nextValue === null; // label to null
+            this._headingLabelAdd = currentValue === null && nextValue; // null to label
+            this._headingLabelRerender =
+                this._headingLabelRemove || this._headingLabelAdd;
         }
     }
 
-    disconnectedCallback() {
-        this._connected = false;
+    /**
+     * Determines whether the text that’s passed with the heading-label attribute
+     * is visible above the tabset. This attribute isn't present by default so the
+     * assistive text is only read by screen readers.
+     * @type {boolean} - the boolean value to set for heading visibility
+     * @returns {boolean} - the boolean value set for heading visibility
+     */
+    @api
+    get headingVisible() {
+        return this._headingVisible ?? false;
     }
 
-    get computedHeadingClass() {
-        const classnames = classSet('slds-tabs_default__header');
-        return classnames
-            .add({ 'slds-assistive-text': !this.headingVisible })
-            .toString();
+    set headingVisible(value) {
+        this._headingVisible = normalizeBoolean(value);
     }
 
-    _headingLevel;
     /**
-     * Determines the value to pass to aria-level. Accepts values in range [1,6].
-     * @type {number}
+     * Specifies the value to pass through to aria-level when you specify heading-label.
+     * Accepts values from 1 to 6. The default value is 2.
+     * @type {number} - the value to set for the heading's aria-level
+     * @returns {number} - the value for setting the heading's aria-level
      */
     @api
     get headingLevel() {
@@ -129,6 +148,107 @@ export default class LightningTabset extends LightningElement {
         }
     }
 
+    /**
+     * Focus currently selected tab.
+     */
+    @api
+    focus() {
+        const tabBar = this.tabBarElem;
+        if (tabBar) {
+            tabBar.focus();
+        }
+    }
+
+    addTabRegisterEventListeners() {
+        if (isCSR) {
+            this.addEventListener(
+                'privatetabregister',
+                this.handleTabRegister.bind(this)
+            );
+            this.addEventListener(
+                'privatetabdatachange',
+                this.handleTabDataChange.bind(this)
+            );
+        }
+    }
+
+    removeTabRegisterEventListeners() {
+        if (isCSR) {
+            this.removeEventListener(
+                'privatetabregister',
+                this.handleTabRegister.bind(this)
+            );
+            this.removeEventListener(
+                'privatetabdatachange',
+                this.handleTabDataChange.bind(this)
+            );
+            this._tabBarElem = null;
+        }
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this._tabByValue = {};
+        this._connected = true;
+        this.addTabRegisterEventListeners();
+        if (isCSR) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
+
+    /**
+     * in native shadow, must wait for this entire `tab-set` component to be rendered in order to
+     * successfully querySelect `tab-bar` from it, in methods such as _updateTabBarHeaders
+     * or _selectTab.
+     * using _rerender to trigger renderedCallback and execute these methods in here
+     * instead of the handleTabRegister method, where `tab-bar` is not querySelectable.
+     */
+    renderedCallback() {
+        // always update the cached this._tabBarElem at the start of the render cycle
+        this._cacheTabBarElem();
+        if (this.nativeShadowAndRerender || this._headingLabelRerender) {
+            this._rerender = false;
+            this._headingLabelRerender = false;
+            this._updateTabBarHeaders(this._tabHeaders);
+            this._selectTab(this._activeTabValue);
+        }
+        this.ariaObserver.sync();
+        if (this._firstRender) {
+            this._firstRender = false;
+        }
+    }
+
+    disconnectedCallback() {
+        this._connected = false;
+        this.removeTabRegisterEventListeners();
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+
+    get computedHeadingClass() {
+        const classnames = classSet('slds-tabs_default__header');
+        return classnames
+            .add({ 'slds-assistive-text': !this._headingVisible })
+            .toString();
+    }
+
+    handleTabLinkRegister(event) {
+        const tabs = this.tabs;
+        event.detail.tabLinks.forEach((tabLink, index) => {
+            this.ariaObserver.connect({
+                attribute: 'aria-labelledby',
+                targetNode: tabs[index],
+                relatedNodes: tabLink,
+            });
+        });
+    }
+
+    get tabs() {
+        return this.querySelectorAll(`[role='tabpanel']`);
+    }
+
     handleTabRegister(event) {
         event.stopPropagation();
         // setting this to true, will trigger _updateTabBarHeaders and _selectTab in renderedCallback
@@ -148,14 +268,13 @@ export default class LightningTabset extends LightningElement {
         const tabValue = tab.value;
 
         tab.dataTabValue = tabValue;
-        tab.ariaLabelledBy = tabValue + '__item';
 
         tab.classList.add(`${tabClassPrefixByVariant[this.variant]}__content`);
 
         tab.classList.add('slds-hide');
         tab.classList.remove('slds-show');
 
-        const tabs = this.querySelectorAll(`[role='tabpanel']`);
+        const tabs = this.tabs;
         let tabIndex;
         for (tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
             if (tabs[tabIndex].dataTabValue === tabValue) {
@@ -285,6 +404,46 @@ export default class LightningTabset extends LightningElement {
         }
     }
 
+    get nativeShadowAndRerender() {
+        return this._rerender && !this.template.synthetic;
+    }
+
+    /* cache tabBar element when first accessed, or isCSR and not set */
+    get tabBarElem() {
+        if (isCSR) {
+            if (
+                this.nativeShadowAndRerender ||
+                this._headingLabelRerender ||
+                !this._tabBarElem
+            ) {
+                this._cacheTabBarElem();
+            }
+            return this._tabBarElem;
+        }
+        return null;
+    }
+
+    /* sets the private cached version of tabBar element
+       this handles the case where isCSR && this._tabBarElement (exists)
+       intentionally force an update to the element when a rerender occurs in native shadow
+       since we call get tabBarElem skipping checks for isCSR, and non-existing element
+    */
+    _cacheTabBarElem() {
+        if (isCSR) {
+            // udpdate tabBar element, force to update elem if NS && Rerender
+            // or always if it doesn't exist
+            // order of IF checking is important
+            if (
+                this.nativeShadowAndRerender ||
+                this._headingLabelRerender ||
+                !this._tabBarElem
+            ) {
+                this._tabBarElem =
+                    this.template.querySelector('lightning-tab-bar');
+            }
+        }
+    }
+
     /**
      * Need to set tabHeaders programmatically this way. If done declaratively, LWC appears to batch
      * the request to re-render the tab-bar until after all the tabs have been registered. If all tabs
@@ -295,14 +454,14 @@ export default class LightningTabset extends LightningElement {
      * @param {Array} headers
      */
     _updateTabBarHeaders(headers) {
-        if (this.template.querySelector('lightning-tab-bar')) {
-            this.template.querySelector('lightning-tab-bar').tabHeaders =
-                headers.slice();
+        const tabBar = this.tabBarElem;
+        if (tabBar) {
+            tabBar.tabHeaders = headers.slice();
         }
     }
 
     _selectTabHeaderByTabValue(value) {
-        const tabBar = this.template.querySelector('lightning-tab-bar');
+        const tabBar = this.tabBarElem;
         if (!this._connected || !tabBar) {
             return;
         }
@@ -312,12 +471,4 @@ export default class LightningTabset extends LightningElement {
     get computedClass() {
         return tabClassPrefixByVariant[this.variant];
     }
-
-    /**
-     * Focus currently selected tab.
-     */
-    @api
-    focus() {
-        this.template.querySelector('lightning-tab-bar').focus();
-    }
 }

package/src/lightning/tabset/tabset.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsVisibility';
+@import './tabset.slds.css';

package/src/lightning/tabset/tabset.slds.css

@@ -0,0 +1,13 @@
+
+  :host([data-render-mode="shadow"]) .slds-vertical-tabs {
+      display: flex;
+      overflow: hidden;
+      border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1, --slds-g-color-border-1);
+      border-radius: var(--slds-g-spacing-1);
+  }
+  :host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header {
+    font-weight: var(--sds-g-font-weight-bold, bold);
+  }
+  :host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header:not(.slds-assistive-text) {
+    font-size: var(--sds-g-font-scale-neg-2, calc(var(--slds-g-font-scale-neg-1) / var(--slds-g-font-scale-ratio)));
+  }

package/src/lightning/textarea/form-element.slds.css

@@ -0,0 +1,315 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/**
+ * sldsFormElementUtils.css and form-element.css have many similarities
+ * however, they are used for very different use cases, and this is why
+ * they both exist, separate of each other. the 2 files are not 1:1.
+ *
+ * form-element.css is used for inclusion by LBC engineers (internal)
+ * in many of our lightning-input components, and is written with
+ * part attributes in mind. Some unneeded form element blueprint sections
+ * are not included in form-element.css, but could be added as needed later
+ *
+ * sldsFormElementUtils.css is used by customers (external) to get the
+ * specific layout styles that are provided by the form element blueprint
+ * https://www.lightningdesignsystem.com/components/form-element/
+ * there are no part attribute rules in this file
+ * the main use case of this utility is LightningModal for styling
+ * form layout for Form Element variants: Stacked, Horizontal, Compound
+ * sldsFormElementUtils.css is imported by customers via LWC CSS files:
+ * @import 'lightning/sldsFormElementUtils';
+ *
+ * **NOTE:** If you are updating this file, also check sldsFormElementUtils.css
+ * for any needed updates to keep these files in sync
+ */
+
+/* TODO: Swap with utility classes */
+
+:host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+/* FORM ELEMENT: BASE */
+
+:host([data-render-mode="shadow"]) .slds-form-element {
+        position: relative;
+        min-width: 0;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--slds-g-color-on-surface-2);
+        font-size: var(--slds-g-font-scale-neg-3);
+        padding-inline-end: var(--slds-g-spacing-2);
+        padding-block-start: var(--slds-g-spacing-1);
+        margin-block-end: calc(var(--slds-g-spacing-1) / 2);
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio {
+      display: block;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--slds-g-spacing-1);
+        vertical-align: top;
+        line-height: var(--slds-g-font-lineheight-1);
+        z-index: 1;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .slds-form-element__helper {
+        font-size: var(--slds-g-font-scale-neg-3);
+        margin-block-start: calc(var(--slds-g-spacing-1) / 2);
+        display: block;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--slds-g-sizing-7));
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+        margin-block-end: 0;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--slds-g-spacing-1) / 2);
+        padding-block-end: calc(var(--slds-g-spacing-1) / 2);
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--slds-g-font-weight-7);
+        float: left;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--slds-g-spacing-2);
+        margin-inline-end: var(--slds-g-spacing-2);
+        align-self: center;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--slds-g-font-scale-neg-1);
+        font-weight: var(--slds-g-font-weight-4);
+        color: var(--slds-g-color-neutral-base-10);
+        width: 100%;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--slds-g-sizing-6) + 1px);
+        vertical-align: bottom;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--slds-g-sizing-7));
+    }
+
+:host([data-render-mode="shadow"]) .slds-required {
+        color: var(--slds-g-color-error-base-50);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--slds-g-spacing-1) / 2);
+        margin-inline-end: calc(var(--slds-g-spacing-1) / 2);
+    }
+
+:host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--slds-g-color-error-1);
+    }
+
+:host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--slds-g-color-error-1);
+    }
+
+/* --------------------------------------- */
+
+/* FORM ELEMENT: STACKED */
+
+:host([data-render-mode="shadow"][variant='label-stacked']) {
+        display: block;
+    }
+
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+/* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--slds-g-spacing-2);
+    }
+
+    :host([variant='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--slds-g-spacing-1);
+    } */
+
+/* :host([variant='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
+        padding: 0;
+        margin-block-end: 0;
+    }
+
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        padding-inline-start: 0;
+    }
+
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--slds-g-spacing-1);
+    }
+
+/* --------------------------------------- */
+
+/* FORM ELEMENT: INLINE */
+
+:host([data-render-mode="shadow"][variant='label-inline']) {
+        display: block;
+    }
+
+/*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+:host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
+        padding: var(--slds-g-spacing-1);
+        margin-block-end: var(--slds-g-spacing-2);
+    }
+
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+/* :host([variant='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--slds-g-spacing-2);
+    }
+
+    :host([variant='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+
+    :host([variant='label-inline']:not(.slds-is-editing)) {
+        padding: var(--slds-g-spacing-1);
+    } */
+
+:host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
+        padding-block-start: var(--slds-g-sizing-6)
+    }
+
+@media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
+          float: left;
+        }
+
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
+          margin-inline-start: 33%;
+          clear: none; /* Reset clear: left when switching to horizontal form layout */
+        }
+
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
+          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
+        }
+
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+            width: auto;
+            max-width: 100%;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+
+/* --------------------------------------- */
+
+/* FORM ELEMENT: COMPOUND */
+
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--slds-g-spacing-1);
+      margin-left: calc(var(--slds-g-spacing-1) * -1);
+      margin-right: calc(var(--slds-g-spacing-1) * -1);
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--slds-g-spacing-1);
+      padding-right: var(--slds-g-spacing-1);
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
+
+/* --------------------------------------- */
+
+/* FORM ELEMENT: HIDDEN */
+
+:host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
+      display: none
+  }

package/src/lightning/textarea/textarea.css

@@ -1,6 +1,3 @@
+@import './textarea.lbc.synthetic.css';
+@import './textarea.lbc.native.css';
 @import 'lightning/sldsGenAiUtils';
-
-:host,
-textarea {
-    display: block;
-}