lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/lookupAddress/lookupAddress.html

@@ -1,6 +1,9 @@
 <template>
     <template if:true={_isLoaded}>
-        <label class={computedLabelClass}>
+        <label
+            class={computedLabelClass}
+            part="label"
+        >
             {label}
         </label>
         <div class="slds-form-element__control">
@@ -18,14 +21,14 @@
                 onselect={handleSelect}
                 onready={handleComboboxReady}
                 attribution-logo-url={_googleLogoUrl}
-                attribution-logo-assistive-text={_googleLogoText}>
-            </lightning-base-combobox>
+                attribution-logo-assistive-text={_googleLogoText}
+            ></lightning-base-combobox>
         </div>
-
     </template>
-    <lightning-primitive-iframe style="display:none"
-                src={apiSrc}
-                domain={apiDomain}
-                oniframeload={handleIframeLoad}>
-    </lightning-primitive-iframe>
+    <lightning-primitive-iframe
+        style="display:none"
+        src={apiSrc}
+        domain={apiDomain}
+        oniframeload={handleIframeLoad}
+    ></lightning-primitive-iframe>
 </template>

package/src/lightning/lookupAddress/lookupAddress.js

@@ -1,7 +1,8 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
 import lang from '@salesforce/i18n/lang';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { toHighlightParts } from './highlight';
 import { classSet } from 'lightning/utils';
 import { normalizeVariant, VARIANT, debounce } from 'lightning/inputUtils';
@@ -28,7 +29,7 @@ const EVENT_NAME = {
     PLACE_API_READY: 'place-api-ready',
 };
 
-export default class LightningLookupAddress extends LightningElement {
+export default class LightningLookupAddress extends LightningShadowBaseClass {
     @api label;
     @api inputText = '';
     @api placeholder;
@@ -52,6 +53,7 @@ export default class LightningLookupAddress extends LightningElement {
     });
 
     connectedCallback() {
+        super.connectedCallback();
         this._items = [];
         this._dispatchId = registerMessageHandler((event) => {
             this.handleMessage(event);

package/src/lightning/lookupAddress/lookupAddress.lbc.native.css

@@ -0,0 +1,4 @@
+@import 'lightning/sldsCommon';
+@import './form-element.slds.css';
+@import './lookup-address.slds.css';
+

package/src/lightning/menuDivider/menu-divider.slds.css

@@ -4,12 +4,12 @@
 
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) .slds-has-divider_top {
-    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
   }
 
   :host([data-render-mode="shadow"]) .slds-has-divider_top-space {
-    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-    margin-top: var(--sds-g-spacing-2, 0.5rem);
-    padding-top: var(--sds-g-spacing-2, 0.5rem);
+    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+    margin-top: var(--slds-g-spacing-2);
+    padding-top: var(--slds-g-spacing-2);
   }
 }

package/src/lightning/menuDivider/menuDivider.css

@@ -1,6 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './menu-divider.slds.css'; */
-
-:host {
-    display: block;
-}
+@import './menuDivider.lbc.synthetic.css';
+@import './menuDivider.lbc.native.css';

package/src/lightning/menuDivider/menuDivider.js

@@ -1,16 +1,17 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 /**
  * Creates a divider in the list of items for lightning-button-menu.
  */
-export default class LightningMenuDivider extends LightningElement {
+export default class LightningMenuDivider extends LightningShadowBaseClass {
     @track _variant = 'standard';
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'separator');
-        this.setAttribute('aria-hidden', 'true');
     }
 
     /**

package/src/lightning/menuDivider/menuDivider.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './menu-divider.slds.css';

package/src/lightning/menuDivider/menuDivider.lbc.synthetic.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

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

@@ -15,12 +15,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: var(--sds-g-spacing-2, 0.5rem);
+    gap: var(--slds-g-spacing-2);
     position: relative;
-    padding: var(--sds-g-spacing-2, 0.5rem) var(--sds-g-spacing-3, 0.75rem);
-    color: var(--sds-g-color-neutral-base-10, #181818);
-    line-height: var(--sds-g-font-lineheight-4, 1.5);
-    font-weight: var(--sds-g-font-weight-4, 400);
+    padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3);
+    color: var(--slds-g-color-neutral-base-10);
+    line-height: var(--slds-g-font-lineheight-4);
+    font-weight: var(--slds-g-font-weight-4);
     white-space: nowrap;
     cursor: pointer;
   }
@@ -29,20 +29,20 @@
   a:focus {
     outline: 0;
     text-decoration: none;
-    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    background-color: var(--slds-g-color-surface-container-2);
   }
 
   :host([data-render-mode="shadow"]) a:active {
     text-decoration: none;
-    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    background-color: var(--slds-g-color-surface-container-2);
   }
 
   :host([data-render-mode="shadow"]) a[aria-disabled='true'] {
-    color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    color: var(--slds-g-color-disabled-2);
     cursor: default;
 
     /* Reassignment - lightning-icon */
-    --slds-c-icon-color-foreground-default: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-icon-color-foreground-default: var(--slds-g-color-disabled-2);
     --slds-c-icon-boundary-spacing-inlineend: 25px;
   }
 
@@ -63,7 +63,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: var(--sds-g-spacing-2, 0.5rem);
+    gap: var(--slds-g-spacing-2);
   }
 
   /**
@@ -72,7 +72,7 @@
    * @TODO: currently not supported by LBC
    */
   :host([data-render-mode="shadow"].slds-has-error) a {
-    background: var(--sds-g-color-error-base-40, #ba0517);
+    background: var(--slds-g-color-error-container-1);
   }
 
   /**
@@ -81,11 +81,11 @@
    * @TODO: currently not supported by LBC
    */
   :host([data-render-mode="shadow"].slds-has-success) a {
-    background: var(--sds-g-color-success-base-70, #45c65a);
+    background: var(--slds-g-color-success-container-1);
   }
 
   :host([data-render-mode="shadow"].slds-has-error) a,:host([data-render-mode="shadow"].slds-has-success) a {
-    color: var(--sds-g-color-neutral-base-100, #ffffff);
+    color: var(--slds-g-color-on-success-1);
   }
 
   /**
@@ -94,7 +94,7 @@
    * @TODO: currently not supported by LBC
    */
   :host([data-render-mode="shadow"].slds-has-warning) a {
-    background: var(--sds-g-color-warning-base-70, #fe9339);
+    background: var(--slds-g-color-warning-container-1);
   }
 
   :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unread {
@@ -130,11 +130,11 @@
    */
   :host([data-render-mode="shadow"]) .slds-indicator_unsaved,:host([data-render-mode="shadow"]) 
   .slds-indicator--unsaved {
-    color: var(--sds-g-color-brand-base-50, #0176d3);
+    color: var(--slds-g-color-accent-2);
     align-self: center;
     position: relative;
 
     /* Unsaved indicator does not have gap spacing, everything else does */
-    margin-inline-end: calc(var(--sds-g-spacing-2, 0.5rem) * -1);
+    margin-inline-end: calc(var(--slds-g-spacing-2) * -1);
   }
 }

package/src/lightning/menuItem/menuItem.css

@@ -1,6 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './menu-item.slds.css'; */
-
-:host {
-    display: block;
-}
+@import './menuItem.lbc.synthetic.css';
+@import './menuItem.lbc.native.css';

package/src/lightning/menuItem/menuItem.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -7,10 +8,14 @@ import {
 } from 'lightning/utilsPrivate';
 import { sanitizeURL, FALLBACK_URL } from 'lightning/utilsPrivate';
 
+const selectedClass = 'slds-is-selected';
+
 /**
  * Represents a list item in a menu.
  */
-export default class LightningMenuItem extends LightningElement {
+export default class LightningMenuItem extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     /**
      * A value associated with the menu item.
      * @type {string}
@@ -62,6 +67,7 @@ export default class LightningMenuItem extends LightningElement {
     @api draftAlternativeText;
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'presentation');
     }
 
@@ -187,7 +193,11 @@ export default class LightningMenuItem extends LightningElement {
         }
         this._checked = value;
 
-        this.classList.toggle('slds-is-selected', this.checked === true);
+        if (this.checked === true) {
+            this.classList.add(selectedClass);
+        } else {
+            this.classList.remove(selectedClass);
+        }
     }
 
     get computedCheckedIconClass() {

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/menuItem/menuItem.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './menu-item.slds.css';

package/src/lightning/menuItem/menuItem.lbc.synthetic.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/lightning/menuSubheader/menu-subheader.slds.css

@@ -4,10 +4,10 @@
 
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) .slds-dropdown__header {
-    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-    font-weight: var(--sds-g-font-weight-7, 700);
-    padding-block: var(--sds-g-spacing-2, 0.5rem);
-    padding-inline: var(--sds-g-spacing-3, 0.75rem);
+    font-size: var(--slds-g-font-scale-neg-1);
+    font-weight: var(--slds-g-font-weight-7);
+    padding-block: var(--slds-g-spacing-2);
+    padding-inline: var(--slds-g-spacing-3);
   }
 
   /**

package/src/lightning/menuSubheader/menuSubheader.css

@@ -1,6 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './menu-subheader.slds.css'; */
-
-:host {
-    display: block;
-}
+@import './menuSubheader.lbc.synthetic.css';
+@import './menuSubheader.lbc.native.css';

package/src/lightning/menuSubheader/menuSubheader.js

@@ -1,9 +1,10 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 /**
  * Creates a subheader in the list of items in lightning-button-menu.
  */
-export default class LightningMenuSubheader extends LightningElement {
+export default class LightningMenuSubheader extends LightningShadowBaseClass {
     /**
      * The text displayed in the subheader.
      * @type {string}
@@ -11,6 +12,7 @@ export default class LightningMenuSubheader extends LightningElement {
     @api label;
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'presentation');
     }
 }

package/src/lightning/menuSubheader/menuSubheader.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './menu-subheader.slds.css';

package/src/lightning/menuSubheader/menuSubheader.lbc.synthetic.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

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

@@ -551,6 +551,36 @@ handleRowButtonClick(event) {
 }
 ```
 
+#### Styling Forms in Native Shadow
+
+NOTE:
+- Due to the intentional changes introduced with Native Shadow, it is important to understand that styles outside of your modal's code will not be able to style elements within your modal.
+- Don't import SLDS styles your web UI doesn't actually use. Adding extra CSS files will cause the performance of your web UI to be lowered
+
+A common use case for `LightningModal` is to include a form and form elements with common SLDS layouts.  While the individual Lightning Base Components will contain their own styles in Native Shadow, [Lightning Design System form element styling](https://www.lightningdesignsystem.com/components/form-element/#Stacked) for form layouts like the form element variants [Stacked](https://www.lightningdesignsystem.com/components/form-element/#Stacked), [Horizontal](https://www.lightningdesignsystem.com/components/form-element/#Horizontal) and [Compound](https://www.lightningdesignsystem.com/components/form-element/#Compound) aren't present in Native Shadow, but still needed.
+
+In order to address this, you can import the form element layout library, `lightning/sldsFormElementUtils`, into your `LightningModal`'s implementation code, along with other commonly needed libaries.
+
+Following the previous `c/myModalWithTreeGridNavigation` implementation example, you might import these styles in the following fashion.
+
+```css
+/* c/myModalWithTreeGridNavigation.css */
+
+/* provides base SLDS styling for H1-H6, P, UL, etc elements */
+/* recommended for most customers */
+@import 'lightning/sldsCommon';
+/* provides SLDS form element styles for Stacked, Horizontal, Compound layouts */
+/* recommended for customers building forms, and need form element variant classes */
+@import 'lightning/sldsFormElementUtils';
+/* provides column sizing for grid layouts */
+/* recommended for customers working with grid and grid sizing SLDS styles*/
+@import 'lightning/sldsUtilsSizing';
+/* ... */
+.your-other-specific-styles-inside-the-modal {
+    border: 1px solid #c00;
+}
+```
+
 #### Styling Variants
 
 The `lightning-modal-header` and `lightning-modal-footer` child components are optional, and you can choose to not include one or the other in your modal.

package/src/lightning/modal/__examples__disabled/allformfullcompound/allformfullcompound.css

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

package/src/lightning/modal/__examples__disabled/allformfullcompound/allformfullcompound.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="example">
+        <button
+            onclick={handleDemoModal}
+            aria-haspopup="modal"
+        >Open Modal form, w/ compound variant layout using lightning comps, size=full</button>
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+</template>

package/src/lightning/modal/__examples__disabled/allformfullcompound/allformfullcompound.js

@@ -0,0 +1,54 @@
+import { LightningElement } from 'lwc';
+import ModalDemoAllFormFullCompound from 'modal/demoallformfullcompound';
+
+// this form is loosely based on SLDS form element blueprint, Compound Variant
+// https://www.lightningdesignsystem.com/components/form-element/#Compound
+// + uses sizing utils: https://www.lightningdesignsystem.com/utilities/sizing/
+
+export default class ModalAllFormCompound extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemoAllFormFullCompound.open({
+            // LightningModal
+            size: 'full',
+            // this becomes 'label'
+            heading: 'Form Element Compound Variant',
+            description:
+                'Recreating lighntning-input-address using SLDS form element and sizing utils',
+            // ModalDemo
+            options: [
+                {
+                    id: 1,
+                    variant: 'neutral',
+                    label: 'Close',
+                    triggerCancel: true,
+                },
+                {
+                    id: 2,
+                    variant: 'neutral',
+                    label: 'Disable Close Button',
+                    toggleDisableClose: true,
+                },
+                {
+                    id: 3,
+                    variant: 'neutral',
+                    label: 'Open Next Modal',
+                    triggerSecondModal: true,
+                },
+                {
+                    id: 4,
+                    variant: 'brand',
+                    label: 'Save Data',
+                    triggerSubmit: true,
+                },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = JSON.stringify(result);
+            }
+        });
+    }
+}

package/src/lightning/modal/__examples__disabled/allformhoriz/allformhoriz.css

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

package/src/lightning/modal/__examples__disabled/allformhoriz/allformhoriz.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="example">
+        <button
+            onclick={handleDemoModal}
+            aria-haspopup="modal"
+        >Open Modal form w/ horizontal layout, size=medium, </button>
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+</template>

package/src/lightning/modal/__examples__disabled/allformhoriz/allformhoriz.js

@@ -0,0 +1,53 @@
+import { LightningElement } from 'lwc';
+import ModalDemoAllFormHoriz from 'modal/demoallformhoriz';
+
+// this form is loosely based on SLDS form element blueprint, Horizontal Variant
+// https://www.lightningdesignsystem.com/components/form-element/#Horizontal
+// sizing utils not in use: https://www.lightningdesignsystem.com/utilities/sizing/
+
+export default class ModalAllFormHoriz extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemoAllFormHoriz.open({
+            // LightningModal
+            size: 'large',
+            // this becomes 'label'
+            heading: 'Form Element Horizontal Variant',
+            description: 'Edit the contact information for Sales Opportunities',
+            // ModalDemo
+            options: [
+                {
+                    id: 1,
+                    variant: 'neutral',
+                    label: 'Close',
+                    triggerCancel: true,
+                },
+                {
+                    id: 2,
+                    variant: 'neutral',
+                    label: 'Disable Close Button',
+                    toggleDisableClose: true,
+                },
+                {
+                    id: 3,
+                    variant: 'neutral',
+                    label: 'Open Next Modal',
+                    triggerSecondModal: true,
+                },
+                {
+                    id: 4,
+                    variant: 'brand',
+                    label: 'Save Data',
+                    triggerSubmit: true,
+                },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = JSON.stringify(result);
+            }
+        });
+    }
+}

package/src/lightning/modal/__examples__disabled/allmulti/allmulti.html

@@ -18,6 +18,7 @@
                 variant={option.variant}
                 onclick={handleOptionClick}
                 data-id={option.id}
+                data-label={option.label}
             ></lightning-button>
         </template>
     </div></lightning-modal-footer>

package/src/lightning/modal/__examples__disabled/allmulti/allmulti.js

@@ -4,9 +4,51 @@ import LightningModal from 'lightning/modal';
 export default class ModalAllMulti extends LightningModal {
     @api heading = 'Second Modal, higher z-index, small size';
     @api options = [];
+    _sizes = ['small', 'medium', 'large', 'full'];
 
     handleOptionClick(e) {
         const { target } = e;
-        this.close(parseInt(target.dataset.id, 10));
+        // optionally when applicable, stack a third modal
+        if (target.dataset?.label?.includes('Open Next Modal')) {
+            this.stackMoreModalsOnSecondModal(e.target);
+        } else {
+            this.close(parseInt(target.dataset.id, 10));
+        }
+    }
+
+    // Helper function to stack more modals with random sizes on top of each other.
+    stackMoreModalsOnSecondModal(target) {
+        // eslint-disable-next-line radix
+        const inputId = parseInt(target.dataset.id);
+        const currentModalId = inputId === 1 ? 2 + 1 : inputId + 1;
+        const randomSize =
+            this._sizes[Math.floor(Math.random() * this._sizes.length)];
+        ModalAllMulti.open({
+            size: randomSize,
+            heading: currentModalId + ' Modal w/ higher z-index',
+            description:
+                'A description of the ' + currentModalId.toString() + ' modal',
+            // ModalDemo
+            options: [
+                {
+                    id: `${currentModalId}`,
+                    variant: 'neutral',
+                    label: 'Open Next Modal',
+                    focusName: `focus-footer-button-0${currentModalId}`,
+                },
+                {
+                    id: `${currentModalId + 1}`,
+                    variant: 'neutral',
+                    label: 'Close This Modal',
+                    focusName: `focus-footer-button-0${currentModalId + 1}`,
+                },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = { action: 'dismissed' };
+            } else {
+                this.demoResult = result;
+            }
+        });
     }
 }

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

@@ -4,4 +4,4 @@
     background: #FFF;
     box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
-}
+}

package/src/lightning/modal/__examples__disabled/demo/demo.css

@@ -0,0 +1 @@
+@import 'lightning/sldsCommon';

package/src/lightning/modal/__examples__disabled/demoall/demoall.css

@@ -0,0 +1,5 @@
+@import 'lightning/sldsCommon';
+
+:host([data-render-mode="shadow"]) lightning-modal-footer lightning-button:not(:first-child) {
+    margin-left: var(--sds-g-spacing-2, 0.5rem);
+}

package/src/lightning/modal/__examples__disabled/demoallform/demoallform.css

@@ -1,3 +1,2 @@
-lightning-input .slds-checkbox_toggle .slds-checkbox_faux_container {
-    display: block !important;
-}
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsFormElementUtils';