lightning-base-components 1.15.2-alpha → 1.15.3-alpha

package/src/lightning/timepicker/timepicker.js

@@ -4,19 +4,17 @@ 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 {
@@ -32,6 +30,7 @@ const i18n = {
     rangeOverflow: labelRangeOverflow,
     rangeUnderflow: labelRangeUnderflow,
     required: labelRequired,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 const STEP = 15; // in minutes
@@ -80,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) {
@@ -94,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
             )
         );
     }
@@ -108,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
             )
         );
     }
@@ -137,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;
@@ -259,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;
     }
 
@@ -329,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();
@@ -351,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,
                 });
             }
         }
@@ -396,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');
     }
@@ -425,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;
 
@@ -451,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;
@@ -474,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 &&
@@ -551,4 +502,8 @@ export default class LightningTimePicker extends LightningElement {
             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/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());
-}