lightning-base-components 1.18.8-ssr → 1.19.2-alpha

package/src/lightning/modalBase/modalBase.js

@@ -1,7 +1,7 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { api, LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
+    isCSR,
     makeEverythingExceptElementInert,
     normalizeString,
     synchronizeAttrs,
@@ -17,16 +17,15 @@ import {
 } from 'lightning/focusUtils';
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
-import AriaObserver from 'lightning/ariaObserver';
 
 const DEBOUNCE_RESIZE = 300;
-const SMALL_SCREEN_SIZE = 767;
+const SMALL_SCREEN_SIZE = 768;
 const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
 
-export default class LightningModalBase extends LightningShadowBaseClass {
+export default class LightningModalBase extends LightningElement {
     // this is visible in DOM, changed from 'lightning-modal-base'
     static [instanceName] = 'lightning-modal-base';
 
@@ -52,8 +51,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     headerLabelIsPopulated = null;
     headerTitleRef = null;
     headerTabElemRef = null;
-    headerHeightCheck = null;
-    updateHeaderCallback = null;
 
     // modalBody, child
     bodyRegistered = false;
@@ -75,8 +72,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     footerSlotHasRendered = false;
     footerDefaultSlotIsPopulated = false;
     footerTabElemRef = null;
-    footerHeightCheck = null;
-    updateFooterCallback = null;
 
     // aria attributes
     modalLabel = null;
@@ -94,14 +89,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     // before modal opened, element previously focused
     savedActiveElement;
 
-    // accessibility
-    ariaObserver = null;
-
-    constructor() {
-        super();
-        this.ariaObserver = new AriaObserver(this);
-    }
-
     /**
      * <lightning-modal> label value
      * Text to display as the heading at the top of the modal
@@ -354,12 +341,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * modal header so the close button maintains visibility for a11y
      * @private
      */
+    // slds-button slds-button_icon slds-modal__close slds-button_icon-inverse
     get computedCloseButtonCssClass() {
         let classes = classSet('slds-modal__close');
         const fullScreenActive =
             this.isSmallScreenSize && this.size === SIZE_FULL;
         classes.add({
-            'slds-button_icon-border-filled': fullScreenActive,
             'slds-modal_full-close-button': fullScreenActive,
         });
         return classes.toString();
@@ -453,10 +440,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     closeModal() {
         this.returnFocusToBackground();
         this.renderBackgroundActive(this.savedInertElements);
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
     }
 
     /**
@@ -473,9 +456,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         });
         // console.error when label empty
         this.errorLabelRequired();
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-        }
     };
 
     get isDescriptionSet() {
@@ -540,12 +520,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         // headerLabelIsPopulated is equivalent labelIsEmpty, but from modalHeader level
         if (headerRegistered) {
             if (headerLabelId && headerLabelIsPopulated) {
-                this.ariaObserver.connect({
-                    targetNode: this.modalWrapper,
-                    attribute: 'aria-labelledby',
-                    relatedNodes: [this.headerTitleRef],
+                synchronizeAttrs(this.modalWrapper, {
+                    [ARIA.LABELLEDBY]: headerLabelId,
+                    [ARIA.LABEL]: null,
                 });
-                synchronizeAttrs(this.modalWrapper, { [ARIA.LABEL]: null });
                 // if labelId not set OR header label value not set,
                 // must console.error
             } else {
@@ -861,8 +839,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         firstTabbableElemRef,
         defaultSlotWrapperId,
         defaultSlotHasRendered,
-        checkHeaderHeightCallback,
-        updateHeaderCallback,
         unRegisterCallback,
         labelIsPopulated,
         headerHeight,
@@ -878,8 +854,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelIsPopulated = labelIsPopulated;
         this.headerTitleRef = headerRef;
         this.headerTabElemRef = firstTabbableElemRef;
-        this.headerHeightCheck = checkHeaderHeightCallback;
-        this.updateHeaderCallback = updateHeaderCallback;
         unRegisterCallback(() => {
             this.unregisterHeader();
         });
@@ -917,8 +891,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
         this.headerTabElemRef = null;
-        this.headerHeightCheck = null;
-        this.updateHeaderCallback = null;
     }
 
     /**
@@ -950,16 +922,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         footerHeight,
         unRegisterCallback,
         firstTabbableElemRef,
-        checkFooterHeightCallback,
-        updateFooterCallback,
     }) {
         this.footerRegistered = true;
         this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
         this.footerSlotHasRendered = defaultSlotHasRendered;
         this.updateFooterHeight(footerHeight);
         this.footerTabElemRef = firstTabbableElemRef || null;
-        this.footerHeightCheck = checkFooterHeightCallback;
-        this.updateFooterCallback = updateFooterCallback;
         unRegisterCallback(() => {
             this.unregisterFooter();
         });
@@ -992,8 +960,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.footerSlotHasRendered = false;
         this.footerDefaultSlotIsPopulated = false;
         this.footerTabElemRef = null;
-        this.footerHeightCheck = null;
-        this.updateFooterCallback = null;
     }
 
     /**
@@ -1018,54 +984,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return this.size === SIZE_FULL && this.isSmallScreenSize;
     }
 
-    /**
-     * Under the right conditions, update the local tracked header height value
-     * @private
-     */
-    checkAndUpdateHeaderHeight() {
-        // important to verify that header is registered,
-        // and not on initial render of modal parent, since
-        // child component may not yet exist
-        const shouldCheckHeaderHeight =
-            !this.initialRender &&
-            this.headerRegistered &&
-            this.shouldModalBeFullScreen();
-        // when screen size changes, variable height content within the
-        // modal header can reflow
-        // for example: 3 rows of content in tagline can become 2 rows
-        if (shouldCheckHeaderHeight) {
-            const { changed: headerChangedHeight, value: newHeaderHeight } =
-                this.headerHeightCheck();
-            if (headerChangedHeight) {
-                this.updateHeaderHeight(newHeaderHeight);
-            }
-        }
-    }
-
-    /**
-     * Under the right conditions, update the local tracked footer height value
-     * @private
-     */
-    checkAndUpdateFooterHeight() {
-        // important to verify that footer is registered,
-        // and not on initial render of modal parent, since
-        // child component may not yet exist
-        const shouldCheckFooterHeight =
-            !this.initialRender &&
-            this.footerRegistered &&
-            this.shouldModalBeFullScreen();
-        // when screen size changes, variable height content within the
-        // modal footer can reflow
-        // for example: 1 row of buttons to 2 rows, or 2 rows to 1 row
-        if (shouldCheckFooterHeight) {
-            const { changed: footerChangedHeight, value: newFooterHeight } =
-                this.footerHeightCheck();
-            if (footerChangedHeight) {
-                this.updateFooterHeight(newFooterHeight);
-            }
-        }
-    }
-
     /**
      * When the modalBody content height is tall, it requires max-height
      * to be set in order to prevent overflow of the modal offscreen
@@ -1077,23 +995,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         clearTimeout(this.timeoutId);
         this.timeoutId = 0;
 
-        if (this.updateHeaderCallback) {
-            // Update the header size
-            this.updateHeaderCallback({ size: this.size });
-        }
-
-        if (this.updateFooterCallback) {
-            // Update the footer size
-            this.updateFooterCallback({ size: this.size });
-        }
-
         if (this.bodyRegistered && !this.bodyResizeScheduled) {
             // check, and update isSmallScreenSize before
             // callback to modalBody
             this.setIsSmallScreenSize();
-            // check for height changes in header or footer
-            this.checkAndUpdateHeaderHeight();
-            this.checkAndUpdateFooterHeight();
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
                 this.bodyResizeScheduled = false;
@@ -1106,7 +1011,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
                         backdropWidth: this.backdropDimensions.width,
                         sizeSetFull: this.size === SIZE_FULL,
                         isSmallScreenSize: this.isSmallScreenSize,
-                        size: this.size,
                     };
                     this.baseUpdateBodyCallback(values);
                 }
@@ -1144,7 +1048,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @private
      */
     addWindowResizeEventListener() {
-        if (window && !this.windowResizeEventBound) {
+        if (isCSR && !this.windowResizeEventBound) {
             window.addEventListener('resize', this.handleWindowResizeEvent);
             this.windowResizeEventBound = true;
         }
@@ -1155,7 +1059,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @private
      */
     removeWindowResizeEventListener() {
-        if (window && this.windowResizeEventBound) {
+        if (isCSR && this.windowResizeEventBound) {
             window.removeEventListener('resize', this.handleWindowResizeEvent);
             clearTimeout(this.timeoutId);
             this.timeoutId = 0;
@@ -1186,15 +1090,19 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * orientation changes: 'portrait' -> 'landscape' -> 'portrait'
      */
     addOrientationChangeListener() {
-        this.portraitMatchMedia = window.matchMedia('(orientation: portrait)');
-        this.screenOrientationChangeHandler =
-            this.handleWindowResizeEvent.bind(this);
-        if (this.portraitMatchMedia) {
-            this.portraitMatchMedia.addEventListener(
-                'change',
-                this.screenOrientationChangeHandler
+        if (isCSR) {
+            this.portraitMatchMedia = window.matchMedia(
+                '(orientation: portrait)'
             );
-            this.windowOrientationEventBound = true;
+            this.screenOrientationChangeHandler =
+                this.handleWindowResizeEvent.bind(this);
+            if (this.portraitMatchMedia) {
+                this.portraitMatchMedia.addEventListener(
+                    'change',
+                    this.screenOrientationChangeHandler
+                );
+                this.windowOrientationEventBound = true;
+            }
         }
     }
 
@@ -1207,11 +1115,15 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @private
      */
     setIsSmallScreenSize() {
-        const docElem = (document && document.documentElement) || null;
-        const browserWidth = docElem ? docElem.clientWidth : window.innerWidth;
-        const isSmallScreenSize = browserWidth <= SMALL_SCREEN_SIZE;
-        if (isSmallScreenSize !== this.isSmallScreenSize) {
-            this.isSmallScreenSize = isSmallScreenSize;
+        if (isCSR) {
+            const docElem = (document && document.documentElement) || null;
+            const browserWidth = docElem
+                ? docElem.clientWidth
+                : window.innerWidth;
+            const isSmallScreenSize = browserWidth <= SMALL_SCREEN_SIZE;
+            if (isSmallScreenSize !== this.isSmallScreenSize) {
+                this.isSmallScreenSize = isSmallScreenSize;
+            }
         }
     }
 
@@ -1262,7 +1174,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.initModalState();
         // check for screen size right away
         // not adding event listeners here,

package/src/lightning/modalBody/__docs__/modalBody.md

@@ -5,7 +5,7 @@ component after `lightning-modal-header` and before `lightning-modal-footer` com
 
 This sample code shows the expected order of the modal components. The modal content is
 created in a separate component extended from `LightningModal`. See
-[Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
+[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)
 
 ```html
 <!-- my/modalDialog.html -->
@@ -53,9 +53,9 @@ For example, specify the background color on the modal using the `sds-c-modal-co
 
 See the modal blueprint's [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 
-See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
+See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.
 

package/src/lightning/modalBody/modalBody.html

@@ -2,7 +2,6 @@
     <div
         id="modal-content"
         class={modalBodyCssClasses}
-        part="modal-body"
         data-content-container
         onprivatescrollablecontainer={handleScrollableContainerRepositionEvent}
     >

package/src/lightning/modalBody/modalBody.js

@@ -1,4 +1,4 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
@@ -6,7 +6,7 @@ import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 /**
  * The modal body component to display main content area in lightning modal.
  * */
-export default class LightningModalBody extends LightningShadowBaseClass {
+export default class LightningModalBody extends LightningElement {
     // private tracked state
     initialRender = true;
     initialSlotRender = true;
@@ -147,26 +147,19 @@ export default class LightningModalBody extends LightningShadowBaseClass {
      * Based on initial values, calculate min/max height style values
      * to set on modalBody for correct display of content, and scrollability
      * @param {object} values passed from modalBase to modalBody,
-     * @param {boolean} shouldUseFullHeight boolean to determine if full
      * height of screen should be used
      * representing height and width values of header, footer, and body
      * @return {object} values, after adding of modalUsableHeight
      * @private
      */
-    updateModalBodyHeightValues(values, shouldUseFullHeight) {
-        const { modalBodyMinHeight } = values;
-        // first have to calculate the correct values
+    updateModalBodyHeightValues(values) {
+        // first, have to calculate the correct values
         const updatedValues = this.calculateModalUsableHeight(values);
         const modalBodyUsableHeight =
             this.calculateModalBodyUsableHeight(updatedValues);
         // update values with calculated values
         values.modalBodyUsableHeight = modalBodyUsableHeight;
         values.maxModalBodyHeightStyle = `${modalBodyUsableHeight}px`;
-        // need to adjust minHeight, to force modal to use full height
-        // of user screen
-        values.minModalBodyHeightStyle = shouldUseFullHeight
-            ? `${modalBodyUsableHeight}px`
-            : `${modalBodyMinHeight}px`;
         return values;
     }
 
@@ -176,33 +169,38 @@ export default class LightningModalBody extends LightningShadowBaseClass {
      * @private
      */
     setModalBodyHeight(values, shouldUseFullHeight) {
-        const { maxModalBodyHeightStyle, minModalBodyHeightStyle } =
-            this.updateModalBodyHeightValues(values, shouldUseFullHeight);
+        // set base style to remove any preset max/min-height values
+        // if you move from > 767 to <= 767 or vise versa, previously set
+        // values must be unset. removing by setting initial 'null' values
+        let styles = { maxHeight: null, minHeight: null };
+        // when not utilizing size=full screen modal
+        // we need to calculate the max-height value
+        // so the modalBody content scrolls correctly
+        // (min-height value is always static for non size=full modals)
+        // size=full screen modal required a CSS Grid based solution
+        // due to iOS dynamic view port heights
+        if (!shouldUseFullHeight) {
+            // update the max-height and min height values
+            // on modal body wrapper div
+            const { maxModalBodyHeightStyle, minModalBodyHeightStyle } =
+                this.updateModalBodyHeightValues(values);
+            styles.maxHeight = maxModalBodyHeightStyle;
+            styles.minHeight = minModalBodyHeightStyle;
+        }
         const divElem = this.contentElem;
-        const styles = {
-            maxHeight: maxModalBodyHeightStyle,
-            minHeight: minModalBodyHeightStyle,
-        };
-        // set the max and min height value on modal body wrapper div
         Object.assign(divElem.style, styles);
     }
 
     /**
-     * Update values based on whether size="full" behavior should be full screen (small)
-     * or less than full screen (large)
-     * @param {Boolean} shouldUseFullHeight Whether full height of screen should be used
+     * Update values for any size modal behavior when not exhibiting full height behavior
+     * size=small|medium|large && size=full (when screen size greater than 767px)
      * @param {object} values Provided height, width values from handleUpdateHeight
-     * @returns {object} updatedValues based on full screen or default strategy used
+     * @returns {object} updatedValues for default modal behavior. not utilized for full screen
      * @private
      */
-    updateValues(shouldUseFullHeight, values) {
+    updateValues(values) {
         const { headerHeight, footerHeight, backdropHeight } = values;
         const MODAL_BODY_MIN_HEIGHT = 80;
-        // Full screen size constants
-        // positioning values of body and footer are effected
-        // by modalHeader presence (headless)
-        const PAD_TOP_FULL = 48;
-        const PAD_BOTTOM_FULL = 1;
         // default screen behavior (original modal behavior)
         const PAD_TOP_DEFAULT = 48;
         const PAD_BOTTOM_DEFAULT = 80;
@@ -212,14 +210,16 @@ export default class LightningModalBody extends LightningShadowBaseClass {
             headerHeight: Math.floor(headerHeight),
             footerHeight: Math.floor(footerHeight),
             backdropHeight: Math.floor(backdropHeight),
-            paddingTop: shouldUseFullHeight ? PAD_TOP_FULL : PAD_TOP_DEFAULT,
-            paddingBottom: shouldUseFullHeight
-                ? PAD_BOTTOM_FULL
-                : PAD_BOTTOM_DEFAULT,
+            paddingTop: PAD_TOP_DEFAULT,
+            paddingBottom: PAD_BOTTOM_DEFAULT,
             modalBodyMinHeight: MODAL_BODY_MIN_HEIGHT,
-            // these last four values must first be calculated
+            // since size=full screen no longer relies on
+            // JS calculated values, minHeight value is only
+            // utilized for !size=full modals, and the value is
+            // always static at 'min-height: 80px'
+            minModalBodyHeightStyle: `${MODAL_BODY_MIN_HEIGHT}px`,
+            // these last three values must first be calculated
             // the first two values get set on modal body
-            minModalBodyHeightStyle: null,
             maxModalBodyHeightStyle: null,
             modalBodyUsableHeight: null,
             modalUsableHeight: null,
@@ -243,7 +243,6 @@ export default class LightningModalBody extends LightningShadowBaseClass {
             const {
                 sizeSetFull,
                 isSmallScreenSize,
-                size,
                 headerHeight,
                 footerHeight,
             } = values;
@@ -252,23 +251,9 @@ export default class LightningModalBody extends LightningShadowBaseClass {
             this.footerPresent = footerHeight !== 0;
             // now determine behavior: full screen or default
             const shouldUseFullHeight = sizeSetFull && isSmallScreenSize;
-            const updatedValues = this.updateValues(
-                shouldUseFullHeight,
-                values
-            );
+            const updatedValues = this.updateValues(values);
             // set updated values based on behavior
             this.setModalBodyHeight(updatedValues, shouldUseFullHeight);
-
-            // update host variant and size based on header and footer height
-            if (!this.headerPresent) {
-                this.setAttribute('data-variant-headless', '');
-            }
-            if (!this.footerPresent) {
-                this.setAttribute('data-variant-footless', '');
-            }
-
-            // set the host size based on the modal base size
-            this.setAttribute('data-size', size);
         }
     }
 
@@ -311,7 +296,6 @@ export default class LightningModalBody extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         // handle case where modalBody is added/removed/re-added to DOM
         this.initState();
     }

package/src/lightning/modalFooter/__docs__/modalFooter.md

@@ -6,7 +6,7 @@ Place the `lightning-modal-footer` component after the `lightning-modal-body` co
 
 This sample code shows the expected order of the modal components. The modal content is
 created in a separate component extended from `LightningModal`. See
-[Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
+[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)
 
 This sample's `lightning-modal-footer` includes two `lightning-button` components,
 but you can also use `<button>` elements.
@@ -59,7 +59,7 @@ For example, specify the background color on the footer using the `sds-c-modal-f
 
 See the modal blueprint's [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 
@@ -68,5 +68,5 @@ If you add buttons to the footer, you can use the accessibility attributes descr
 When the modal opens, focus goes to the first interactive element in the modal. If there are no links in the header or any interactive elements
 in the modal body, the first footer button gets initial focus.
 
-See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
+See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.
 

package/src/lightning/modalFooter/modalFooter.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={footerCssClasses} part="modal-footer">
+    <div class={footerCssClasses}>
         <slot
             data-footer-slot
             onslotchange={handleDefaultSlotChange}