lightning-base-components 1.18.7-alpha → 1.18.8-alpha

package/src/lightning/inputUtils/inputUtils.js

@@ -6,23 +6,18 @@ export {
     FieldConstraintApiWithProxyInput,
     FieldConstraintApi,
 } from './validity';
-export { normalizeVariant, VARIANT } from './normalize';
-
-export function isEmptyString(s) {
-    return (
-        s === undefined ||
-        s === null ||
-        (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;
-}
+export { normalizeInput, normalizeVariant, VARIANT } from './normalize';
+export { isValidEmail, isValidMultipleEmails } from './email';
+export {
+    calculateFractionDigitsFromStep,
+    formatNumber,
+    fromIsoDecimal,
+    hasValidNumberShortcut,
+    hasValidNumberSymbol,
+    increaseNumberByStep,
+    isValidNumber,
+    isValidNumberCharacter,
+    stringifyNumber,
+    toIsoDecimal,
+} from './number';
+export { isEmptyString, isEmptyObject } from './utils';

package/src/lightning/inputUtils/normalize.js

@@ -23,3 +23,10 @@ export function normalizeVariant(value) {
         ],
     });
 }
+
+export function normalizeInput(value) {
+    if (typeof value === 'number' || typeof value === 'string') {
+        return String(value);
+    }
+    return '';
+}

package/src/lightning/{input/numberUtil.js → inputUtils/number.js}

@@ -5,7 +5,7 @@ import {
     toLocalizedDigits,
     numberFormat,
 } from 'lightning/internationalizationLibrary';
-import { isEmptyString } from 'lightning/inputUtils';
+import { isEmptyString } from './utils';
 import { normalizeNumber } from 'lightning/utilsPrivate';
 
 const VALID_NUMBER_CHARACTERS_EXPRESSION = new RegExp(

package/src/lightning/inputUtils/utils.js

@@ -0,0 +1,18 @@
+export function isEmptyString(s) {
+    return (
+        s === undefined ||
+        s === null ||
+        (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/layout/layout.js

@@ -12,6 +12,7 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
  * Represents a responsive grid system for arranging containers on a page.
  */
 export default class LightningLayout extends LightningElement {
+    static validationOptOut = ['class'];
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.

package/src/lightning/layoutItem/layoutItem.js

@@ -14,6 +14,7 @@ import {
  * @slot default Placeholder for your content in lightning-layout-item.
  */
 export default class LightningLayoutItem extends LightningElement {
+    static validationOptOut = ['class'];
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:

package/src/lightning/modal/__docs__/modal.md

@@ -378,7 +378,7 @@ See [Create and Dispatch Events](https://developer.salesforce.com/docs/component
 
 #### Modal Events with LWS and Lightning Locker
 
-Modal events work as expected when Lightning Web Security (LWS) is enabled within a Salesforce org, as described in the **Modal Events** section. If LWS isn't enabled in an org, Lightning Locker is in effect. 
+Modal events work as expected when Lightning Web Security (LWS) is enabled within a Salesforce org, as described in the **Modal Events** section. If LWS isn't enabled in an org, Lightning Locker is in effect.
 
 LWS is replacing Lightning Locker over time and is already enabled in many customer orgs. New orgs have LWS enabled by default. To enable LWS, see [Enable Lightning Web Security in an Org](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/security_lwsec_enable) in the Lightning Web Components Developer Guide.
 
@@ -388,7 +388,7 @@ Under Lightning Locker, when you fire events within `LightningModal`, the browse
 
 For `LightningModal`, only the top level LWC component or application can communicate to the parent Aura component or application layer with eventing. This topmost component is usually the one that opens the `LightningModal`. `LightningModal`'s child components can't event to a parent Aura component or application layer.
 
-All required eventing that should occur during the `LightningModal`'s life cycle must be passed in when you call `Modal.open()`. See `onselect` within `.open()` in the **Modal Events** section. 
+All required eventing that should occur during the `LightningModal`'s life cycle must be passed in when you call `Modal.open()`. See `onselect` within `.open()` in the **Modal Events** section.
 
 If you want the Aura layer to respond to events within child components embedded in the `LightningModal`, use event bubbling to move any data that you want to make available to the Aura layer into the topmost LWC component that opened the modal. Then, send the event from the LWC component.
 
@@ -407,7 +407,7 @@ These extracting methods fit into the larger LWC Modal-to-Aura event workflow.
 
 For more information, see [Send Events to an Enclosing Aura Component](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_sending_to_aura_components) and [Events Best Practices](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_best_practices).
 
-Let's see this workflow in action. In this example, we'll create a button (`lightning-button`) that launches a modal (`LightningModal`) containing a tree grid component (`lightning-tree-grid`) with a button in each record row that automatically navigates our user to that record's page (`lightning-navigation`). This use case requires data passing between our LWC components and a parent Aura component. 
+Let's see this workflow in action. In this example, we'll create a button (`lightning-button`) that launches a modal (`LightningModal`) containing a tree grid component (`lightning-tree-grid`) with a button in each record row that automatically navigates our user to that record's page (`lightning-navigation`). This use case requires data passing between our LWC components and a parent Aura component.
 
 Because `lightning-navigation` requires you to pass in a `recordId` to construct a page reference, we need to pass the record's data out of `LightningModal`, and then use the methods provided by `lightning-navigation`. With modal's limitations for event bubbling to the Aura layer, we can't just wrap the button or treegrid with `lightning-navigation`. We need to pull that data up to the topmost LWC component, where the `LightningModal` `.open()` is called, for our Aura wrapper to handle the navigation.
 
@@ -592,3 +592,102 @@ The `lightning-modal-header` component renders the `label` value in an `<h1>` el
 
 To include tagline text or link content for the header section, add it between the `<lightning-modal-header>` tags.
 
+#### Unit Testing
+
+Writing unit tests for `LightningModal` requires two sets of tests.
+1. Parent components that use `c/myModal` define a mocked result when `.open()` is called during a test run. This mock speeds up testing and prevents repetition while testing actions that trigger modals.
+2. The unit tests for `c/myModal` test the end-to-end functionality of the modal as a self contained component.
+
+This example is a mock of a component called myModal. The parent component uses the modal to mock the `c/myModal` component's `.open` method. The mock `.open` resolves a constant value without opening the MyModal component. This example uses a button to open a modal and set the result in the template.
+
+```html
+<!-- c/myApp.html -->
+<button data-button onclick={handleClick}>Select Item</button>
+<div data-result>{result}</div>
+```
+
+```js
+/* myApp.spec.js */
+
+import MyModal from 'c/myModal';
+jest.mock('c/myModal');
+
+test(() => {
+    // Create and appendChild(element)
+
+    const buttonEle = element.shadowRoot.querySelector('[data-button]');
+    const resultEle = element.shadowRoot.querySelector('[data-result]');
+
+    // Mock .open() to resolve result 'option1'
+    MyModal.open = jest.fn().mockResolvedValue('option1');
+    // Initial value
+    expect(resultEle.textContent).toBe(undefined);
+    // 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 prompt template
+    expect(resultEle.textContent).toBe('option1');
+    // Open triggered once
+    expect(MyModal.open.mock.calls).toHaveLength(1);
+})
+```
+
+This example contains the unit tests for the actual `c/myModal` component. The tests use shorthand selectors to make unit testing more concise. For more information, see **Shorthand Selectors for `LightningModal`**.
+
+```js
+/* myModal.spec.js */
+
+import { createElement } from 'lwc';
+import MyModal from 'c/myModal';
+
+describe('c-my-modal', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('should select body elements', async () => {
+        const element = createElement('c-mymodal', {
+            is: MyModal
+        });
+        document.body.appendChild(element);
+
+        // If element apis are modified after appendChild
+        // await Promise.resolve();
+
+        // using shorthand selector for modalBody
+        // see list of selectors below
+        expect(element.modalBody$('button').textContent).toBe('hello world');
+    });
+});
+```
+
+#### Shorthand Selectors for `LightningModal`
+
+The stubs for `LightningModal` have shorthand selectors to make unit testing more concise. These are all the shorthand selectors for unit testing that you can use with `LightningModal`.
+
+- `element.closeValue` - Value passed into `this.close(value)`
+- `element.modalHeader$()` - querySelect a single node in `lightning-modal-header`
+  - Usage: `element.modalHeader$('a')` Returns first link
+- `element.modalHeader$$()` - querySelectAll multiple nodes in `lightning-modal-header`
+  - Usage:
+    - `elem.modalHeader$$()` Returns all nodes in header
+    - `elem.modalHeader$$('a')` Returns all links in header
+- `element.modalBody$()` - querySelect a single node in `lightning-modal-body`
+  - Usage: `element.modalBody$('button')` Returns first button
+- `element.modalBody$$()` - querySelectAll multiple nodes in `lightning-modal-body`
+  - Usage:
+    - `elem.modalBody$$()` Returns all nodes in body
+    - `elem.modalBody$$('button, [data-button]')` Returns buttons in body
+- `element.modalFooter$()` - querySelect a single node in `lightning-modal-footer`
+  - Usage: `element.modalFooter$('button')` Returns first button
+- `element.modalFooter$$()` - querySelectAll multiple nodes in `lightning-modal-footer`
+  - Usage:
+    - `elem.modalFooter$$()` Returns all nodes in footer
+    - `elem.modalFooter$$('button, [data-button]')` Returns buttons in footer

package/src/lightning/pill/avatar.slds.css

@@ -44,7 +44,7 @@
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -74,7 +74,7 @@
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -159,7 +159,7 @@
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;
@@ -185,7 +185,7 @@
     white-space: nowrap !important;
   }
 
-  :host([data-render-mode="shadow"]) [part~='avatar'] {
+  :host([data-render-mode="shadow"]) [part='avatar'] {
     width: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
     height: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
     overflow: hidden;
@@ -197,28 +197,28 @@
     color: var(--slds-c-avatar-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='x-small']) [part='avatar'] {
     width: var(--sds-g-sizing-6, 1.25rem);
     height: var(--sds-g-sizing-6, 1.25rem);
     font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
     --slds-c-icon-sizing: var(--sds-g-sizing-6, 1.25rem);
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='small']) [part='avatar'] {
     width: var(--sds-g-sizing-7, 1.5rem);
     height: var(--sds-g-sizing-7, 1.5rem);
     font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size='medium']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='medium']) [part='avatar'] {
     width: var(--sds-g-sizing-9, 2rem);
     height: var(--sds-g-sizing-9, 2rem);
     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
     --slds-c-icon-sizing: var(--sds-g-sizing-9, 2rem);
   }
 
-  :host([data-render-mode="shadow"][size='large']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='large']) [part='avatar'] {
     width: var(--sds-g-sizing-10, 3rem);
     height: var(--sds-g-sizing-10, 3rem);
     font-size: var(--sds-g-font-scale-1, 1.125rem);
@@ -226,11 +226,11 @@
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant='circle']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
     border-radius: calc(var(--sds-g-radius-border-circle, 100%) / 2);
   }
 
-  :host([data-render-mode="shadow"].slds-avatar_empty) [part~='avatar'] {
+  :host([data-render-mode="shadow"].slds-avatar_empty) [part='avatar'] {
     border: var(--sds-g-sizing-border-1, 1px) dashed var(--sds-g-color-neutral-base-90, #e5e5e5);
   }
 

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -84,7 +84,7 @@
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -114,7 +114,7 @@
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -199,7 +199,7 @@
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;
@@ -213,7 +213,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
   /* :host::part(color-picker-button), */
-  :host([data-render-mode="shadow"]) [part~='color-picker-button'] {
+  :host([data-render-mode="shadow"]) [part='color-picker-button'] {
     --slds-c-icon-color-foreground: var(
       --slds-c-colorpickerbutton-color-foreground,
       var(--sds-g-color-neutral-base-50, #747474)
@@ -239,8 +239,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     cursor: pointer;
   }
 
-  :host([data-render-mode="shadow"]) [part~='color-picker-button']:hover,:host([data-render-mode="shadow"]) 
-  [part~='color-picker-button']:focus {
+  :host([data-render-mode="shadow"]) [part='color-picker-button']:hover,:host([data-render-mode="shadow"]) 
+  [part='color-picker-button']:focus {
     --slds-c-colorpickerbutton-color-background: var(--slds-c-colorpickerbutton-color-background-hover);
     --slds-c-colorpickerbutton-color-border: var(--slds-c-colorpickerbutton-color-border-hover);
     --slds-c-colorpickerbutton-color-foreground: var(
@@ -248,7 +248,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       var(--sds-g-color-brand-base-30, #014486)
     );
   }
-  :host([data-render-mode="shadow"]) [part~='color-picker-button']:focus {
+  :host([data-render-mode="shadow"]) [part='color-picker-button']:focus {
     --slds-c-colorpickerbutton-shadow: var(
       --slds-c-colorpickerbutton-shadow-focus,
       0 0 3px var(--sds-g-color-brand-base-50, #0176d3)
@@ -257,7 +257,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     outline: 0;
   }
 
-  :host([data-render-mode="shadow"]) [part~='color-picker-button']:active {
+  :host([data-render-mode="shadow"]) [part='color-picker-button']:active {
     --slds-c-colorpickerbutton-color-background: var(--slds-c-colorpickerbutton-color-background-active);
     --slds-c-colorpickerbutton-color-border: var(
       --slds-c-colorpickerbutton-color-border-active,
@@ -271,7 +271,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     outline: 0;
   }
 
-  :host([data-render-mode="shadow"]) [part~='color-picker-button'] .slds-swatch {
+  :host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-swatch {
     display: inline-block;
     vertical-align: middle;
     height: 1.25rem;

package/src/lightning/primitiveIcon/icon.slds.css

@@ -84,7 +84,7 @@
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -114,7 +114,7 @@
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -199,7 +199,7 @@
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;