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

package/src/lightning/textarea/textarea.html

@@ -5,10 +5,15 @@
         </template>
         {label}
     </label>
-    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+    <lightning-helptext
+        if:true={fieldLevelHelp}
+        content={fieldLevelHelp}
+        alternative-text={helptextAlternativeText}
+    ></lightning-helptext>
     <div class="slds-form-element__control slds-grow textarea-container">
-        <textarea id="input" class="slds-textarea"
-            aria-describedby={computedUniqueHelpElementId}
+        <textarea
+            id="input"
+            class="slds-textarea"
             aria-invalid={computedAriaInvalid}
             autocomplete={autocomplete}
             oninput={handleInput}
@@ -22,9 +27,20 @@
             minlength={minLength}
             placeholder={placeholder}
             required={required}
-            accesskey={accessKey}>{_defaultValue}</textarea>
+            accesskey={accessKey}
+            part="textarea"
+        >
+            {_defaultValue}
+        </textarea>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" data-help-message class="slds-form-element__help" aria-live="assertive">{_helpMessage}</div>
+        <div
+            id="help-message"
+            data-help-message
+            class="slds-form-element__help"
+            aria-live="assertive"
+        >
+            {_helpMessage}
+        </div>
     </template>
 </template>

package/src/lightning/textarea/textarea.js

@@ -2,16 +2,18 @@
 
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
-    synchronizeAttrs,
-    getRealDOMId,
     classListMutation,
     decorateInputForDragon,
+    reflectAttribute,
     setDecoratedDragonInputValueWithoutEvent,
     computeAriaInvalid,
+    isNativeComponent,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import {
     InteractingState,
@@ -21,6 +23,7 @@ import {
     VARIANT,
 } from 'lightning/inputUtils';
 import { TouchScroller } from 'lightning/touchScrollLibrary';
+import AriaObserver from 'lightning/ariaObserver';
 
 const i18n = {
     required: labelRequired,
@@ -30,9 +33,28 @@ const i18n = {
 /**
  * Represents a multiline text input field.
  */
-export default class LightningTextarea extends LightningElement {
+export default class LightningTextarea extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
+    // Private Variables
+    @track _maxLength;
+    @track _minLength;
+    @track _defaultValue = '';
+    @track _disabled = false;
+    @track _required = false;
+    @track _readOnly = false;
+    @track _variant;
+
+    @track _helpMessage;
+    @track _fieldLevelHelp;
+    _ariaDescribedBy = '';
+    _helpMessageChanged = false;
+    ariaObserver = null;
+
+    static validationOptOut = ['class'];
+
+    /************************* PUBLIC PROPERTIES *************************/
+
     /**
      * Controls auto-filling of the field. Set the attribute to pass
      * through autocomplete values to be interpreted by the browser.
@@ -91,68 +113,18 @@ export default class LightningTextarea extends LightningElement {
      */
     @api accessKey;
 
-    @track _maxLength;
-    @track _minLength;
-    @track _defaultValue = '';
-    @track _disabled = false;
-    @track _required = false;
-    @track _readOnly = false;
-    @track _variant;
-
-    @track _helpMessage;
-    @track _fieldLevelHelp;
-
     /**
      * Aria Described by value on parent lighting-textarea
      * @type {string}
      */
-    @api ariaDescribedBy;
-
-    connectedCallback() {
-        this.classList.add('slds-form-element');
-        this.updateClassList();
-        this._connected = true;
-        this.interactingState = new InteractingState();
-        this.interactingState.onleave(() => this.showHelpMessageIfInvalid());
-    }
-
-    updateClassList() {
-        classListMutation(this.classList, {
-            'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
-            'slds-form-element_horizontal':
-                this.variant === VARIANT.LABEL_INLINE,
-        });
-    }
-
-    synchronizeA11y() {
-        const input = this.template.querySelector('textarea');
-        synchronizeAttrs(input, {
-            'aria-describedby': this.computedUniqueHelpElementId,
-        });
-    }
-
-    renderedCallback() {
-        // IE11: This is needed to work-around IE11 issue where it would append default value to the place holder,
-        // instead of actually setting the value on the textarea element.
-        if (!this._rendered) {
-            this._rendered = true;
-            this._setInputValue(this._defaultValue);
-            this.synchronizeA11y();
-
-            // For non-desktop cases where ui:scroller prevents scrolling within the textarea.
-            // The TouchScroller library allows touchmove events to scroll through the content of
-            // the textarea but sets appropriate flags in the event to allow ui:scroller to scroll
-            // the page when a content boundary is reached.
-            const scrollTarget = this.template.querySelector(
-                '.textarea-container'
-            );
-            this.touchScroller = new TouchScroller(scrollTarget);
-        }
-        this.synchronizeA11y();
+    @api
+    get ariaDescribedBy() {
+        return this._ariaDescribedBy;
     }
 
-    disconnectedCallback() {
-        this._connected = false;
+    set ariaDescribedBy(elements) {
+        this._ariaDescribedBy = elements;
+        this.connectAriaDescribedBy();
     }
 
     /**
@@ -222,6 +194,19 @@ export default class LightningTextarea extends LightningElement {
         this._updateProxyInputAttributes('disabled');
     }
 
+    /**
+     * The help text that appears in a popover.
+     * Set field-level help to provide an informational tooltip on the textarea input field.
+     */
+    @api
+    get fieldLevelHelp() {
+        return this._fieldLevelHelp;
+    }
+
+    set fieldLevelHelp(value) {
+        this._fieldLevelHelp = value;
+    }
+
     /**
      * If present, the textarea field is read-only and cannot be edited.
      * @type {boolean}
@@ -268,7 +253,8 @@ export default class LightningTextarea extends LightningElement {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
-        this.updateClassList();
+        reflectAttribute(this, 'variant', this._variant);
+        this.updateHostClassList();
     }
 
     /**
@@ -280,6 +266,8 @@ export default class LightningTextarea extends LightningElement {
         return this._constraint.validity;
     }
 
+    /************************** PUBLIC METHODS **************************/
+
     /**
      * Returns the valid attribute value (Boolean) on the ValidityState object.
      * @returns {boolean} Indicates whether the textarea meets all constraint validations.
@@ -298,6 +286,7 @@ export default class LightningTextarea extends LightningElement {
     reportValidity() {
         return this._constraint.reportValidity((message) => {
             this._helpMessage = message;
+            this._helpMessageChanged = true;
         });
     }
 
@@ -319,19 +308,6 @@ export default class LightningTextarea extends LightningElement {
         this.reportValidity();
     }
 
-    set fieldLevelHelp(value) {
-        this._fieldLevelHelp = value;
-    }
-
-    /**
-     * The help text that appears in a popover.
-     * Set field-level help to provide an informational tooltip on the textarea input field.
-     */
-    @api
-    get fieldLevelHelp() {
-        return this._fieldLevelHelp;
-    }
-
     /**
      * Sets focus on the textarea field.
      */
@@ -372,6 +348,8 @@ export default class LightningTextarea extends LightningElement {
         }
     }
 
+    /************************** PRIVATE GETTERS **************************/
+
     get isLabelHidden() {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
@@ -386,6 +364,107 @@ export default class LightningTextarea extends LightningElement {
             .toString();
     }
 
+    get inputElement() {
+        if (this._inputElement) {
+            return this._inputElement;
+        }
+        this._inputElement = isCSR
+            ? this.template.querySelector('textarea')
+            : null;
+        decorateInputForDragon(this._inputElement);
+        return this._inputElement;
+    }
+
+    get _constraint() {
+        if (!this._constraintApi) {
+            this._constraintApi = new FieldConstraintApiWithProxyInput(
+                () => this,
+                {
+                    // Override validity.valueMissing, which was broken in Edge until May 2018.
+                    // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/291588/
+                    valueMissing: () =>
+                        this._required && isEmptyString(this._value),
+
+                    tooShort: () =>
+                        this._connected && this.inputElement.validity.tooShort,
+                    tooLong: () =>
+                        this._connected && this.inputElement.validity.tooLong,
+                },
+                'textarea'
+            );
+
+            this._constraintApiProxyInputUpdater =
+                this._constraint.setInputAttributes({
+                    value: () => this.value,
+                    maxlength: () => this.maxLength,
+                    minlength: () => this.minLength,
+                    disabled: () => this.disabled,
+                    readonly: () => this.readOnly,
+                    required: () => this.required,
+                });
+        }
+        return this._constraintApi;
+    }
+
+    get computedAriaInvalid() {
+        return computeAriaInvalid(this._helpMessage, this.value);
+    }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
+
+    /************************** LIFECYCLE HOOKS **************************/
+
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+        this._isNativeShadow = isNativeComponent(this);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateHostClassList();
+        this._connected = true;
+        this.interactingState = new InteractingState();
+        this.interactingState.onleave(() => this.showHelpMessageIfInvalid());
+    }
+
+    renderedCallback() {
+        this.ariaObserver.sync(this._isNativeShadow);
+        // IE11: This is needed to work-around IE11 issue where it would append default value to the place holder,
+        // instead of actually setting the value on the textarea element.
+        if (!this._rendered) {
+            this.connectAriaDescribedBy();
+            this._rendered = true;
+            this._setInputValue(this._defaultValue);
+
+            // For non-desktop cases where ui:scroller prevents scrolling within the textarea.
+            // The TouchScroller library allows touchmove events to scroll through the content of
+            // the textarea but sets appropriate flags in the event to allow ui:scroller to scroll
+            // the page when a content boundary is reached.
+            const scrollTarget = this.template.querySelector(
+                '.textarea-container'
+            );
+            this.touchScroller = new TouchScroller(scrollTarget);
+        }
+        // If the help message changed, the help message element needs to be (un)related
+        if (this._helpMessageChanged) {
+            this.connectAriaDescribedBy();
+            this._helpMessageChanged = false;
+        }
+    }
+
+    disconnectedCallback() {
+        this._connected = false;
+        if (this.ariaObserver && this.ariaObserver.disconnect) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = null;
+        }
+    }
+
+    /************************** EVENT HANDLERS ***************************/
+
     handleFocus() {
         this.interactingState.enter();
         this.dispatchEvent(new CustomEvent('focus'));
@@ -428,24 +507,18 @@ export default class LightningTextarea extends LightningElement {
         );
     }
 
-    get inputElement() {
-        if (this._inputElement) {
-            return this._inputElement;
-        }
-        this._inputElement = this.template.querySelector('textarea');
-        decorateInputForDragon(this._inputElement);
-        return this._inputElement;
-    }
+    /************************** HELPER FUNCTIONS **************************/
 
-    get computedUniqueHelpElementId() {
-        const helpMessage = this.template.querySelector('[data-help-message]');
-        let spaceSeperatedDescribedByIds = getRealDOMId(helpMessage);
-        if (this.ariaDescribedBy && spaceSeperatedDescribedByIds) {
-            spaceSeperatedDescribedByIds += ` ${this.ariaDescribedBy}`;
-        } else if (this.ariaDescribedBy) {
-            spaceSeperatedDescribedByIds = this.ariaDescribedBy;
-        }
-        return spaceSeperatedDescribedByIds;
+    connectAriaDescribedBy() {
+        const helpMessage = isCSR
+            ? this.template.querySelector('[data-help-message]')
+            : null;
+        this.ariaObserver.connect({
+            targetSelector: 'textarea',
+            attribute: 'aria-describedby',
+            relatedNodeIds: this.ariaDescribedBy,
+            relatedNodes: helpMessage,
+        });
     }
 
     _setInputValue(value) {
@@ -463,43 +536,13 @@ export default class LightningTextarea extends LightningElement {
         }
     }
 
-    get _constraint() {
-        if (!this._constraintApi) {
-            this._constraintApi = new FieldConstraintApiWithProxyInput(
-                () => this,
-                {
-                    // Override validity.valueMissing, which was broken in Edge until May 2018.
-                    // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/291588/
-                    valueMissing: () =>
-                        this._required && isEmptyString(this._value),
-
-                    tooShort: () =>
-                        this._connected && this.inputElement.validity.tooShort,
-                    tooLong: () =>
-                        this._connected && this.inputElement.validity.tooLong,
-                },
-                'textarea'
-            );
-
-            this._constraintApiProxyInputUpdater =
-                this._constraint.setInputAttributes({
-                    value: () => this.value,
-                    maxlength: () => this.maxLength,
-                    minlength: () => this.minLength,
-                    disabled: () => this.disabled,
-                    readonly: () => this.readOnly,
-                    required: () => this.required,
-                });
-        }
-        return this._constraintApi;
-    }
-
-    get computedAriaInvalid() {
-        return computeAriaInvalid(this._helpMessage, this.value);
-    }
-
-    get helptextAlternativeText() {
-        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    updateHostClassList() {
+        classListMutation(this.classList, {
+            'slds-form-element': true,
+            'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
+            'slds-form-element_horizontal':
+                this.variant === VARIANT.LABEL_INLINE,
+        });
     }
 }
 

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

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './form-element.slds.css';
+@import './textarea.slds.css';

package/src/lightning/textarea/textarea.lbc.synthetic.css

@@ -0,0 +1,5 @@
+:host,
+textarea {
+    display: block;
+}
+

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

@@ -0,0 +1,108 @@
+
+  :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;
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-textarea {
+       /* 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-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)));
+        border-radius: var(--slds-c-textarea-radius-border, var(--slds-g-radius-border-2));
+        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-pattern */
+    }
+
+    :host([data-render-mode="shadow"]) .slds-textarea:required {
+        --slds-c-textarea-shadow: none;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-textarea:focus,:host([data-render-mode="shadow"]) 
+    .slds-textarea:active {
+        outline: 0;
+        color: var(--slds-c-textarea-text-color-focus);
+        background-color: var(--slds-c-textarea-color-background-focus, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
+        border-color: var(--slds-c-textarea-color-border-focus, var(--slds-g-color-brand-base-60, var(--slds-g-color-brand-base-60)));
+        box-shadow: var(--slds-c-textarea-shadow-focus, 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-brand-base-50));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-textarea[disabled],:host([data-render-mode="shadow"]) 
+    .slds-textarea.slds-is-disabled {
+        background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-neutral-base-95));
+        border-color: var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-80));
+        color: inherit;
+        cursor: not-allowed;
+        user-select: none;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-textarea[disabled]:focus,:host([data-render-mode="shadow"]) 
+    .slds-textarea[disabled]:active,:host([data-render-mode="shadow"]) 
+    .slds-textarea.slds-is-disabled:focus,:host([data-render-mode="shadow"]) 
+    .slds-textarea.slds-is-disabled:active {
+        box-shadow: none;
+    }
+
+    /* 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));
+        --slds-c-textarea-shadow: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50)) 0 0 0 var(--slds-g-sizing-border-1) inset;
+
+        background-clip: padding-box;
+    }
+
+    /* 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)));
+        --slds-c-textarea-shadow-focus: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50)) 0 0 0 var(--slds-g-sizing-border-1) inset, 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-brand-base-50);
+    }
+
+    /* 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;
+      border: 0 !important;
+      padding: 0 !important;
+      width: 1px !important;
+      height: 1px !important;
+      overflow: hidden !important;
+      clip: rect(0 0 0 0) !important;
+      text-transform: none !important;
+      white-space: nowrap !important;
+  }

package/src/lightning/tile/standardTile.css

@@ -1,3 +1 @@
-:host {
-    display: block;
-}
+@import './standardTile.lbc.synthetic.css';

package/src/lightning/tile/standardTile.lbc.synthetic.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}