lightning-base-components 1.21.2-alpha → 1.21.3-alpha

package/src/lightning/tabset/tabset.js

@@ -28,6 +28,8 @@ export default class LightningTabset extends LightningShadowBaseClass {
     _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;
@@ -44,7 +46,10 @@ export default class LightningTabset extends LightningShadowBaseClass {
     @api title;
 
     /**
-     * The string value to set the tabset heading label to
+     * 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
      */
     @api
@@ -55,37 +60,23 @@ export default class LightningTabset extends LightningShadowBaseClass {
     set headingLabel(value) {
         const labelIsPopulated = value && value.trim().length > 0;
         const currentValue = this._headingLabel;
-        // unset the value, if conditions for valid label not met
         const nextValue = labelIsPopulated ? value : null;
         this._headingLabel = nextValue;
-        // need to handle dynamic changes after initial render cycle has occurred
-        // NOTE: W-14708987 was created to deal w/ an edge case described in B & C below
-        // (a) label was set, and changing to another label value.
-        //     ex: 'My Title' -> 'My Turtles' (fixed:W-14578712)
-        // (b) label was unset, and now has a value. (TODO: W-14708987)
-        //     ex: null -> 'My title'
-        // (c) label values was set, and now has value set null (TODO: W-14708987)
-        //     ex: 'My Title' -> null
-        // the issues with B and C occur due to how the template lwc:if / lwc:else
-        // is structured
-        // if the value is changing from: 'My Title' to 'My Bigger Title' (A above),
-        // no rerender is required, because the template logic is the same
-        // need to rerender the tabs, because the template logic IF / ELSE
-        // is triggered by transitioning between null and a populated value
+
+        // 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;
-            this._headingLabelAdd = currentValue === null && nextValue;
-            // need to trigger rerender of the entire tab set element
-            if (this._headingLabelRemove || this._headingLabelAdd) {
-                this._headingLabelRerender = true;
-                this._firstRender = true;
-            }
+            this._headingLabelRemove = currentValue && nextValue === null; // label to null
+            this._headingLabelAdd = currentValue === null && nextValue; // null to label
+            this._headingLabelRerender =
+                this._headingLabelRemove || this._headingLabelAdd;
         }
     }
 
     /**
-     * Determines if the heading should be visible or only screen reader visible
-     * when set, expects a boolean value. when not set, defaults to 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
      */
@@ -99,7 +90,8 @@ export default class LightningTabset extends LightningShadowBaseClass {
     }
 
     /**
-     * Determines the value to pass to aria-level. Accepts values in range [1,6].
+     * 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
      */
@@ -214,12 +206,7 @@ export default class LightningTabset extends LightningShadowBaseClass {
     renderedCallback() {
         // always update the cached this._tabBarElem at the start of the render cycle
         this._cacheTabBarElem();
-        if (this.nativeShadowAndRerender) {
-            this._rerender = false;
-            this._updateTabBarHeaders(this._tabHeaders);
-            this._selectTab(this._activeTabValue);
-        }
-        if (this.headingLabelChangeRerender) {
+        if (this.nativeShadowAndRerender || this._headingLabelRerender) {
             this._rerender = false;
             this._headingLabelRerender = false;
             this._updateTabBarHeaders(this._tabHeaders);
@@ -421,16 +408,12 @@ export default class LightningTabset extends LightningShadowBaseClass {
         return this._rerender && !this.template.synthetic;
     }
 
-    get headingLabelChangeRerender() {
-        return !this._firstRender && this._headingLabelRerender;
-    }
-
     /* cache tabBar element when first accessed, or isCSR and not set */
     get tabBarElem() {
         if (isCSR) {
             if (
-                this._headingLabelRerender ||
                 this.nativeShadowAndRerender ||
+                this._headingLabelRerender ||
                 !this._tabBarElem
             ) {
                 this._cacheTabBarElem();
@@ -450,7 +433,11 @@ export default class LightningTabset extends LightningShadowBaseClass {
             // 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._tabBarElem) {
+            if (
+                this.nativeShadowAndRerender ||
+                this._headingLabelRerender ||
+                !this._tabBarElem
+            ) {
                 this._tabBarElem =
                     this.template.querySelector('lightning-tab-bar');
             }

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

@@ -1,5 +1,4 @@
 
-@supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) .slds-vertical-tabs {
       display: flex;
       overflow: hidden;
@@ -12,4 +11,3 @@
   :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

@@ -25,21 +25,22 @@
  * for any needed updates to keep these files in sync
  */
 
-@supports (--styling-hooks: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
+/* 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 {
+/* 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 {
+:host([data-render-mode="shadow"]) .slds-form-element__label {
         overflow-wrap: break-word;
         word-wrap: break-word;
         hyphens: auto;
@@ -51,20 +52,20 @@
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+:host([data-render-mode="shadow"]) .slds-form-element__label:empty {
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
+: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 {
+:host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio {
       display: block;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+:host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
         padding-block-start: var(--slds-g-spacing-1);
@@ -73,42 +74,42 @@
         z-index: 1;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+: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"]) 
+: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 {
+: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 {
+: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 {
+: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 {
+: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 {
+: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 {
+:host([data-render-mode="shadow"]) .slds-form-element__addon {
         display: inline-block;
         margin-block-start: 0;
         margin-block-end: 0;
@@ -117,7 +118,7 @@
         align-self: center;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
+:host([data-render-mode="shadow"]) .slds-form-element__static {
         overflow-wrap: break-word;
         word-wrap: break-word;
         word-break: break-word;
@@ -128,20 +129,20 @@
         width: 100%;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+: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 {
+: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 {
+: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 {
+:host([data-render-mode="shadow"]) .slds-required {
         color: var(--slds-g-color-error-base-50);
         margin-block-start: 0;
         margin-block-end: 0;
@@ -149,25 +150,25 @@
         margin-inline-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+: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 {
+:host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
         color: var(--slds-g-color-error-1);
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: STACKED */
+/* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant='label-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 */
+/* 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) {
+/* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--slds-g-spacing-2);
     }
 
@@ -175,54 +176,54 @@
         padding: 0 var(--slds-g-spacing-1);
     } */
 
-    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
+/* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
+: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 {
+: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 {
+: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 {
+: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 */
+/* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant='label-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) {
+: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 */
+/* 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) {
+/* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--slds-g-spacing-2);
     }
 
@@ -235,11 +236,11 @@
         padding: var(--slds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
+:host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--slds-g-sizing-6)
     }
 
-    @media (width >= 48em) {
+@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 */
@@ -281,35 +282,34 @@
         }
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: COMPOUND */
+/* FORM ELEMENT: COMPOUND */
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+: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 {
+: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 {
+: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 {
+:host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: HIDDEN */
+/* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
+:host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
-}

package/src/lightning/textarea/textarea.js

@@ -51,6 +51,8 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     _helpMessageChanged = false;
     ariaObserver = null;
 
+    static validationOptOut = ['class'];
+
     /************************* PUBLIC PROPERTIES *************************/
 
     /**
@@ -366,7 +368,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         if (this._inputElement) {
             return this._inputElement;
         }
-        this._inputElement = this.template.querySelector('textarea');
+        this._inputElement = isCSR
+            ? this.template.querySelector('textarea')
+            : null;
         decorateInputForDragon(this._inputElement);
         return this._inputElement;
     }

package/src/lightning/textarea/textarea.slds.css

@@ -1,10 +1,24 @@
 
-@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) {
+          /**
+          * Remap to SLDS blueprint hooks for parity
+          * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+          */
+
+          /* stylelint-disable */
+          --slds-c-textarea-spacing-blockstart: var(--slds-c-textarea-spacing-block-start);
+          --slds-c-textarea-spacing-blockend: var(--slds-c-textarea-spacing-block-end);
+          --slds-c-textarea-spacing-inlinestart: var(--slds-c-textarea-spacing-inline-start);
+          --slds-c-textarea-spacing-inlineend: var(--slds-c-textarea-spacing-inline-end);
+          /* stylelint-enable */
+  }
+
     /* sldsCommon.css file comments indicate intentionally
         not adding textarea selector to that file due to
         style leaks in synthetic shadow mode.
         adding here instead
     */
+
     :host([data-render-mode="shadow"]) textarea {
         color: inherit;
         font: inherit;
@@ -12,16 +26,14 @@
     }
 
     :host([data-render-mode="shadow"]) .slds-textarea {
-       /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
-
        /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
         appearance: none;
         min-height: var(--slds-c-textarea-sizing-min-height);
         width: 100%;
-        padding-block-start: var(--slds-c-textarea-spacing-block-start, var(--slds-g-spacing-2));
-        padding-inline-end: var(--slds-c-textarea-spacing-inline-end, var(--slds-g-spacing-3));
-        padding-block-end: var(--slds-c-textarea-spacing-block-end, var(--slds-g-spacing-2));
-        padding-inline-start: var(--slds-c-textarea-spacing-inline-start, var(--slds-g-spacing-3));
+        padding-block-start: var(--slds-c-textarea-spacing-blockstart, var(--slds-g-spacing-2));
+        padding-inline-end: var(--slds-c-textarea-spacing-inlineend, var(--slds-g-spacing-3));
+        padding-block-end: var(--slds-c-textarea-spacing-blockend, var(--slds-g-spacing-2));
+        padding-inline-start: var(--slds-c-textarea-spacing-inlinestart, var(--slds-g-spacing-3));
         background-color: var(--slds-c-textarea-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
         color: var(--slds-c-textarea-text-color);
         border: var(--slds-g-sizing-border-1) solid var(--slds-c-textarea-color-border, var(--slds-g-color-border-base-4, var(--slds-g-color-border-base-1)));
@@ -29,7 +41,6 @@
         box-shadow: var(--slds-c-textarea-shadow);
         resize: vertical;
         transition: border 0.1s linear, background-color 0.1s linear;
-        /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
 
         /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     }
@@ -64,6 +75,7 @@
     }
 
     /* replace .slds-has-error with invalid */
+
     :host([data-render-mode="shadow"][invalid]) .slds-textarea {
         --slds-c-textarea-color-background: var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100));
         --slds-c-textarea-color-border: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50));
@@ -73,6 +85,7 @@
     }
 
     /* replace .slds-has-error with invalid */
+
     :host([data-render-mode="shadow"][invalid]) .slds-textarea:focus,:host([data-render-mode="shadow"][invalid]) .slds-textarea:active {
         --slds-c-textarea-text-color-focus: var(--slds-c-textarea-text-color-error-focus);
         --slds-c-textarea-color-background-focus: var(--slds-c-textarea-color-background-error-focus, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
@@ -80,6 +93,7 @@
     }
 
     /* TODO W-12674349: remove after name-value-list utils are added */
+
     :host([data-render-mode="shadow"]) .slds-assistive-text {
       position: absolute !important;
       margin: -1px !important;
@@ -92,4 +106,3 @@
       text-transform: none !important;
       white-space: nowrap !important;
   }
-}