lightning-base-components 1.15.1-alpha → 1.15.2-alpha

package/src/lightning/formattedAddress/__docs__/formattedAddress.md

@@ -6,6 +6,9 @@ examples:
     - name: latitude
       label: Formatted Address with Latitude/Longitude
       description: Displays an address that includes latitude and longitude.
+    - name: customLocale
+      label: Formatted Address with Custom Locale
+      description: Displays an address in the format of a specific locale.
 ---
 
 A `lightning-formatted-address` component displays addresses in a format and field order

package/src/lightning/formattedAddress/__examples__/customLocale/customLocale.html

@@ -0,0 +1,22 @@
+<template>
+    <h1 class="slds-text-heading_small">Address in Spanish format</h1>
+
+    <lightning-formatted-address
+        street="Avenida Concha Espina, Nº 1"
+        city="Madrid"
+        postal-code="28036"
+        country="España"
+        locale="es-ES"
+    ></lightning-formatted-address>
+
+    <h1 class="slds-text-heading_small">Address in Japanese format</h1>
+
+    <lightning-formatted-address
+        street="下連雀1丁目1−83"
+        city="三鷹市"
+        country="日本"
+        province="東京都"
+        postal-code="181–0013"
+        locale="ja-JP"
+    ></lightning-formatted-address>
+</template>

package/src/lightning/formattedAddress/__examples__/customLocale/customLocale.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class LightningExampleFormattedAddressCustomLocale extends LightningElement {}

package/src/lightning/formattedAddress/formattedAddress.js

@@ -25,6 +25,12 @@ export default class LightningFormattedAddress extends LightningElement {
 
     @track href;
 
+    /**
+     * The locale of the address. The default value is 'en-US'.
+     * @type {string}
+     */
+    @api locale = locale;
+
     /**
      * The street detail for the address.
      * @type {string}
@@ -188,7 +194,7 @@ export default class LightningFormattedAddress extends LightningElement {
     }
 
     get address() {
-        const [langCode, countryCode] = locale.split('-');
+        const [langCode, countryCode] = this.locale.split('-');
         return (
             addressFormat.formatAddressAllFields(langCode, countryCode, {
                 address: this.street,

package/src/lightning/groupedCombobox/groupedCombobox.html

@@ -57,7 +57,8 @@
                 onendreached={handleEndReached}
                 ondropdownopen={handleDropdownOpen}
                 ondropdownopenrequest={handleDropdownOpenRequest}
-                onselect={handleSelect}>
+                onselect={handleSelect}
+                disable-default-highlight={disableDefaultHighlight}>
             </lightning-base-combobox>
         </div>
         <template if:true={_hasPills}>

package/src/lightning/groupedCombobox/groupedCombobox.js

@@ -45,6 +45,14 @@ export default class LightningGroupedCombobox extends LightningElement {
     @api filterItems;
     @api filterInputText;
 
+    /**
+     * Whether disable the highlighting default item behavior
+     *
+     * @type {boolean}
+     * @memberof LightningGroupedCombobox
+     */
+    @api disableDefaultHighlight;
+
     @track _pills;
 
     @track _variant;
@@ -378,9 +386,15 @@ export default class LightningGroupedCombobox extends LightningElement {
                     // eslint-disable-next-line @lwc/lwc/no-async-operation
                     requestAnimationFrame(() => {
                         if (this._connected) {
-                            this.template.querySelector(
+                            // If a new pill has been added but the markup-conditional hasn't had a chance to
+                            // initialize the pill container, and causes a null gack. Adding a quick safety
+                            // check here to avoid this case
+                            const pillContainer = this.template.querySelector(
                                 'lightning-pill-container'
-                            ).scrollTop = 0;
+                            );
+                            if (pillContainer) {
+                                pillContainer.scrollTop = 0;
+                            }
                         }
                     });
                 }

package/src/lightning/input/input.html

@@ -65,6 +65,7 @@
                 <span class={computedLabelClass}>{label}</span>
                 <input type="checkbox" id="checkbox-toggle"
                     aria-label={computedAriaLabel}
+                    aria-invalid={computedAriaInvalid}
                     accesskey={accesskey}
                     onblur={handleBlur}
                     onfocus={handleFocus}
@@ -101,6 +102,7 @@
                     </template>
                     <input type="checkbox" id="checkbox"
                         aria-label={computedAriaLabel}
+                        aria-invalid={computedAriaInvalid}
                         accesskey={accesskey}
                         onblur={handleBlur}
                         onfocus={handleFocus}
@@ -127,6 +129,7 @@
         <div class="slds-checkbox_add-button">
             <input type="checkbox" id="checkbox-button"
                 aria-label={computedAriaLabel}
+                aria-invalid={computedAriaInvalid}
                 accesskey={accesskey}
                 class="slds-assistive-text"
                 onblur={handleBlur}
@@ -146,6 +149,7 @@
         <div class="slds-form-element__control">
         <span class="slds-radio">
             <input type="radio" id="radio"
+                aria-invalid={computedAriaInvalid}
                 accesskey={accesskey}
                 onblur={handleBlur}
                 onfocus={handleFocus}
@@ -174,6 +178,7 @@
                 <lightning-primitive-file-droppable-zone multiple={multiple} disabled={disabled}>
                     <input type="file" id="input-file"
                         aria-label={computedAriaLabel}
+                        aria-invalid={computedAriaInvalid}
                         accesskey={accesskey}
                         class="slds-file-selector__input slds-assistive-text"
                         onblur={handleBlur}
@@ -228,6 +233,7 @@
                             autocomplete={autocomplete}
                             accesskey={accesskey}
                             aria-label={computedAriaLabel}
+                            aria-invalid={computedAriaInvalid}
                             disabled={disabled}
                             minlength="4"
                             maxlength="7"

package/src/lightning/input/input.js

@@ -30,6 +30,7 @@ import {
     synchronizeAttrs,
     decorateInputForDragon,
     setDecoratedDragonInputValueWithoutEvent,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import AriaObserver from 'lightning/ariaObserver';
 import { normalizeInput } from './normalize';
@@ -1178,7 +1179,7 @@ export default class LightningInput extends LightningElement {
 
     get computedAriaInvalid() {
         // W-8796658: aria-invalid should always follow the visual indication of errors
-        return !!this._helpMessage;
+        return computeAriaInvalid(this._helpMessage, this.value);
     }
 
     get isLabelHidden() {

package/src/lightning/inputAddress/__docs__/inputAddress.md

@@ -6,6 +6,9 @@ examples:
     - name: stateAndCountryPicklists
       label: Address With State and Country Picklists
       description: Address fields support predefined lists of states and countries.
+    - name: customLocale
+      label: Address With Custom Locale
+      description: Address input fields ordered depending on custom locale value.
 ---
 
 A `lightning-input-address` component creates a compound field that includes the following constituent fields.
@@ -290,6 +293,8 @@ The `label` attribute creates an HTML `<label>` element for your address.
 To hide the compound field label from view and make it available to assistive technology, use the `label-hidden` variant.
 This variant keeps the constituent field labels in view.
 
+This component uses `button` elements for picklists to comply with the [Lightning Design System combobox blueprint](https://www.lightningdesignsystem.com/components/combobox/#%22Input%22-markup) for select-only comboboxes.
+
 #### Custom Events
 
 **`change`**

package/src/lightning/inputAddress/__examples__/customLocale/customLocale.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-input-address
+        address-label="Address"
+        street-label="Street"
+        city-label="City"
+        country-label="Country"
+        province-label="Prefecture"
+        postal-code-label="Postal Code"
+        locale="ja-JP"
+        field-level-help="Help Text for input address field" >
+    </lightning-input-address>
+</template>

package/src/lightning/inputAddress/__examples__/customLocale/customLocale.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class InputAddressCustomLocale extends LightningElement {}

package/src/lightning/inputAddress/inputAddress.html

@@ -15,6 +15,7 @@
                             class="slds-form-element slds-show slds-size_6-of-6"
                             onchange={handleAddress}
                             placeholder={addressLookupPlaceholder}
+                            label={addressLookupLabel}
                             disabled={disabled}>
                         </lightning-lookup-address>
                     </div>
@@ -65,6 +66,7 @@
                             <template if:true={field.isPicklist}>
                                 <lightning-picklist
                                     key={field.name}
+                                    suppress-none-option={field.suppressNoneOption}
                                     data-field={field.name}
                                     class={field.classnames}
                                     name={field.name}

package/src/lightning/inputAddress/inputAddress.js

@@ -111,6 +111,13 @@ export default class LightningInputAddress extends LightningElement {
      */
     @api addressLookupPlaceholder;
 
+    /**
+     * The label for the address lookup field option.
+     * Only visible when show-address-lookup is set to true and label string is passed
+     * @type {string}
+     */
+    @api addressLookupLabel;
+
     /**
      * The array of label-value pairs for the province. Displays a dropdown menu of options.
      * @type {list}
@@ -130,6 +137,12 @@ export default class LightningInputAddress extends LightningElement {
      */
     @api countryDisabled;
 
+    /**
+     * Determines the order of the inputs for the address field.
+     * @type {string}
+     */
+    @api locale = locale;
+
     @track _showAddressLookup;
     @track _fieldLevelHelp;
     @track _variant;
@@ -469,12 +482,12 @@ export default class LightningInputAddress extends LightningElement {
     get inputOrder() {
         const hasCountryPicklist =
             this.fieldsTypeMeta.country.type === FIELD_TYPE.PICKLIST;
-        const [langCode, countryCode] = locale.split('-');
+        const [langCode, countryCode] = this.locale.split('-');
         return getInputOrder(langCode, countryCode, hasCountryPicklist);
     }
 
     get requiredFields() {
-        const [langCode, countryCode] = locale.split('-');
+        const [langCode, countryCode] = this.locale.split('-');
         return getRequiredFields(langCode, countryCode);
     }
 
@@ -502,18 +515,28 @@ export default class LightningInputAddress extends LightningElement {
             const rowList = row.map((field) => {
                 const { name, type, required, maxlength, autocomplete } = field;
                 const widthClass = getFieldWidthClass(field);
+                const value = this.getFieldValue(name);
+                const suppressNoneOption =
+                    this.required &&
+                    !!required &&
+                    type === FIELD_TYPE.PICKLIST &&
+                    value &&
+                    value !== ''
+                        ? true
+                        : false;
 
                 return {
                     isInput: type === FIELD_TYPE.INPUT,
                     isPicklist: type === FIELD_TYPE.PICKLIST,
                     isTextArea: type === FIELD_TYPE.TEXTAREA,
-                    value: this.getFieldValue(name),
+                    value: value,
                     options: this.getFieldOptions(name),
                     required: this.required && !!required,
                     disabled: this.getFieldDisabled(name) || this.disabled,
                     classnames: `slds-form-element slds-show ${widthClass}`,
                     placeholder: this.getFieldPlaceholder(name),
                     label: this.getFieldLabel(name),
+                    suppressNoneOption: suppressNoneOption,
                     autocomplete,
                     maxlength,
                     name,

package/src/lightning/inputName/__docs__/inputName.md

@@ -154,6 +154,8 @@ See the __Custom Events__ section for a list of `event.target` properties. For m
 You can use custom labels that display translated values. For more information, see the
 [Access Static Resources, Labels, Internationalization Properties, and User IDs](docs/component-library/documentation/lwc/create_global_value_providers).
 
+This component uses `button` elements for dropdown menus to comply with the [Lightning Design System combobox blueprint](https://www.lightningdesignsystem.com/components/combobox/#%22Input%22-markup) for select-only comboboxes.
+
 #### Input Validation
 
 When you set `required`, a red asterisk is displayed on the Last Name

package/src/lightning/inputName/inputName.html

@@ -2,9 +2,12 @@
     <fieldset class="slds-form-element">
         <legend class={computedLegendClass}>
             <template if:true={required}>
-                <abbr class="slds-required" title={i18n.required}>*</abbr>
+                <abbr class="slds-required" title={i18n.required} aria-hidden="true">*</abbr>
             </template>
             {label}
+            <template if:true={required}>
+                <span class="slds-assistive-text">{i18n.required}</span>
+            </template>
         </legend>
         <template if:true={fieldLevelHelp}>
             <lightning-helptext content={fieldLevelHelp}></lightning-helptext>

package/src/lightning/inputUtils/inputUtils.js

@@ -15,3 +15,14 @@ export function isEmptyString(s) {
         (typeof s === 'string' && s.trim() === '')
     );
 }
+
+export function isEmptyObject(obj) {
+    if (obj === undefined || obj === null || typeof obj !== 'object') {
+        return false;
+    }
+    // eslint-disable-next-line guard-for-in
+    for (const name in obj) {
+        return false;
+    }
+    return true;
+}

package/src/lightning/picklist/picklist.js

@@ -31,6 +31,7 @@ export default class LightningPicklist extends LightningElement {
     @api placeholder;
     @api variant;
     @api autocomplete = 'off';
+    @api suppressNoneOption;
 
     set fieldLevelHelp(value) {
         this._fieldLevelHelp = value;
@@ -86,6 +87,7 @@ export default class LightningPicklist extends LightningElement {
         // reset the flag that hides the required indicator when we have no options
         this._requiredButDisabled = false;
     }
+
     @api
     get required() {
         return this._required;
@@ -293,7 +295,10 @@ export default class LightningPicklist extends LightningElement {
         // We could have set required=false if the picklist had no options, see updateDisabledState and updateRequiredState
         const isRequiredPicklist = this.required || this._requiredButDisabled;
 
-        if (isRequiredPicklist && numberOfOptions === 1) {
+        if (
+            this.suppressNoneOption ||
+            (isRequiredPicklist && numberOfOptions === 1)
+        ) {
             return false;
         }
 

package/src/lightning/prompt/__docs__/prompt.md

@@ -1,7 +1,5 @@
 The `lightning/prompt` module lets you create an prompt modal within your component. Use `LightningPrompt` on your components to ask the user to provide information before they continue.
 
-`lightning/prompt` is not supported on mobile devices.
-
 Use `LightningPrompt.open()` instead of the native `window.prompt()` for a more consistent user experience. They have similar functions, but `LightningPrompt.open()` works in cross-origin iframes, where the `.prompt()` method is no longer supported in Chrome and Safari. Unlike `window.prompt()`, `LightningPrompt.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the prompt has closed.
 
 Import `LightningPrompt` from the `lightning/prompt` module in the component that will launch the prompt modal, and call `LightningPrompt.open()` with your desired attributes.

package/src/lightning/radioGroup/radioGroup.js

@@ -90,8 +90,17 @@ export default class LightningRadioGroup extends LightningElement {
         });
     }
 
+    get fieldsetElement() {
+        return this.template.querySelector('fieldset');
+    }
+
     renderedCallback() {
         this.synchronizeA11y();
+        synchronizeAttrs(this.fieldsetElement, {
+            'aria-describedby': getRealDOMId(
+                this.template.querySelector('[data-help-message]')
+            ),
+        });
     }
 
     /**

package/src/lightning/select/select.html

@@ -21,7 +21,9 @@
                 onfocus={handleFocus}
                 required={required}
                 accesskey={accessKey}
-                size={size}>
+                size={size}
+                aria-invalid={computedAriaInvalid}
+            >
                 <template for:each={options} for:item="option">
                     <template if:true={option.disabled}>
                         <option disabled key={option.value} value={option.value}>{option.label}</option>

package/src/lightning/select/select.js

@@ -80,11 +80,15 @@ export default class LightningSelect extends LightningElement {
         }
         synchronizeAttrs(this.selectElement, {
             'aria-describedby': getRealDOMId(
-                this.template.querySelector('#help-message')
+                this.template.querySelector('[data-help-message]')
             ),
         });
     }
 
+    get computedAriaInvalid() {
+        return !!this._helpMessage || undefined;
+    }
+
     /**
      * Help text detailing the purpose and function of the menu of options.
      * The text is displayed in a tooltip above the menu.

package/src/lightning/textarea/textarea.html

@@ -9,6 +9,7 @@
     <div class="slds-form-element__control slds-grow textarea-container">
         <textarea id="input" class="slds-textarea"
             aria-describedby={computedUniqueHelpElementId}
+            aria-invalid={computedAriaInvalid}
             autocomplete={autocomplete}
             oninput={handleInput}
             onchange={handleChange}

package/src/lightning/textarea/textarea.js

@@ -10,6 +10,7 @@ import {
     classListMutation,
     decorateInputForDragon,
     setDecoratedDragonInputValueWithoutEvent,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
     InteractingState,
@@ -478,6 +479,10 @@ export default class LightningTextarea extends LightningElement {
         }
         return this._constraintApi;
     }
+
+    get computedAriaInvalid() {
+        return computeAriaInvalid(this._helpMessage, this.value);
+    }
 }
 
 LightningTextarea.interopMap = {

package/src/lightning/timepicker/timepicker.html

@@ -31,7 +31,9 @@
             ondropdownopenrequest={handleDropdownOpenRequest}
             onfocus={handleFocus}
             onblur={handleBlur}
-            onselect={handleTimeSelect}>
+            onselect={handleTimeSelect}
+            data-aria-invalid={computedAriaInvalid}
+        >
         </lightning-base-combobox>
     </div>
 

package/src/lightning/timepicker/timepicker.js

@@ -23,6 +23,7 @@ import {
     normalizeBoolean,
     synchronizeAttrs,
     normalizeString,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import { normalizeVariant, VARIANT } from 'lightning/inputUtils';
 
@@ -543,4 +544,11 @@ export default class LightningTimePicker extends LightningElement {
             this.ariaLabelledByElement.length
         );
     }
+
+    get computedAriaInvalid() {
+        const isAriaInvalid =
+            this.template.host.getAttribute('data-aria-invalid') ||
+            this._errorMessage;
+        return computeAriaInvalid(isAriaInvalid, this.value);
+    }
 }

package/src/lightning/utilsPrivate/aria.js

@@ -135,3 +135,29 @@ export function isAriaDescriptionSupported() {
     }
     return ariaDescriptionSupported;
 }
+
+export function updateAriaInvalidOnElement(element, isInvalid) {
+    if (isInvalid) {
+        element.setAttribute('aria-invalid', true);
+    } else {
+        element.removeAttribute('aria-invalid');
+    }
+}
+
+/**
+ * If value is empty, then do no calculate aria-invalid. This is intentional for 240.
+ * In the future, we may be removing emptiness this check.
+ *
+ * Then if isInvalid is truthy, return true else return undefined to remove
+ * aria-invalid attribute.
+ *
+ * @param isInvalid
+ * @param value
+ * @returns {boolean|undefined}
+ */
+export function computeAriaInvalid(isInvalid, value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return !!isInvalid || undefined;
+}

package/src/lightning/utilsPrivate/linkify.js

@@ -107,6 +107,6 @@ export function parseToFormattedLinkifiedParts(text, ignoreNewLines = false) {
  */
 export function parseToFormattedParts(text) {
     return text.split(newLineRegex).map((part, index) => {
-        return index % 2 === 0 ? getTextPart(part) : getNewlinePart();
+        return index % 2 === 0 ? getTextPart(part) : getNewlinePart(index);
     });
 }

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -1,5 +1,11 @@
 export { assert } from './assert';
-export { ARIA, ARIA_TO_CAMEL, isAriaDescriptionSupported } from './aria';
+export {
+    ARIA,
+    ARIA_TO_CAMEL,
+    isAriaDescriptionSupported,
+    updateAriaInvalidOnElement,
+    computeAriaInvalid,
+} from './aria';
 export { EventEmitter } from './eventEmitter';
 export { toNorthAmericanPhoneNumber } from './phonify';
 export * from './linkUtils';

package/src/lightning/icon/__component__/icon-spirite.spec.js

@@ -1,59 +0,0 @@
-import { createElement } from 'lwc';
-import Element from 'lightning/icon';
-
-function createIcon(props = {}) {
-    const element = createElement('lightning-icon', { is: Element });
-
-    Object.assign(element, props);
-    document.body.appendChild(element);
-    return element;
-}
-
-function verifySvgDataKey(element, value) {
-    const primitiveIcon = element.shadowRoot.querySelector(
-        'lightning-primitive-icon'
-    );
-    const svg = primitiveIcon.shadowRoot.querySelector('svg');
-    expect(svg.getAttribute('data-key')).toBe(value);
-}
-
-describe('lightning-icon', () => {
-    it('should render with prebuilt icon for utility', () => {
-        const element = createIcon({
-            iconName: 'utility:check',
-        });
-
-        verifySvgDataKey(element, 'check');
-    });
-    it('should render with prebuilt icon for standard', () => {
-        const element = createIcon({
-            iconName: 'standard:account',
-        });
-
-        verifySvgDataKey(element, 'account');
-    });
-
-    it('should render with prebuilt icon for action', () => {
-        const element = createIcon({
-            iconName: 'action:back',
-        });
-
-        verifySvgDataKey(element, 'back');
-    });
-
-    it('should render with prebuilt icon for doctype', () => {
-        const element = createIcon({
-            iconName: 'doctype:image',
-        });
-
-        verifySvgDataKey(element, 'image');
-    });
-
-    it('should render with prebuilt icon for custom', () => {
-        const element = createIcon({
-            iconName: 'custom:custom1',
-        });
-
-        verifySvgDataKey(element, 'custom1');
-    });
-});