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

package/src/lightning/progressBar/progressBar.js

@@ -1,8 +1,12 @@
 import labelProgress from '@salesforce/label/LightningProgressBar.progress';
+import labelProgressBar from '@salesforce/label/LightningProgressBar.progressBar';
 
 import { LightningElement, track, api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import {
+    normalizeString as normalize,
+    isUndefinedOrNull,
+} from 'lightning/utilsPrivate';
 import { numberFormat } from 'lightning/internationalizationLibrary';
 
 // Temporary workaround until we get real label support. New label entries must
@@ -10,6 +14,7 @@ import { numberFormat } from 'lightning/internationalizationLibrary';
 // https://git.soma.salesforce.com/raptor/raptor/issues/196
 const i18n = {
     progress: labelProgress,
+    progressBar: labelProgressBar,
 };
 
 const DEFAULT_SIZE = 'medium';
@@ -29,6 +34,12 @@ export default class LightningProgressBar extends LightningElement {
      */
     @api value = 0;
 
+    /**
+     * Describes the input to assistive technologies.
+     * @type {string}
+     */
+    @api ariaLabel;
+
     /**
      * The variant changes the appearance of the progress bar.
      * Accepted variants include base or circular.
@@ -109,4 +120,10 @@ export default class LightningProgressBar extends LightningElement {
 
         return `${i18n.progress} ${formattedPercent}`;
     }
+
+    get computeAriaLabel() {
+        return isUndefinedOrNull(this.ariaLabel)
+            ? i18n.progressBar
+            : this.ariaLabel;
+    }
 }

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

@@ -0,0 +1,100 @@
+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.
+
+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.
+
+This example creates a prompt modal with a header, message, and two buttons. If you enter text and click **OK** in the prompt, the `.open()` function returns a promise that resolves to the input value. If you click **Cancel**, the function returns a promise that resolves to `null`.
+
+```html
+<!-- c/myApp.html -->
+<template>
+    <lightning-button onclick="{handlePromptClick}" label="Open Prompt Modal">
+    </lightning-button>
+</template>
+```
+
+```javascript
+import { LightningElement } from 'lwc';
+import LightningPrompt from 'lightning/prompt';
+
+export default class MyApp extends LightningElement {
+    handlePromptClick() {
+        LightningPrompt.open({
+            message: 'this is the prompt message',
+            //theme defaults to "default"
+            label: 'Please Respond', // this is the header text
+            defaultValue: 'initial input value', //this is optional
+        }).then((result) => {
+            //Prompt has been closed
+            //result is input text if OK clicked
+            //and null if cancel was clicked
+        });
+    }
+}
+```
+
+#### Component Styling
+
+This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blueprint](https://www.lightningdesignsystem.com/components/prompt/#site-main-content).
+
+`LightningPrompt` supports the following attributes:
+
+-   `message`: Message text that displays in the prompt.
+-   `defaultValue`: Optional. Initial leading text for the input text box.
+-   `label`: Header text, also used as the `aria-label`. Default string is `Prompt`.
+-   `variant`: Two values, `header` and `headerless`. Default value is `header`.
+-   `theme`: Color theme for the header. The `theme` attribute supports the following [options](https://www.lightningdesignsystem.com/utilities/themes/#site-main-content) from SLDS:
+    -   `default`: white
+    -   `shade`: gray
+    -   `inverse`: dark blue
+    -   `alt-inverse`: darker blue
+    -   `success`: green
+    -   `info`: gray-ish blue
+    -   `warning`: yellow
+    -   `error`: red
+    -   `offline`: ​black​
+
+If an invalid value is provided, `LightningPrompt` uses the `default` theme.
+
+#### Testing Your Component's Prompt
+
+Code using `LightningPrompt` can be tested by mocking the `LightningPrompt.open()` method.
+
+The example below uses a button to open a prompt dialog and sets the result in a template.
+
+```html
+<button data-button onclick="{handleClick}">Open Prompt</button>
+<div data-result>{result}</div>
+```
+
+```js
+import LightningPrompt from 'lightning/prompt';
+jest.mock('lightning/prompt');
+​
+test(() => {
+    // Create and appendChild(element)
+​
+    const buttonEle = element.shadowRoot.querySelector('[data-button]');
+    const resultEle = element.shadowRoot.querySelector('[data-result]');
+​
+    // Mock .open()
+    // Pass string representing input text if testing when user clicks "OK"
+    // Pass null if testing when user clicks "Cancel"
+    LightningPrompt.open = jest.fn().mockResolvedValue('test value');
+    // Initial value
+    expect(resultEle.textContent).toBe('unknown');
+    // Click modal open button
+    buttonEle.click();
+​
+    // Click handler render cycle
+    await Promise.resolve();
+    // Render cycle triggered by tracked value {result}
+    await Promise.resolve();
+​
+    // Verify result is set in the template
+    expect(resultEle.textContent).toBe('test value');
+    // Open triggered once
+    expect(LightningPrompt.open.mock.calls).toHaveLength(1);
+})
+```

package/src/lightning/prompt/__examples__disabled/basic/basic.css

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #FFF;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+}

package/src/lightning/prompt/__examples__disabled/basic/basic.html

@@ -0,0 +1,8 @@
+<template>
+    <div class="example">
+        <button
+            aria-haspopup="modal"
+            onclick={handlePromptModal}
+        >Open the Prompt Modal</button>
+    </div>
+</template>

package/src/lightning/prompt/__examples__disabled/basic/basic.js

@@ -0,0 +1,15 @@
+import { LightningElement } from 'lwc';
+import LightningPrompt from 'lightning/prompt';
+
+export default class PromptBasic extends LightningElement {
+    handlePromptModal() {
+        LightningPrompt.open({
+            message: 'this is the prompt message',
+            defaultValue: 'test',
+            label: 'Please Respond',
+            // use default theme
+        }).then((result) => {
+            console.log('prompt result', result);
+        });
+    }
+}

package/src/lightning/prompt/prompt.css

@@ -0,0 +1,81 @@
+.slds-form-element__label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    display: inline-block;
+    color: #444444;
+    font-size: 0.75rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    margin-bottom: 0.125rem;
+}
+.slds-form-element__label:empty {
+    margin: 0;
+}
+
+.slds-no-flex {
+    -webkit-box-flex: 0;
+    -ms-flex: none;
+    flex: none;
+}
+
+.slds-form-element__control {
+    clear: left;
+    position: relative;
+}
+
+.slds-grow {
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+}
+
+.slds-input {
+    padding-top: 0;
+    padding-right: var(--slds-c-input-spacing-horizontal-end, var(--sds-c-input-spacing-horizontal-end, 1rem));
+    padding-bottom: 0;
+    padding-left: var(--slds-c-input-spacing-horizontal-start, var(--sds-c-input-spacing-horizontal-start, 0.75rem));
+    width: 100%;
+    min-height: calc(1.875rem + (1px * 2));
+    line-height: 1.875rem;
+    border: 1px solid var(--slds-c-input-color-border, var(--sds-c-input-color-border, #c9c9c9));
+    border-radius: var(--slds-c-input-radius-border, var(--sds-c-input-radius-border, 0.25rem));
+    background-color: var(--slds-c-input-color-background, var(--sds-c-input-color-background, white));
+    color: var(--slds-c-input-text-color, var(--sds-c-input-text-color));
+    -webkit-box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
+    box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
+    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    transition: border 0.1s linear, background-color 0.1s linear;
+    display: inline-block;
+}
+.slds-input:focus,
+.slds-input:active {
+    /*! @css-var-fallback border-color */
+    border-color: var(--sds-c-input-color-border-focus, #1b96ff);
+    /*! @css-var-fallback background-color */
+    background-color: var(
+        --sds-c-input-color-background-focus,
+        var(--sds-c-input-color-background, white)
+    );
+    color: var(--sds-c-input-text-color-focus);
+    /*! @css-var-fallback box-shadow */
+    -webkit-box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px #0176d3);
+    box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px #0176d3);
+    outline: 0;
+}
+
+input {
+    line-height: normal;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+}
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}

package/src/lightning/prompt/prompt.html

@@ -0,0 +1,8 @@
+<template>
+    <label class="slds-form-element__label slds-no-flex" for="input">
+        {message}
+    </label>
+    <div class="slds-form-element__control slds-grow">
+        <input class="slds-input" id="input" value={defaultValue}/>
+    </div>
+</template>

package/src/lightning/prompt/prompt.js

@@ -0,0 +1,92 @@
+import { api } from 'lwc';
+import LightningInteractiveDialogBase from 'lightning/interactiveDialogBase';
+import { parent, instanceName, secure } from 'lightning/overlayUtils';
+import LightningOverlay from 'lightning/overlay';
+import labelDefault from '@salesforce/label/LightningPrompt.defaultLabel';
+
+/**
+ * Create a prompt modal within your component that asks the
+ * user to provide information before they continue.
+ */
+
+export default class LightningPrompt extends LightningOverlay {
+    static [instanceName] = 'lightning-prompt';
+    static [parent] = LightningInteractiveDialogBase;
+
+    /**
+     * value to use for header text in "header" variant
+     * or aria-label in "headerless" variant
+     * @type {string}
+     * @default "Prompt" (translated accordingly)
+     */
+    @api label = labelDefault;
+
+    /**
+     * text to display in modal
+     */
+    @api message = '';
+
+    /**
+     * default value for input
+     */
+    @api defaultValue = '';
+
+    /**
+     * variant to use for alert; may be
+     * set to "header" or "headerless"
+     */
+    @api variant = 'header';
+
+    /**
+     * theme to use when variant is "header"
+     * valid values are based on SLDS themes and are
+     * listed in "themeOptions" of interactiveDialogBase.js
+     */
+    @api theme = 'default';
+
+    /**
+     * Dispatches privateclose event
+     * and closes dialog
+     */
+    close(result) {
+        const promise = new Promise((resolve) => {
+            this.dispatchEvent(
+                new CustomEvent('privateclose', {
+                    detail: {
+                        resolve,
+                        [secure]: true,
+                    },
+                    bubbles: true,
+                })
+            );
+        });
+        super.close(result, promise);
+    }
+
+    /**
+     * Dispatches privatechildrender event
+     * with data parent needs to correctly render
+     */
+    renderedCallback() {
+        const evt = new CustomEvent('privatechildrender', {
+            bubbles: true,
+            detail: {
+                message: this.message,
+                label: this.label,
+                hideCancel: false,
+                showDescription: false,
+                getOkValue: this.getOkValue.bind(this),
+                getCancelValue: () => null,
+                role: 'dialog',
+            },
+        });
+        this.dispatchEvent(evt);
+    }
+
+    getOkValue() {
+        if (this.template.querySelector('input')) {
+            return this.template.querySelector('input').value;
+        }
+        return this.defaultValue;
+    }
+}

package/src/lightning/prompt/prompt.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+    <minApiVersion>54.0</minApiVersion>
+    <support>GA</support>
+</LightningComponentBundle>

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