lightning-base-components 1.15.1-alpha → 1.15.4-alpha

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

@@ -6,7 +6,7 @@
             </template>
             {addressLabel}
         </legend>
-        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
         <div class="slds-form-element__control">
             <div class="slds-form-element__group">
                 <template if:true={showAddressLookup}>
@@ -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

@@ -1,9 +1,10 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
 import labelRequired from '@salesforce/label/LightningControl.required';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import locale from '@salesforce/i18n/locale';
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     normalizeBoolean,
@@ -31,6 +32,7 @@ const FIELD_TYPE = {
 
 const i18n = {
     required: labelRequired,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 /**
  * Represents an address compound field.
@@ -111,6 +113,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 +139,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 +484,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 +517,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,
@@ -669,4 +694,8 @@ export default class LightningInputAddress extends LightningElement {
             });
         }
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.addressLabel);
+    }
 }

package/src/lightning/inputLocation/inputLocation.html

@@ -2,7 +2,7 @@
     <fieldset class="slds-form-element">
         <legend class={computedLegendClass}>{label}</legend>
         <template if:true={fieldLevelHelp}>
-            <lightning-helptext content={fieldLevelHelp}></lightning-helptext>
+            <lightning-helptext content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
         </template>
         <div class="slds-form-element__control">
             <div class="slds-form-element__group">

package/src/lightning/inputLocation/inputLocation.js

@@ -3,8 +3,9 @@ import labelInvalidLatitude from '@salesforce/label/LightningInputLocation.inval
 import labelInvalidLongitude from '@salesforce/label/LightningInputLocation.invalidLongitude';
 import labelLatitude from '@salesforce/label/LightningInputLocation.latitude';
 import labelLongitude from '@salesforce/label/LightningInputLocation.longitude';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     normalizeBoolean,
@@ -26,6 +27,7 @@ const i18n = {
     invalidLongitude: labelInvalidLongitude,
     latitude: labelLatitude,
     longitude: labelLongitude,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 /**
@@ -394,4 +396,8 @@ export default class LightningInputLocation extends LightningElement {
             }
         );
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

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,12 +2,15 @@
     <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" aria-label={i18n.required}></span>
+            </template>
         </legend>
         <template if:true={fieldLevelHelp}>
-            <lightning-helptext content={fieldLevelHelp}></lightning-helptext>
+            <lightning-helptext content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
         </template>
         <div class="slds-form-element__control">
             <div class="slds-form-element__group">

package/src/lightning/inputName/inputName.js

@@ -6,8 +6,9 @@ import labelNone from '@salesforce/label/LightningInputName.none';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSalutation from '@salesforce/label/LightningInputName.salutation';
 import labelSuffix from '@salesforce/label/LightningInputName.suffix';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     normalizeBoolean,
@@ -47,6 +48,7 @@ const i18n = {
     required: labelRequired,
     salutation: labelSalutation,
     suffix: labelSuffix,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 /**
@@ -549,4 +551,8 @@ export default class LightningInputName extends LightningElement {
             });
         }
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

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/interactiveDialogBase/interactiveDialogBase.js

@@ -110,6 +110,7 @@ export default class LightningModal extends LightningModalBase {
     get computedModalCssClasses() {
         //waiting for x-small modal size
         const classes = classSet('slds-modal fix-slds-modal slds-modal_prompt');
+
         if (hasAnimation()) {
             classes.add({
                 'slds-fade-in-open': this.isModalTransitioningIn,

package/src/lightning/internationalizationLibrary/datetime/dateTimeOptions.js

@@ -1,13 +1,4 @@
-const FORMATTING_OPTS = [
-    'weekday',
-    'year',
-    'month',
-    'day',
-    'hour',
-    'minute',
-    'second',
-    'era',
-];
+// TODO: remove file when migrating off aura
 const FORMAT_MAP = {
     weekday: {
         short: 'EEE, ',
@@ -144,24 +135,22 @@ function getTimePart(format, options) {
     }
 }
 
-function DateTimeOptions(options) {
-    this.options = options || {};
-}
-
-DateTimeOptions.prototype.hasFormattingOptions = function () {
-    return FORMATTING_OPTS.some((opt) => {
-        return this.options[opt] !== undefined;
-    });
-};
-
-DateTimeOptions.prototype.getSkeleton = function () {
+/**
+ * Function translating provided date time options to a
+ * string that can be passed into Aura localization service.
+ *
+ * @param {Object} options - date time formatting options
+ * @returns {string} representing provided options as a string -
+ * e.g. "dd, MMM yyyy h:mm"
+ */
+export const getSkeleton = (options) => {
     const format = [];
-    getWeekDayPart(format, this.options);
-    getMonthPart(format, this.options);
-    getDayPart(format, this.options);
-    getYearPart(format, this.options);
-    getTimePart(format, this.options);
-    getTZPart(format, this.options);
+    getWeekDayPart(format, options);
+    getMonthPart(format, options);
+    getDayPart(format, options);
+    getYearPart(format, options);
+    getTimePart(format, options);
+    getTZPart(format, options);
     let formatStr = format.join('');
     SEPARATORS.forEach((element) => {
         if (formatStr.lastIndexOf(element) === formatStr.length - 1) {
@@ -170,5 +159,3 @@ DateTimeOptions.prototype.getSkeleton = function () {
     });
     return formatStr;
 };
-
-export { DateTimeOptions };