lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/inputAddress/inputAddress.html

@@ -16,7 +16,7 @@
         ></lightning-helptext>
         <div class="slds-form-element__control">
             <div class="slds-form-element__group">
-                <template if:true={showAddressLookup}>
+                <template if:true={showDedicatedLookupAddressField}>
                     <div class="slds-form-element__row slds-grow">
                         <lightning-lookup-address
                             class="slds-form-element slds-size_6-of-6"

package/src/lightning/inputAddress/inputAddress.js

@@ -196,6 +196,14 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         });
     }
 
+    renderedCallback() {
+        if (!this.template.synthetic) {
+            // Fieldset receives focus events in native shadow, which impacts tooltip behavior (See: W-14889039)
+            const fieldset = this.template.querySelector('fieldset');
+            fieldset.setAttribute('tabindex', '-1');
+        }
+    }
+
     disconnectedCallback() {
         this._connected = false;
     }
@@ -493,8 +501,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         reflectAttribute(this, 'variant', this.variant);
     }
 
-    get showCompactAddressLookup() {
-        return this._showAddressLookup && this._showCompactAddress;
+    get showDedicatedLookupAddressField() {
+        return this._showAddressLookup && !this._showCompactAddress;
     }
 
     get computedFieldsetClass() {
@@ -526,12 +534,18 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                 maxlength: 255,
                 type: FIELD_TYPE.TEXTAREA,
             },
-            addressLine1: {
+            addressLine1Lookup: {
                 autocomplete: 'address-line1',
                 name: 'street',
                 maxlength: 80,
                 type: FIELD_TYPE.LOOKUP_ADDRESS,
             },
+            addressLine1: {
+                autocomplete: 'address-line1',
+                name: 'street',
+                maxlength: 80,
+                type: FIELD_TYPE.INPUT,
+            },
             addressLine2: {
                 autocomplete: 'address-line2',
                 name: 'subpremise',
@@ -573,21 +587,23 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         const hasCountryPicklist =
             this.fieldsTypeMeta.country.type === FIELD_TYPE.PICKLIST;
         const [langCode, countryCode] = this.locale.split('-');
-        return getInputOrder(
-            langCode,
+        return getInputOrder({
             countryCode,
             hasCountryPicklist,
-            this._showCompactAddress
-        );
+            langCode,
+            showAddressLookup: this._showAddressLookup,
+            showCompactAddress: this._showCompactAddress,
+        });
     }
 
     get requiredFields() {
         const [langCode, countryCode] = this.locale.split('-');
-        return getRequiredFields(
-            langCode,
+        return getRequiredFields({
             countryCode,
-            this._showCompactAddress
-        );
+            langCode,
+            showAddressLookup: this._showAddressLookup,
+            showCompactAddress: this._showCompactAddress,
+        });
     }
 
     get fieldsMeta() {

package/src/lightning/inputLocation/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/inputLocation/input-text.slds.css

@@ -254,7 +254,7 @@
         );
         --sds-c-inputtext-color-border: var(
             --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-1)
+            var(--slds-g-color-border-2)
         );
         --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
         --sds-c-inputtext-radius-border: var(
@@ -330,7 +330,7 @@
     }
 :host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
        --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
        --sds-c-inputtext-color-background: transparent;
 
        outline: 0;
@@ -367,9 +367,9 @@
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-g-color-disabled-container-1);
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
+        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
+        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
 /**
    * Label

package/src/lightning/inputName/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/inputName/input-text.slds.css

@@ -254,7 +254,7 @@
         );
         --sds-c-inputtext-color-border: var(
             --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-1)
+            var(--slds-g-color-border-2)
         );
         --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
         --sds-c-inputtext-radius-border: var(
@@ -330,7 +330,7 @@
     }
 :host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
        --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
        --sds-c-inputtext-color-background: transparent;
 
        outline: 0;
@@ -367,9 +367,9 @@
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-g-color-disabled-container-1);
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
+        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
+        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
 /**
    * Label

package/src/lightning/internationalizationLibrary/address/AddressFormat.js

@@ -2,6 +2,8 @@
 // https://git.soma.salesforce.com/Globalization/address.js
 // For new versions, copy AddressFormat.js from node_modules/address.js/dist/AddressFormat.js
 // And add "export { address };" at the end.
+// If the node modules file doesn't reflect the current code in the address.js github repo linked above,
+// then manually generate the AddressFormat.js file from the above globalization repo following the steps in its readMe
 
 /* eslint-disable */
 function _toPrimitive(t, r) {

package/src/lightning/layout/__docs__/layout.md

@@ -125,8 +125,6 @@ For more information, see the [SLDS grid utility classes](https://lightningdesig
 
 #### Usage Considerations
 
-`lightning-layout` is not supported in IE11. To create a flexible grid system for IE11, use `<div>` containers with SLDS grid classes.
-
 This example creates the same layout shown in **Creating Columns**,
 which creates two columns with fixed widths.
 

package/src/lightning/lookupAddress/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/menuItem/menu-item.slds.css

@@ -18,7 +18,7 @@
     gap: var(--slds-g-spacing-2);
     position: relative;
     padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3);
-    color: var(--slds-g-color-neutral-base-10);
+    color: var(--slds-g-color-on-surface-3);
     line-height: var(--slds-g-font-lineheight-4);
     font-weight: var(--slds-g-font-weight-4);
     white-space: nowrap;
@@ -30,11 +30,13 @@
     outline: 0;
     text-decoration: none;
     background-color: var(--slds-g-color-surface-container-2);
+    color: var(--slds-g-color-on-surface-3);
   }
 
   :host([data-render-mode="shadow"]) a:active {
     text-decoration: none;
     background-color: var(--slds-g-color-surface-container-2);
+    color: var(--slds-g-color-on-surface-3);
   }
 
   :host([data-render-mode="shadow"]) a[aria-disabled='true'] {

package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js

@@ -54,8 +54,10 @@ const MODAL_FOOTER = 'lightning-modal-footer';
 // inner modal specific details ===========================
 
 // close button variants
-const MODAL_CLOSE_BUTTON_VARIANT = 'bare';
+const MODAL_CLOSE_BUTTON_FULL_VARIANT = 'bare';
+const MODAL_CLOSE_BUTTON_NORMAL_VARIANT = 'bare-inverse';
 const MODAL_CLOSE_BTN_CLASS = 'slds-modal__close';
+const MODAL_CLOSE_BTN_SELECTOR = `.${MODAL_CLOSE_BTN_CLASS}`;
 const MODAL_CLOSE_BTN_FULL_CLASS = 'slds-modal_full-close-button';
 // modal screen size testing
 // utilized by full screen modal tests
@@ -158,7 +160,7 @@ const NAME_TO_SIZE = {
 // suites for modal utilize this map
 const SPEC_TO_TABS_TO_CLOSE_BTN = {
     accessibility: {
-        footless: 1,
+        footless: -1,
         headless: -3,
     },
 };
@@ -247,9 +249,11 @@ module.exports = {
     FOCUS_TRAP,
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
+    MODAL_CLOSE_BTN_SELECTOR,
     MODAL_CLOSE_BTN_FULL_CLASS,
     MODAL_DATA_SELECTOR,
-    MODAL_CLOSE_BUTTON_VARIANT,
+    MODAL_CLOSE_BUTTON_FULL_VARIANT,
+    MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_SMALL,
     SCREEN_SIZE_SMALL_MID,
     SCREEN_SIZE_MEDIUM,

package/src/lightning/modal/__modalUtils__/modalContainerTestMethods.js

@@ -19,7 +19,8 @@ const {
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
     MODAL_CLOSE_BTN_FULL_CLASS,
-    MODAL_CLOSE_BUTTON_VARIANT,
+    MODAL_CLOSE_BUTTON_FULL_VARIANT,
+    MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_LARGE,
     MODAL_SIZE_FULL,
     MODAL_FULL_SCREEN_SMALL_BREAKPOINT,
@@ -158,6 +159,9 @@ async function getModalInternals(config, modalIndex = 0) {
             MODAL_ARIALIVE_SELECTOR
         );
 
+        // get modal close button
+        modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
+
         // get modal div slot (not an actual slot)
         modalDataSlot = await modalSectionElem.$(MODAL_DIV_SLOT);
         // get div[data-container].slds-modal__container
@@ -169,14 +173,10 @@ async function getModalInternals(config, modalIndex = 0) {
         // but in our examples it's always present
         modalBodyElem = await modalElem.shadow$(MODAL_BODY);
 
-        // Headless modal variant has the close button inside modalBase
-        if (isModalOfVariantType(modalVariantType, 'headless')) {
-            // get modal close button
-            modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
-        } else {
-            // get lightning-modal-header and modal close lightning-button
+        // skip looking for modalHeader when type of modal is 'headless'
+        if (!isModalOfVariantType(modalVariantType, 'headless')) {
+            // get lightning-modal-header, it doesn't always exist
             modalHeaderElem = await modalElem.shadow$(MODAL_HEADER);
-            modalCloseButton = await modalHeaderElem.shadow$(MODAL_CLOSE_BTN);
         }
 
         // skip looking for modalHeader when type of modal is 'footless'
@@ -331,7 +331,6 @@ async function validateModalCloseButtonAttributes(config) {
     // screen behavior occur below
     expect(modalCloseButtonVariant).not.toBeNull();
     expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_CLASS);
-    expect(modalCloseButtonVariant).toEqual(MODAL_CLOSE_BUTTON_VARIANT);
 
     // the only time size='full' actual renders full page width and height
     // is when windowWidth is set <= 480px (30em)
@@ -339,8 +338,16 @@ async function validateModalCloseButtonAttributes(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
+        expect(modalCloseButtonVariant).toEqual(
+            MODAL_CLOSE_BUTTON_FULL_VARIANT
+        );
+
         expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_FULL_CLASS);
     } else {
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px (30em)) are normal modal behavior
+        expect(modalCloseButtonVariant).toEqual(
+            MODAL_CLOSE_BUTTON_NORMAL_VARIANT
+        );
         expect(modalCloseButtonCssClass).not.toContain(
             MODAL_CLOSE_BTN_FULL_CLASS
         );
@@ -490,7 +497,7 @@ async function validateModalHeightBehavior(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        // in full screen mode, the modal utilzes more than 92%
+        // in full screen mode, the modal utilizes more than 92%
         // of the screen height
         expect(percentPageHeightUtilized).toBeGreaterThan(
             MODAL_FULL_SCREEN_USE_PERCENT
@@ -505,7 +512,7 @@ async function validateModalHeightBehavior(config) {
 
         // default modal behavior scenario
     } else {
-        // in default modal behavior, the modal utilzes less than 88%
+        // in default modal behavior, the modal utilizes less than 88%
         // of the screen height
         expect(percentPageHeightUtilized).toBeLessThan(
             MODAL_DEFAULT_SCREEN_USE_PERCENT

package/src/lightning/modal/__modalUtils__/modalContainerTestMockData.js

@@ -5,7 +5,7 @@ const formData = [
         name: null,
         value: null,
         type: 'heading',
-        numTabsToNext: 2,
+        numTabsToNext: 1,
     },
     {
         name: 'assignedTo',

package/src/lightning/modalBase/modalBase.css

@@ -1,2 +1,6 @@
 @import './modalBase.lbc.synthetic.css';
 @import './modalBase.lbc.native.css';
+
+div[data-slot] {
+    display: contents;
+}

package/src/lightning/modalBase/modalBase.html

@@ -18,7 +18,6 @@
             onprivatemodalfooterregister={handleFooterRegister}
             onprivateclose={handlePrivateClose}
             onprivatedisableclosebutton={handlePrivateDisableCloseButton}
-            onprivatemodalheaderclose={handleModalHeaderCloseClick}
             data-modal
         >
             <template if:true={showAriaDescribedBy}>
@@ -36,26 +35,22 @@
                     data-aria-live-message
                 >{ariaLiveMessage}</span>
             </template>
-                <div
-                    class="slds-modal__container"
-                    data-container
-                >
-                    <template if:true={isHeadlessModalVariant}>
-                        <div class="slds-modal__header slds-text-align_left slds-modal__header_empty">
-                            <lightning-button-icon
-                                    class="slds-modal__close"
-                                    icon-name="utility:close"
-                                    variant="bare"
-                                    alternative-text={closeButtonAltText}
-                                    onclick={handleCloseClick}
-                                    size="large"
-                                    disabled={disableCloseButton}
-                                    data-close-button
-                            ></lightning-button-icon>
-                        </div>
-                    </template>
-                    <div data-slot lwc:dom="manual"></div>
-                </div>
+            <div
+                class="slds-modal__container"
+                data-container
+            >
+                <lightning-button-icon
+                    class={computedCloseButtonCssClass}
+                    icon-name="utility:close"
+                    variant={computedCloseButtonVariant}
+                    alternative-text={closeButtonAltText}
+                    onclick={handleCloseClick}
+                    size="large"
+                    disabled={disableCloseButton}
+                    data-close-button
+                ></lightning-button-icon>
+                <div data-slot lwc:dom="manual"></div>
+            </div>
         </section>
     </lightning-focus-trap>
 </template>