lightning-base-components 1.14.6-alpha → 1.15.2-alpha

package/src/lightning/iconSvgTemplatesUtilityRtl/buildTemplates/utility/slack.html

@@ -0,0 +1,7 @@
+<template>
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" viewBox="0 0 52 52">
+        <g>
+ <path d="M12.1 32.3a5 5 0 01-5 5 5 5 0 010-10h5zM14.6 32.3a5 5 0 015-5 5.08 5.08 0 015 5V45a5 5 0 01-5 5 5.08 5.08 0 01-5-5zM19.7 12.1a5 5 0 01-5-5 5 5 0 0110 0v5zM19.7 14.6a5 5 0 015 5 5.08 5.08 0 01-5 5H7a5 5 0 01-5-5 5.08 5.08 0 015-5zM39.9 19.7a5 5 0 115 5h-5zM37.4 19.7a5 5 0 01-10 0V7a5 5 0 015-5 5.08 5.08 0 015 5zM32.3 39.9a5 5 0 11-5 5v-5zM32.3 37.4a5 5 0 01-5-5 5.08 5.08 0 015-5H45a5 5 0 015 5 5.08 5.08 0 01-5 5z"></path>
+</g>
+    </svg>
+</template>

package/src/lightning/iconSvgTemplatesUtilityRtl/buildTemplates/utility/tableau.html

@@ -0,0 +1,7 @@
+<template>
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" viewBox="0 0 52 52">
+        <g>
+ <path d="M33.9 27.2h-6.6v7.2h-2.6v-7.2h-6.6v-2.6h6.6v-7.2h2.6v7.2h6.6zM20.7 36.5h-5.9v-6.6h-2.2v6.6h-6v2h6V45h2.2v-6.5h5.9zM45.5 13.2h-5.9V6.7h-2.2v6.5h-5.9v2.1h5.9v6.5h2.2v-6.5h5.9zM31 43.6h-4v-4.5h-1.9v4.5H21v1.8h4.1V50H27v-4.6h4zM20.7 13.2h-6V6.7h-2.1v6.5h-6v2h6v6.6h2.1v-6.6h6zM50 25h-4v-4.5h-1.9V25H40v1.8h4.1v4.5H46v-4.5h4zM45.5 36.5h-5.9v-6.6h-2.2v6.6h-5.9v2h5.9V45h2.2v-6.5h5.9zM30.7 6.5h-4V2h-1.4v4.5h-4v1.4h4v4.4h1.5V7.9h4zM11.4 25.2h-4v-4.4H6v4.4H2v1.4h4V31h1.4v-4.4h4z"></path>
+</g>
+    </svg>
+</template>

package/src/lightning/iconSvgTemplatesUtilityRtl/buildTemplates/utility/video_off.html

@@ -0,0 +1,7 @@
+<template>
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" viewBox="0 0 52 52">
+        <g>
+ <path d="M49.69 4.64l-.06-.07-2.2-2.21a1.81 1.81 0 00-2.53.35L34.4 13.18l-2.29 2.29H9.21a2.13 2.13 0 00-2.13 2.13v16.8a2.13 2.13 0 002.13 2.13h1.84L2.68 44.9a2 2 0 00-.32 2.52l2.21 2.21A1.75 1.75 0 007 49.38l.06-.07L49.32 7.09a1.75 1.75 0 00.37-2.45zM32.68 35.92a2.13 2.13 0 002.13-2.13v-4.34l8.6 6.15a.87.87 0 001.49-.6V17.82l-18.09 18.1z" fill-rule="evenodd"></path>
+</g>
+    </svg>
+</template>

package/src/lightning/input/__docs__/input.md

@@ -544,6 +544,8 @@ define a pattern for field validation.
 
 An input field for entering text. This is the default input type.
 
+The `value` attribute for this input type only supports string values. To clear a text field by setting the `value` attribute, use `""` to specify an empty string because `null` isn't supported.
+
 ```html
 <template>
     <lightning-input label="Name"> </lightning-input>

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;
+}