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

package/src/lightning/textarea/textarea.js

@@ -1,8 +1,9 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
 import labelRequired from '@salesforce/label/LightningControl.required';
+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 {
     normalizeBoolean,
     synchronizeAttrs,
@@ -10,6 +11,7 @@ import {
     classListMutation,
     decorateInputForDragon,
     setDecoratedDragonInputValueWithoutEvent,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
     InteractingState,
@@ -22,6 +24,7 @@ import { TouchScroller } from 'lightning/touchScrollLibrary';
 
 const i18n = {
     required: labelRequired,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 /**
@@ -478,6 +481,14 @@ export default class LightningTextarea extends LightningElement {
         }
         return this._constraintApi;
     }
+
+    get computedAriaInvalid() {
+        return computeAriaInvalid(this._helpMessage, this.value);
+    }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }
 
 LightningTextarea.interopMap = {

package/src/lightning/timepicker/timepicker.html

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

@@ -4,25 +4,24 @@ import labelInvalidDate from '@salesforce/label/LightningDateTimePicker.invalidD
 import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeOverflow';
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
 import labelRequired from '@salesforce/label/LightningControl.required';
-import shortTimeFormat from '@salesforce/i18n/dateTime.shortTimeFormat';
-import mediumTimeFormat from '@salesforce/i18n/dateTime.mediumTimeFormat';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, track, api } from 'lwc';
 import { getTimeToHighlight } from './utils';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     isBefore,
     isAfter,
-    formatTime,
-    parseTime,
-    getISOTimeString,
     normalizeISOTime,
-    normalizeFormattedTime,
+    parseFormattedTime,
+    getTimeFormatFromStyle,
+    getISOTimeString,
 } from 'lightning/internationalizationLibrary';
 import { removeTimeZoneSuffix } from 'lightning/iso8601Utils';
 import {
     normalizeBoolean,
     synchronizeAttrs,
     normalizeString,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import { normalizeVariant, VARIANT } from 'lightning/inputUtils';
 
@@ -31,6 +30,7 @@ const i18n = {
     rangeOverflow: labelRangeOverflow,
     rangeUnderflow: labelRangeUnderflow,
     required: labelRequired,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 const STEP = 15; // in minutes
@@ -79,7 +79,10 @@ export default class LightningTimePicker extends LightningElement {
     get messageWhenBadInput() {
         return (
             this._messageWhenBadInput ||
-            formatLabel(i18n.invalidDate, this.timeFormat)
+            formatLabel(
+                i18n.invalidDate,
+                getTimeFormatFromStyle(this.timeStyle, true)
+            )
         );
     }
     set messageWhenBadInput(message) {
@@ -93,7 +96,7 @@ export default class LightningTimePicker extends LightningElement {
             this._messageWhenRangeOverflow ||
             formatLabel(
                 i18n.rangeOverflow,
-                normalizeISOTime(this.max, this.timeFormat).isoValue
+                normalizeISOTime(this.max, this.timeStyle).isoValue
             )
         );
     }
@@ -107,7 +110,7 @@ export default class LightningTimePicker extends LightningElement {
             this._messageWhenRangeUnderflow ||
             formatLabel(
                 i18n.rangeUnderflow,
-                normalizeISOTime(this.min, this.timeFormat).isoValue
+                normalizeISOTime(this.min, this.timeStyle).isoValue
             )
         );
     }
@@ -136,7 +139,7 @@ export default class LightningTimePicker extends LightningElement {
         const normalizedValue = removeTimeZoneSuffix(newValue);
         const normalizedTime = normalizeISOTime(
             normalizedValue,
-            this.timeFormat
+            this.timeStyle
         );
 
         this._value = normalizedTime.isoValue;
@@ -258,9 +261,8 @@ export default class LightningTimePicker extends LightningElement {
             fallbackValue: TIME_STYLE.SHORT,
             validValues: [TIME_STYLE.SHORT, TIME_STYLE.MEDIUM, TIME_STYLE.LONG],
         });
-        this.timeFormat = this.getTimeFormatFromStyle(this._timeStyle);
 
-        const normalizedDate = normalizeISOTime(this._value, this.timeFormat);
+        const normalizedDate = normalizeISOTime(this._value, this.timeStyle);
         this._displayValue = normalizedDate.displayValue;
     }
 
@@ -328,12 +330,17 @@ export default class LightningTimePicker extends LightningElement {
 
     buildTimeList() {
         // We should always display the options in the short style since m/l will add an extra :00 to the options.
-        const optionsTimeFormat = shortTimeFormat;
         const timeList = [];
-        const minTime = parseTime(removeTimeZoneSuffix(this.min));
+        const minTime = normalizeISOTime(
+            this.min,
+            TIME_STYLE.SHORT
+        ).parsedValue;
         const minHour = minTime ? minTime.getHours() : 0;
 
-        const maxTime = parseTime(removeTimeZoneSuffix(this.max));
+        const maxTime = normalizeISOTime(
+            this.max,
+            TIME_STYLE.SHORT
+        ).parsedValue;
         const maxHour = maxTime ? maxTime.getHours() + 1 : 24;
 
         const date = new Date();
@@ -350,11 +357,16 @@ export default class LightningTimePicker extends LightningElement {
                     break;
                 }
 
-                // @todo: should we always display it short in the combobox given that it makes no sense?
+                const isoTime = getISOTimeString(date);
+                const normalizedTime = normalizeISOTime(
+                    isoTime,
+                    TIME_STYLE.SHORT
+                );
+
                 timeList.push({
                     type: 'option-inline',
-                    text: this.format(date, optionsTimeFormat),
-                    value: this.format(date),
+                    text: normalizedTime.displayValue,
+                    value: isoTime,
                 });
             }
         }
@@ -395,17 +407,6 @@ export default class LightningTimePicker extends LightningElement {
         this._items = this.timeList;
     }
 
-    get timeFormat() {
-        if (!this._timeFormat) {
-            this._timeFormat = this.getTimeFormatFromStyle();
-        }
-        return this._timeFormat;
-    }
-
-    set timeFormat(value) {
-        this._timeFormat = value;
-    }
-
     getCombobox() {
         return this.template.querySelector('lightning-base-combobox');
     }
@@ -424,7 +425,11 @@ export default class LightningTimePicker extends LightningElement {
 
         // keeping the display value in sync with the element's value
         this._displayValue = event.detail.text;
-        this._value = this.parseFormattedTime(this._displayValue);
+        const { value, style } = parseFormattedTime(this._displayValue);
+        this._value = value;
+        if (style) {
+            this._timeStyle = style;
+        }
 
         this._items = this.timeList;
 
@@ -450,7 +455,7 @@ export default class LightningTimePicker extends LightningElement {
         this._value = event.detail.value;
         this._displayValue = normalizeISOTime(
             this._value,
-            this.timeFormat
+            this.timeStyle
         ).displayValue;
 
         this._items = this.timeList;
@@ -473,69 +478,16 @@ export default class LightningTimePicker extends LightningElement {
         );
     }
 
-    format(date, formatString) {
-        if (formatString) {
-            return formatTime(date, formatString);
-        }
-        return getISOTimeString(date);
-    }
-
     isBeforeMinTime(date, minTime) {
-        const minDate = minTime || parseTime(removeTimeZoneSuffix(this.min));
+        const minDate = minTime || normalizeISOTime(this.min, TIME_STYLE.SHORT);
         return minDate ? isBefore(date, minDate, 'minute') : false;
     }
 
     isAfterMaxTime(date, maxTime) {
-        const maxDate = maxTime || parseTime(removeTimeZoneSuffix(this.max));
+        const maxDate = maxTime || normalizeISOTime(this.max, TIME_STYLE.SHORT);
         return maxDate ? isAfter(date, maxDate, 'minute') : false;
     }
 
-    getTimeFormatFromStyle(timeStyle) {
-        let timeFormat;
-        switch (timeStyle) {
-            case TIME_STYLE.MEDIUM:
-            case TIME_STYLE.LONG:
-                timeFormat = mediumTimeFormat;
-                break;
-            default:
-                timeFormat = shortTimeFormat;
-                break;
-        }
-
-        return timeFormat;
-    }
-
-    get allowedTimeFormats() {
-        // the locale.timeFormat is the medium format. Locale dont supports a large
-        // time format at the moment.
-        return [mediumTimeFormat, shortTimeFormat];
-    }
-
-    /**
-     * Parses the input time and sets the timeFormat used to parse the displayValue
-     * if it is a valid time.
-     *
-     * @param {String} displayValue - The input date.
-     * @return {null | string} - A normalized formatted time if displayValue is valid. null otherwise.
-     */
-    parseFormattedTime(displayValue) {
-        const allowedFormats = this.allowedTimeFormats;
-        const n = allowedFormats.length;
-        let i = 0,
-            value = null;
-
-        do {
-            value = normalizeFormattedTime(displayValue, allowedFormats[i]);
-            i++;
-        } while (value === null && i < n);
-
-        if (value !== null) {
-            this.timeFormat = allowedFormats[i - 1];
-        }
-
-        return value;
-    }
-
     get hasExternalLabel() {
         return (
             this.variant === VARIANT.LABEL_HIDDEN &&
@@ -543,4 +495,15 @@ 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);
+    }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

package/src/lightning/utils/labelUtils.js

@@ -13,6 +13,9 @@ export function formatLabel(str) {
     }
 
     return str.replace(/{(\d+)}/g, (match, i) => {
-        return replacements[i];
+        const replacement = replacements[i];
+        return replacement !== null && replacement !== undefined
+            ? replacement
+            : '';
     });
 }

package/src/lightning/utilsPrivate/animation.js

@@ -8,10 +8,6 @@ export function hasAnimation() {
     if (isIE11) {
         return false;
     }
-    // JEST Workaround
-    if (!window.matchMedia) {
-        return true;
-    }
     const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
     return !(!mediaQuery || mediaQuery.matches);
 }

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/datatable/__examples__/basic/fetchDataHelper.js

@@ -1,21 +0,0 @@
-const recordMetadata = {
-    name: 'name',
-    email: 'email',
-    website: 'url',
-    amount: 'currency',
-    phone: 'phoneNumber',
-    closeAt: 'dateInFuture',
-};
-
-export default function fetchDataHelper({ amountOfRecords }) {
-    return fetch('https://data-faker.herokuapp.com/collection', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify({
-            amountOfRecords,
-            recordMetadata,
-        }),
-    }).then((response) => response.json());
-}

package/src/lightning/datatable/__examples__/withInfiniteLoading/fetchDataHelper.js

@@ -1,21 +0,0 @@
-const recordMetadata = {
-    name: 'name',
-    email: 'email',
-    website: 'url',
-    amount: 'currency',
-    phone: 'phoneNumber',
-    closeAt: 'dateInFuture',
-};
-
-export default function fetchData(amountOfRecords) {
-    return fetch('https://data-faker.herokuapp.com/collection', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify({
-            amountOfRecords,
-            recordMetadata,
-        }),
-    }).then((response) => response.json());
-}

package/src/lightning/datatable/__examples__/withInlineEdit/fetchDataHelper.js

@@ -1,21 +0,0 @@
-const recordMetadata = {
-    name: 'name',
-    email: 'email',
-    website: 'url',
-    amount: 'currency',
-    phone: 'phoneNumber',
-    closeAt: 'dateInFuture',
-};
-
-export default function fetchDataHelper({ amountOfRecords }) {
-    return fetch('https://data-faker.herokuapp.com/collection', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify({
-            amountOfRecords,
-            recordMetadata,
-        }),
-    }).then((response) => response.json());
-}

package/src/lightning/datatable/__examples__/withRowActions/fetchDataHelper.js

@@ -1,21 +0,0 @@
-const recordMetadata = {
-    name: 'name',
-    email: 'email',
-    website: 'url',
-    amount: 'currency',
-    phone: 'phoneNumber',
-    closeAt: 'dateInFuture',
-};
-
-export default function fetchDataHelper({ amountOfRecords }) {
-    return fetch('https://data-faker.herokuapp.com/collection', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify({
-            amountOfRecords,
-            recordMetadata,
-        }),
-    }).then((response) => response.json());
-}

package/src/lightning/datatable/__examples__/withRowNumbers/fetchDataHelper.js

@@ -1,21 +0,0 @@
-const recordMetadata = {
-    name: 'name',
-    email: 'email',
-    website: 'url',
-    amount: 'currency',
-    phone: 'phoneNumber',
-    closeAt: 'dateInFuture',
-};
-
-export default function fetchDataHelper({ amountOfRecords }) {
-    return fetch('https://data-faker.herokuapp.com/collection', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify({
-            amountOfRecords,
-            recordMetadata,
-        }),
-    }).then((response) => response.json());
-}

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');
-    });
-});